Question

我正在学习WPF，并且阅读了有关模板的文章。所以我想写一些代码，但是被卡住了。我要怎么办我的应用程序有一个TabControl，我希望所有选项卡都具有相同的布局。一个堆栈面板，在堆栈面板中有一个Image和一个Textblock。

现在我不知道以后如何设置内容。我需要ContentPresenter吗？

<ControlTemplate x:Key="TabTemplate">
        <StackPanel Orientation="Horizontal">
            <Image></Image>
            <TextBlock></TextBlock>
        </StackPanel>
    </ControlTemplate>

Answer 1

在资源字典中添加具有所需模板的样式：

 <Style x:Key="CustomTabItemStyle"
           TargetType="{x:Type TabItem}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid x:Name="Root"
                          Width="180"
                          Height="45"
                          Margin="0,0,0,0"
                          SnapsToDevicePixels="true">

                        <StackPanel Orientation="Horizontal">
                            <Image Width="90"
                                   Margin="10"
                                   VerticalAlignment="Center"
                              Source="pack://Application:,,,/img/myTabImage.png"
                                   Stretch="Uniform" />
                            <TextBlock x:Name="contentPresenter"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Focusable="False"
                                      FontSize="16"
                                      Foreground="White"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      Text="{TemplateBinding Header}" />
                        </StackPanel>
                    </Grid>                    
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

别忘了编辑您的图像。如果所有选项卡都具有相同的图像，则只需更改“源”链接，否则，您可能需要另一个绑定，例如“内容”。

然后只需在TabItems中使用此样式：

  <TabControl Margin="0,5,0,0"
              FocusVisualStyle="{x:Null}">
       <TabItem Header="My First Tab"
                IsSelected="{Binding FirstTabItemSelected}"
                Style="{DynamicResource CustomTabItemStyle}"> 
                    ... 
       </TabItem>
       <TabItem Header="My Second Tab"
                IsSelected="{Binding SecondTabItemSelected}"
                Style="{DynamicResource CustomTabItemStyle}"> 
                    ... 
       </TabItem>
   </TabControl>

如何在WPF中定义TabItem标头模板

1 个答案: