0

mahapps.metroの踏み越し段で、テキストと画像を含むタブアイテムを使用する必要があります。これが私のコードです。

<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にバインドしてから、セッターで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 に答える