微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

修改TabControl的样式(SilverLight)

主程序文件

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
  x:Class="TabControl.MainPage">
  
  <UserControl.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="ResourceDictionary.xaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>    
  </UserControl.Resources>

  <Grid x:Name="LayoutRoot" Background="White">
    <sdk:TabControl HorizontalAlignment="Left" Height="200" Grid.Row="1" VerticalAlignment="Top" Width="450" 
      TabStripPlacement="Top"
      Style="{StaticResource SouthTabControlStyle}">
      <sdk:TabItem Header="TabItem" Name="tabItem01" Style="{StaticResource SouthTabItemStyle}" >
        <Grid Background="#FFFFFFFF" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
          <Grid.RowDeFinitions>
            <RowDeFinition Height="35"/>
            <RowDeFinition Height="*" />
          </Grid.RowDeFinitions>
          <StackPanel Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#FF44B3DE">
            <TextBlock Height="53" Width="147" HorizontalAlignment="Left" Margin="10,10" Text="asdfasdf" VerticalAlignment="Center"/>
          </StackPanel>
        </Grid>
      </sdk:TabItem>
      <sdk:TabItem Header="TabItem" Name="tabItem02" Style="{StaticResource SouthTabItemStyle}">
        <Grid Background="#FFE5E5E5" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
          <TextBlock Height="53" Width="147" HorizontalAlignment="Left" Margin="22,13,0" Text="asdfasdf" VerticalAlignment="Top"/>
        </Grid>
      </sdk:TabItem>
      
      <sdk:TabItem Header="TabItem" Name="tabItem03" Style="{StaticResource SouthTabItemStyle}">
        <Grid Background="#FFE5E5E5" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
          <TextBlock Height="53" Width="147" HorizontalAlignment="Left" Margin="22,0" Text="asdfasdf" VerticalAlignment="Top"/>
        </Grid>
      </sdk:TabItem>
    </sdk:TabControl>        
    
  </Grid>
</UserControl>


