Question

我需要使用mahapps.metro的窗框，带有文本和图像的tabitem。这是我的代码：

<TabItem Style="{StaticResource gMetroTabItem}">
    <TabItem.Header>
        <StackPanel Orientation="Horizontal">
            <Image Name="img" Height="auto" Width="auto" Source="/myProject;component/Resources/Black_Tools.png" />
            <TextBlock Text="tabItem2" Margin="2,0,0,0" VerticalAlignment="Center" />
        </StackPanel>
    </TabItem.Header>
</TabItem>

这是样式的代码：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style TargetType="{x:Type TabControl}" x:Key="gMetroTabControl">
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="BorderBrush" Value="{x:Null}" />
    </Style>

    <Style TargetType="TabItem" x:Key="gMetroTabItem">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Padding" Value="6,2,6,2" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="MinWidth" Value="5" />
        <Setter Property="MinHeight" Value="5" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Label x:Name="root" FontSize="46.67">
                        <ContentPresenter ContentSource="Header"  RecognizesAccessKey="True" />
                    </Label>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="root" Property="Foreground">
                                <Setter.Value>
                                    <SolidColorBrush Color="{DynamicResource AccentColor}" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>

                        <Trigger Property="IsSelected" Value="false">
                            <Setter  TargetName="root" Property="Foreground">
                                <Setter.Value>
                                    <SolidColorBrush Color="{DynamicResource GrayNormal}" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger SourceName="root" Property="IsMouseOver" Value="True">
                            <Setter  TargetName="root" Property="Foreground">
                                <Setter.Value>
                                    <SolidColorBrush Color="Lime" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <!--<Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <AdornerDecorator>
                        <ContentPresenter Content="{Binding}"/>
                    </AdornerDecorator>
                </DataTemplate>
            </Setter.Value>
        </Setter>-->
    </Style>
</ResourceDictionary>

但不起作用，因为样式会更改文本属性，并且不显示图像..

任何想法？

Answer 1

根据您发布的截屏视频图片：

设计时间：http://www.screencast.com/t/TV20zfCi
运行时：http://www.screencast.com/t/7w9rBBEkhMnH

这表示Black_Tools.png具有不正确的属性。确保将映像设置为资源并将其复制到输出目录：

右键单击解决方案资源管理器中的Black_Tools.png＆gt;特性
构建操作：资源
复制到输出目录：始终复制（或复制如果更新）

如果图像未设置为资源并复制到输出目录，那么您将在设计时看到图像，因为可以在解决方案中解析图像。但是，在运行时，图像路径是不同的，因为文件将位于项目的输出目录中。

Answer 2

抓一下我之前说过的话。这更容易。

您只需要TabControl.ItemTemplate。这就决定了标题的布局。通过对祖先的一些棘手的绑定，您可以绑定到DataTriggers的TabItem属性。

在此示例中，我将展示如何绑定到IsSelectedProperty。我将把IsMouseOver作为练习留给你。提示：使用ElementName“root”绑定到IsMouseOver，然后在setter中使用TargetName =“root”。

    <Style TargetType="{x:Type TabControl}" x:Key="gMetroTabControl">
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="BorderBrush" Value="{x:Null}" />
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type local:TabItemHeaderData}">
                    <StackPanel>
                        <TextBlock Name="root" Text="{Binding LabelText}"/>
                        <Rectangle Fill="{Binding RectFill}"/>
                    </StackPanel>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding
                            RelativeSource={RelativeSource
                            Mode=FindAncestor,AncestorType={x:Type TabItem}},Path=IsSelected}" Value="true">
                            <Setter TargetName="root" Property="Foreground">
                                <Setter.Value>
                                    <SolidColorBrush Color="Blue" />
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding
                            RelativeSource={RelativeSource
                            Mode=FindAncestor,AncestorType={x:Type TabItem}},Path=IsSelected}" Value="false">
                            <Setter TargetName="root" Property="Foreground">
                                <Setter.Value>
                                    <SolidColorBrush Color="Black" />
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type local:TabItemHeaderData}">
                    <ContentControl Content="{Binding Content}"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后你需要创建一个数据对象。

public class TabItemHeaderData
{
    public Brush RectColor { get; set; }
    public String LabelText { get; set; }
    public object Content { get; set; }
}

然后你只需在数据对象中设置值。

<TabControl Style="{StaticResource gMetroTabControl}">
    <local:TabItemHeaderData RectColor="Black" LabelText="John">
        <local:TabItemHeaderData.Content>
            <Button>George</Button>
        </local:TabItemHeaderData.Content>
    </local:TabItemHeaderData>
    <local:TabItemHeaderData RectColor="Black" LabelText="John">
    </local:TabItemHeaderData>
</TabControl>

wpf tabitem与图像

2 个答案: