xaml 如何为两个选项卡控件创建样式

Question

<Window.Resources>
    <Style TargetType="{x:Type TabItem}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TabItem}">
            <Grid>
              <Border
                 Name="Border"
                 Background="LightBlue"
                 BorderBrush="Black"
                 BorderThickness="1,1,1,1"
                 CornerRadius="6,6,0,0" >
                <ContentPresenter x:Name="ContentSite"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   ContentSource="Header"
                   Margin="12,2,12,2"/>
              </Border>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
  <Grid>
      <TabControl Height="181" VerticalAlignment="Top">
        <TabItem Header="Cheese" />
        <TabItem Header="Pepperoni" />
        <TabItem Header="Mushrooms" />
      </TabControl>
      <TabControl Margin="0,201,0,60">
        <TabItem Header="Cheese" />
        <TabItem Header="Pepperoni" />
        <TabItem Header="Mushrooms" />
      </TabControl>
  </Grid>

该代码将创建两个具有相同样式的 TabControl。如何使这两个 TabControl 使用不同的样式？示例代码会很有帮助。

Answer 1

您已经定义了一个针对“TabItem”的单一样式，该样式将应用于任何选项卡控件的选项卡项，因此两个选项卡控件将具有相同的样式。您可以使用 x:Key 属性来命名两种不同的样式，然后根据您的要求将它们应用到 TabControl 或 TabItem。

Answer 2

您可以像下面的代码一样，为各个选项卡指定样式，并为样式资源提供键

<Window.Resources>
    <Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle1">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TabItem}">
            <Grid>
             ------------
             ------------
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
    <Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle2">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TabItem}">
            <Grid>
             ------------
             ------------
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
<Grid>
      <TabControl Height="181" VerticalAlignment="Top">
        <TabItem Header="Cheese" Style="{StaticResource TabItemStyle1} />
        <TabItem Header="Pepperoni" Style="{StaticResource TabItemStyle1} />
        <TabItem Header="Mushrooms" Style="{StaticResource TabItemStyle1} />
      </TabControl>
      <TabControl Margin="0,201,0,60">
        <TabItem Header="Cheese" Style="{StaticResource TabItemStyle2} />
        <TabItem Header="Pepperoni" Style="{StaticResource TabItemStyle2} />
        <TabItem Header="Mushrooms" Style="{StaticResource TabItemStyle2} />
      </TabControl>
  </Grid>

，或者您可以使用控制级样式资源

<Grid>
          <TabControl Height="181" VerticalAlignment="Top">
       <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid>
                 ------------
                 ------------
                </Grid>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
</TabControl.Resources>
            <TabItem Header="Cheese" />
            <TabItem Header="Pepperoni" />
            <TabItem Header="Mushrooms" />
          </TabControl>
          <TabControl Margin="0,201,0,60">
 <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid>
                 ------------
                 ------------
                </Grid>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
</TabControl.Resources>
            <TabItem Header="Cheese" />
            <TabItem Header="Pepperoni" />
            <TabItem Header="Mushrooms" />
          </TabControl>
      </Grid>