TabControl

 

TabControl的TabStripPlacement的属性决定了分页的标题所在的位置，选项有上，下，左，右。

XAML代码：

<Canvas.Resources>

    <Style x:Key="SimpleTabControl" TargetType="{x:Type TabControl}">

      <Setter Property = "TabStripPlacement" Value = "Top"/>

      <Setter Property = "Foreground" Value= "Blue"/>

    </Style>

 

    <Style x:Key="Triggers" TargetType="{x:Type TabItem}">

      <Style.Triggers>

        <Trigger Property="TabItem.IsMouseOver" Value="true">

          <Setter Property = "Foreground" Value="Green"/>

          <Setter Property = "Background" Value="Red"/>

        </Trigger>

      </Style.Triggers>

    </Style>

 

    <Style x:Key="SimpleTabItem" TargetType="{x:Type TabItem}">

      <Setter Property = "Background" Value = "Pink"/>

      <Setter Property = "FontWeight" Value = "Bold"/>

    </Style>

 

 </Canvas.Resources>

 <Grid Name="grid" ShowGridLines ="false" Background ="White">

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="300"/>

      <ColumnDefinition Width="250"/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

      <RowDefinition/>

      <RowDefinition/>

      <RowDefinition/>

      <RowDefinition/>

      <RowDefinition/>

      <RowDefinition/>

      <RowDefinition/>

      <RowDefinition/>

      <RowDefinition/>

      <RowDefinition/>

      <RowDefinition/>

      <RowDefinition/>

      <RowDefinition/>

    </Grid.RowDefinitions>

 

    <TextBlock Margin="10, 10, 3, 3" Grid.Column="0" Grid.Row="0" FontSize="24">

      Tab Control Styles

    </TextBlock>

 

    <DockPanel Margin="30, 10, 3, 3" Grid.Column="0" Grid.Row="2">

      <TabControl Height="50" Style="{StaticResource SimpleTabControl}" Background="{x:Null}">

        <TabItem Header="Background" IsSelected="true"></TabItem>

        <TabItem Header="Foreground"></TabItem>

        <TabItem Header="BorderBrush"></TabItem>

      </TabControl>

    </DockPanel>

 

 

    <DockPanel Margin="30, 10, 3, 3" Grid.Column="0" Grid.Row="3">

      <TabControl TabStripPlacement="Left" Background="{x:Null}">

        <TabItem Header="Background" Style="{StaticResource SimpleTabItem}">

        </TabItem>

        <TabItem Header="Foreground" Style="{StaticResource SimpleTabItem}">

        </TabItem>

        <TabItem Header="BorderBrush" Style="{StaticResource SimpleTabItem}">

        </TabItem>

      </TabControl>

    </DockPanel>

     

     

    <DockPanel Margin="1,10,18,3" Grid.Column="1" Grid.Row="3">

      <TabControl TabStripPlacement="Right" Background="{x:Null}">

        <TabItem Header="Background" Style="{StaticResource SimpleTabItem}">

        </TabItem>

        <TabItem Header="Foreground" Style="{StaticResource SimpleTabItem}">

        </TabItem>

        <TabItem Header="BorderBrush" Style="{StaticResource SimpleTabItem}">

        </TabItem>

      </TabControl>

    </DockPanel>

 

    <DockPanel Margin="30, 10, 3, 3" Grid.Column="0" Grid.Row="4">

      <TabControl TabStripPlacement="Bottom">

        <TabItem Header="Background" IsSelected="true" Style="{StaticResource Triggers}">

        </TabItem>

        <TabItem Header="Foreground" Style="{StaticResource Triggers}"></TabItem>

        <TabItem Header="BorderBrush" Style="{StaticResource Triggers}"></TabItem>

      </TabControl>

    </DockPanel>

 </Grid>

</Canvas>