0

我需要使用带有 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>

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

有任何想法吗？

4

2 回答 2

1

从您发布的截屏视频中：

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

  • 在解决方案资源管理器中右键单击Black_Tools.png> 属性
  • 构建操作：资源
  • 复制到输出目录：始终复制（如果更新，则复制）

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

于 2013-03-22T15:38:42.187 回答
0

刷一下我之前说的。这要容易得多。

您只需要 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>
于 2013-03-22T14:15:10.527 回答