资源文件:ResourceDictionary.xaml

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
  xmlns:System_Windows_Controls_Primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls">
  
  <!-- 应该在此定义资源字典条目。-->
  <Style x:Key="SouthTabControlStyle" targettype="sdk:TabControl">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Background" Value="#FFFFFF" />
    <Setter Property="BorderBrush" Value="#FFCDCDCD" />
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate targettype="sdk:TabControl">
          <Grid>
            <visualstatemanager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="normal"/>
                <VisualState x:Name="disabled">
                  <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="disabledVisualTop">
                      <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="disabledVisualBottom">
                      <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="disabledVisualLeft">
                      <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="disabledVisualRight">
                      <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </visualstatemanager.VisualStateGroups>
            <Grid x:Name="Templatetop" Visibility="Collapsed">
              <Grid.RowDeFinitions>
                <RowDeFinition Height="Auto"/>
                <RowDeFinition Height="*"/>
              </Grid.RowDeFinitions>
              <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelTop" Margin="2,2,-1" Canvas.ZIndex="1"/>
              <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0,0" MinWidth="10" MinHeight="10" Grid.Row="1">
                <ContentPresenter x:Name="ContentTop" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
              </Border>
              <Border x:Name="disabledVisualTop" Background="#8CFFFFFF" CornerRadius="0,0" IsHitTestVisible="False" Opacity="0" Grid.Row="1" Grid.RowSpan="2" Canvas.ZIndex="1"/>
            </Grid>
            <Grid x:Name="TemplateBottom" Visibility="Collapsed">
              <Grid.RowDeFinitions>
                <RowDeFinition Height="*"/>
                <RowDeFinition Height="Auto"/>
              </Grid.RowDeFinitions>
              <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelBottom" Margin="2,-1,2" Grid.Row="1" Canvas.ZIndex="1"/>
              <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3,3,0" MinWidth="10" MinHeight="10">
                <ContentPresenter x:Name="ContentBottom" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
              </Border>
              <Border x:Name="disabledVisualBottom" Background="#8CFFFFFF" CornerRadius="3,0" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1"/>
            </Grid>
            <Grid x:Name="TemplateLeft" Visibility="Collapsed">
              <Grid.ColumnDeFinitions>
                <ColumnDeFinition Width="Auto"/>
                <ColumnDeFinition Width="*"/>
              </Grid.ColumnDeFinitions>
              <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelLeft" Margin="2,2" Canvas.ZIndex="1"/>
              <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" CornerRadius="0,0" MinWidth="10" MinHeight="10">
                <ContentPresenter x:Name="ContentLeft" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
              </Border>
              <Border x:Name="disabledVisualLeft" Background="#8CFFFFFF" Grid.Column="1" CornerRadius="0,0" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1"/>
            </Grid>
            <Grid x:Name="TemplateRight" Visibility="Collapsed">
              <Grid.ColumnDeFinitions>
                <ColumnDeFinition Width="*"/>
                <ColumnDeFinition Width="Auto"/>
              </Grid.ColumnDeFinitions>
              <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelRight" Grid.Column="1" Margin="-1,2" Canvas.ZIndex="1"/>
              <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3,3" MinWidth="10" MinHeight="10">
                <ContentPresenter x:Name="ContentRight" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
              </Border>
              <Border x:Name="disabledVisualRight" Background="#8CFFFFFF" CornerRadius="3,3" IsHitTestVisible="False" Margin="0" Opacity="0" Canvas.ZIndex="1"/>
            </Grid>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
  
  
  
  <Style x:Key="SouthTabItemStyle" targettype="sdk:TabItem">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Background" Value="#FF44b3de"/>
    <Setter Property="BorderBrush" Value="#FFCDCDCD"/>
    <Setter Property="Padding" Value="6,6,2"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="MinWidth" Value="100"/>
    <Setter Property="MinHeight" Value="35"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate targettype="sdk:TabItem">
          <Grid x:Name="Root">
            <visualstatemanager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0"/>
                  <VisualTransition GeneratedDuration="0:0:0.1" To="MouSEOver"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="normal"/>
                <VisualState x:Name="MouSEOver" />
                <VisualState x:Name="disabled" />                  
              </VisualStateGroup>
              <VisualStateGroup x:Name="SelectionStates">
                <VisualState x:Name="Unselected"/>
                <VisualState x:Name="Selected"/>
              </VisualStateGroup>
              <VisualStateGroup x:Name="Focusstates">
                <VisualState x:Name="Focused" />
                <VisualState x:Name="Unfocused" />
              </VisualStateGroup>
            </visualstatemanager.VisualStateGroups>
            
            <!-- Tab在Top位置 -->
            <Grid x:Name="TemplatetopSelected" Visibility="Collapsed" Canvas.ZIndex="1" Margin="-2,0">
              <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,0" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0">
                <Border BorderBrush="#FFFFFFFF" BorderThickness="0" CornerRadius="0" Background="#FF44B3DE">                  
                  <Grid>
                    <Rectangle Fill="#FF44B3DE" Margin="0"/>
                    <ContentControl x:Name="HeaderTopSelected" Cursor="{TemplateBinding Cursor}" Foreground="#FFFFFFFF" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="Center"/>
                  </Grid>
                </Border>
              </Border>
              <Border x:Name="FocusVisualTop" BorderBrush="#FF44B3DE" BorderThickness="1,0" CornerRadius="0" IsHitTestVisible="false" Margin="0" Visibility="Collapsed"/>
              <Border x:Name="disabledVisualTopSelected" Background="#8CFFFFFF" CornerRadius="0" IsHitTestVisible="false" Margin="0" Opacity="0"/>
            </Grid>
            <Grid x:Name="TemplatetopUnselected" Visibility="Collapsed" Margin="-2,0">
              <Border x:Name="BorderTop" BorderBrush="#FFCDCDCD" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="0">
                <Border x:Name="GradientTop" BorderBrush="#FFFFFFFF" BorderThickness="0" CornerRadius="0" Background="#FFFFFFFF" >
                  <Grid>
                    <ContentControl x:Name="HeaderTopUnselected" Cursor="{TemplateBinding Cursor}" Foreground="#FF222222" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="Center"/>
                  </Grid>
                </Border>
              </Border>
              <Border x:Name="disabledVisualTopUnSelected" Background="#8CFFFFFF" CornerRadius="0" IsHitTestVisible="false" Opacity="0"/>
            </Grid>
            
            <!-- Tab在Bottom位置 -->
            <Grid x:Name="TemplateBottomSelected" Visibility="Collapsed" Canvas.ZIndex="1" Margin="-2,0">
              <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0">
                <Border BorderBrush="#FFFFFFFF" BorderThickness="0" CornerRadius="0" Background="#FF44B3DE">
                  <Grid>
                    <Rectangle Fill="#FF44B3DE" Margin="0"/>
                    <ContentControl x:Name="HeaderBottomSelected" Cursor="{TemplateBinding Cursor}" Foreground="#FFFFFFFF" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="Center"/>
                  </Grid>
                </Border>
              </Border>
              <Border x:Name="FocusVisualBottom" BorderBrush="#FF44B3DE" BorderThickness="1,1" CornerRadius="0" IsHitTestVisible="false" Margin="0" Visibility="Collapsed"/>
              <Border x:Name="disabledVisualBottomSelected" Background="#8CFFFFFF" CornerRadius="0" IsHitTestVisible="false" Margin="0" Opacity="0"/>
            </Grid>
            <Grid x:Name="TemplateBottomUnselected" Visibility="Collapsed" Margin="-2,0">
              <Border x:Name="BorderBottom" BorderBrush="#FFCDCDCD" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="0">
                <Border x:Name="GradientBottom" BorderBrush="#FFFFFFFF" BorderThickness="0" CornerRadius="0" Background="#FFFFFFFF" >
                  <Grid>
                    <ContentControl x:Name="HeaderBottomUnselected" Cursor="{TemplateBinding Cursor}" Foreground="#FF222222" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="Center"/>
                  </Grid>
                </Border>
              </Border>
              <Border x:Name="disabledVisualBottomUnSelected" Background="#8CFFFFFF" CornerRadius="0" IsHitTestVisible="false" Opacity="0"/>
            </Grid>
            
            <!-- Tab在Left位置 -->
            <Grid x:Name="TemplateLeftSelected" Visibility="Collapsed" Canvas.ZIndex="1" Margin="0,-2,0">
              <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0">
                <Border BorderBrush="#FFFFFFFF" BorderThickness="0" CornerRadius="0" Background="#FF44B3DE">
                  <Grid>
                    <Rectangle Fill="#FF44B3DE" Margin="0"/>
                    <ContentControl x:Name="HeaderLeftSelected" Cursor="{TemplateBinding Cursor}" Foreground="#FFFFFFFF" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="Center"/>
                  </Grid>
                </Border>
              </Border>
              <Border x:Name="FocusVisualLeft" BorderBrush="#FF44B3DE" BorderThickness="1,1" CornerRadius="0" IsHitTestVisible="false" Margin="0" Visibility="Collapsed"/>
              <Border x:Name="disabledVisualLeftSelected" Background="#8CFFFFFF" CornerRadius="0" IsHitTestVisible="false" Margin="0" Opacity="0"/>
            </Grid>
            <Grid x:Name="TemplateLeftUnselected" Visibility="Collapsed" Margin="0,0">
              <Border x:Name="BorderLeft" BorderBrush="#FFCDCDCD" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="0">
                <Border x:Name="GradientLeft" BorderBrush="#FFFFFFFF" BorderThickness="0" CornerRadius="0" Background="#FFFFFFFF">
                  <Grid>
                    <ContentControl x:Name="HeaderLeftUnselected" Cursor="{TemplateBinding Cursor}" Foreground="#FF222222" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="Center"/>
                  </Grid>
                </Border>
              </Border>
              <Border x:Name="disabledVisualLeftUnSelected" Background="#8CFFFFFF" CornerRadius="0" IsHitTestVisible="false" Opacity="0"/>
            </Grid>
            
            <!-- Tab在Right位置 -->
            <Grid x:Name="TemplateRightSelected" Visibility="Collapsed" Canvas.ZIndex="1" Margin="0,0">
              <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0">
                <Border BorderBrush="#FFFFFFFF" BorderThickness="0" CornerRadius="0" Background="#FF44B3DE">                  
                  <Grid>
                    <Rectangle Fill="#FF44B3DE" Margin="0"/>
                    <ContentControl x:Name="HeaderRightSelected" Cursor="{TemplateBinding Cursor}" Foreground="#FFFFFFFF" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="Center"/>
                  </Grid>
                </Border>
              </Border>
              <Border x:Name="FocusVisualRight" BorderBrush="#FF44B3DE" BorderThickness="0,1" CornerRadius="0" IsHitTestVisible="false" Margin="0" Visibility="Collapsed"/>
              <Border x:Name="disabledVisualRightSelected" Background="#8CFFFFFF" CornerRadius="0" IsHitTestVisible="false" Margin="0" Opacity="0"/>
            </Grid>
            <Grid x:Name="TemplateRightUnselected" Visibility="Collapsed" Margin="0,0">
              <Border x:Name="BorderRight" BorderBrush="#FFCDCDCD" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="0">
                <Border x:Name="GradientRight" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0" Background="#FFFFFF">
                  <Grid>
                    <ContentControl x:Name="HeaderRightUnselected" Cursor="{TemplateBinding Cursor}" Foreground="#FF222222" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="Center"/>
                  </Grid>
                </Border>
              </Border>
              <Border x:Name="disabledVisualRightUnSelected" Background="#8CFFFFFF" CornerRadius="0" IsHitTestVisible="false" Opacity="0"/>
            </Grid>
            <Border x:Name="FocusVisualElement" BorderBrush="#FF6DBDD1" BorderThickness="1" CornerRadius="0" IsHitTestVisible="false" Margin="-1" Visibility="Collapsed"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

-- 结束(为了日后项目中使用)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