WPF自定义TabControl的样式 原创
程序员文章站
2022-06-09 19:11:21
这是我第二天写WPF,各种想要的样式还在不停的探索中 对于WPF样式的链接对于我这样的萌新还是有必要记录下 首先需要生成一个样式文件(名字自己起)...
这是我第二天写WPF,各种想要的样式还在不停的探索中
对于WPF样式的链接对于我这样的萌新还是有必要记录下
首先需要生成一个样式文件(名字自己起),PS:可以创建一个文件夹,将样式文件全放进去
创建好文件后,将你的样式写进文件
请注意,一定要写对你的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>
下面效果图
上一篇: Triangles(贪心、模拟)
推荐阅读
-
Android开发自定义TextView省略号样式的方法
-
CSS3自定义滚动条样式的示例代码
-
destoon调用自定义模板及样式的公告栏
-
TP5框架实现自定义分页样式的方法示例
-
WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展
-
Android 中自定义Dialog样式的Activity点击空白处隐藏软键盘功能(dialog不消失)
-
详解使用DotNet CLI创建自定义的WPF项目模板
-
CSS3自定义滚动条样式的示例代码
-
[WPF自定义控件库] 模仿UWP的ProgressRing
-
使用CSS3实现input多选框自定义样式的方法示例