欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

WPF自定义TabControl的样式 原创

程序员文章站 2021-12-03 09:00:34
这是我第二天写WPF,各种想要的样式还在不停的探索中 对于WPF样式的链接对于我这样的萌新还是有必要记录下 首先需要生成一个样式文件(名字自己起)࿰...

这是我第二天写WPF,各种想要的样式还在不停的探索中

对于WPF样式的链接对于我这样的萌新还是有必要记录下

首先需要生成一个样式文件(名字自己起),PS:可以创建一个文件夹,将样式文件全放进去

WPF自定义TabControl的样式
                    原创

创建好文件后,将你的样式写进文件

请注意,一定要写对你的NameSpace,例如:xmlns:local="clr-namespace:WpfApp"中 namespace就是WpfApp

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:System="clr-namespace:System;assembly=mscorlib">
  <Style x:Key="myBtnStyle" TargetType="Button">
    <Setter Property="Height" Value="72" />
    <Setter Property="Width" Value="150" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Background" Value="Blue" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Top" />
  </Style>
</ResourceDictionary>

然后还需要在界面的文件中将其引用;即在Windows标签下的Window.Resources中将其引用,且引用必须在所有控件的前,若在控件后引用 ,由于执行循序会找不到Style

<Window 
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="WPF-Layout" Height="350" Width="525"
	x:Class="WpfApp.MainWindow">
    <!-- 控件在样式引用前时不对的 ,执行循序会导致找不到样式-->
    <!-- <Grid/> -->
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Styles/MainWindowStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <!-- 控件在引用后面,正确 -->
	<Grid/>
</Window>

然后我们就可以在控件中使用样式了,用Style = "{StaticResource FileName}"来引用,如下

<TabItem Header="TabIt666" Style="{StaticResource TabItem_Style}">
	<Grid Background="#FF009ce1"/>
</TabItem>

使用我们没问题了,下来就是修改TabControl的样式,这里我们不直接修改TabControl,而是改它的TabItem

假如我们只是修改文字和TabItem的大小 我们可以用Canvas

<Canvas Name="canvas" Background="#FF807FFE" Width="65" Height="30">
	<TextBlock HorizontalAlignment="Center"
		   VerticalAlignment="Center"
		   Canvas.Top="8"
		   Text="{TemplateBinding HeaderedContentControl.Header}"
		   Canvas.Left="5">
	</TextBlock>
</Canvas>

假如我们要修改边框,那可以用border

<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="0,7,0,0">
	<Border.Background>#FFDDDDDD</Border.Background>
	<ContentPresenter Content="{TemplateBinding Header}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
</Border>

上面两个样式可以直接复制替换,当然也可以扩展,其他的小伙伴们自己探索,下面时我完整的样式代码

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApp">
    <Style x:Key="TabItem_Style">
        <Style.Triggers>

            <Trigger Property="TabItem.IsSelected" Value="True">
                <Setter Property="TabItem.Template" >
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="0,7,0,0">
                                <Border.Background>#FF87CEFA</Border.Background>
                                <ContentPresenter Content="{TemplateBinding Header}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="TabItem.FontWeight" Value="Bold"/>
                <Setter Property="TabItem.Foreground" Value="Blue"/>
            </Trigger>

            <Trigger Property="TabItem.IsMouseOver" Value="True">
                <Setter Property="TabItem.Template" >
                    <Setter.Value>
                        <ControlTemplate>
                            <Canvas Name="canvas" Background="#FF6160E2" Width="65" Height="30">
                                <TextBlock HorizontalAlignment="Center"
                                               VerticalAlignment="Center"
                                               Text="{TemplateBinding HeaderedContentControl.Header}">
                                </TextBlock>
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>

        </Style.Triggers>
    </Style>
</ResourceDictionary>

下面效果图

WPF自定义TabControl的样式
                    原创