首页 > 其他分享 >WPF 样式与模板

WPF 样式与模板

时间:2024-03-05 12:11:05浏览次数:23  
标签:控件 触发器 样式 System Windows using WPF 模板

参考

环境

软件/系统 版本 说明
Windows Windows 10 专业版 22H2 19045.4046
Microsoft Visual Studio Microsoft Visual Studio Community 2022 (64 位) - 17.6.5
Microsoft .Net SDK 8.0.101 手动安装
Microsoft .Net SDK 7.0.306 Microsoft Visual Studio 携带
.net 6.x 创建当前文章演示 WPF 项目时指定 .net 版本所选择的框架

正文

样式

  • 分类
    • 隐式应用样式
    • 显式应用样式
    • 扩展样式
    • 事件触发器
    • 属性触发器
    • 多属性触发器
    • 绑定触发器
    • 多绑定触发器
  • 演示
    image
  • XAML
    <Window
    	x:Class="学习.MainWindow"
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:local="clr-namespace:学习"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	xmlns:sys="clr-namespace:System;assembly=mscorlib"
    	Title="MainWindow"
    	Width="850"
    	Height="700"
    	mc:Ignorable="d">
    	<Window.Resources>
    		<!--  隐式应用样式,全局样式,应用到所有 TextBlock 上面  -->
    		<Style TargetType="TextBlock">
    			<Setter Property="FontSize" Value="15" />
    			<Setter Property="FontWeight" Value="ExtraBold" />
    		</Style>
    		<!--  显式应用样式,应用到  Style="{StaticResource 粗体} 上面  -->
    		<Style x:Key="粗体" TargetType="Button">
    			<Setter Property="FontSize" Value="15" />
    			<Setter Property="FontWeight" Value="ExtraBold" />
    		</Style>
    		<!--  扩展样式  -->
    		<Style
    			x:Key="扩展"
    			BasedOn="{StaticResource {x:Type Button}}"
    			TargetType="Button">
    			<Setter Property="FontSize" Value="30" />
    		</Style>
    		<!--  事件触发器,鼠标经过字体变大并半透明,离开变小。不需要为 MouseLeave 动画指定 To 值。 这是因为动画能够跟踪原始值。  -->
    		<Style x:Key="事件触发器" TargetType="Button">
    			<Setter Property="FontSize" Value="20" />
    			<Style.Triggers>
    				<EventTrigger RoutedEvent="Mouse.MouseEnter">
    					<EventTrigger.Actions>
    						<BeginStoryboard>
    							<Storyboard>
    								<DoubleAnimation
    									Storyboard.TargetProperty="FontSize"
    									To="90"
    									Duration="0:0:0.2" />
    							</Storyboard>
    						</BeginStoryboard>
    						<BeginStoryboard>
    							<Storyboard>
    								<DoubleAnimation
    									Storyboard.TargetProperty="Opacity"
    									To="0.5"
    									Duration="0:0:0.2" />
    							</Storyboard>
    						</BeginStoryboard>
    					</EventTrigger.Actions>
    				</EventTrigger>
    				<EventTrigger RoutedEvent="Mouse.MouseLeave">
    					<EventTrigger.Actions>
    						<BeginStoryboard>
    							<Storyboard>
    								<DoubleAnimation Storyboard.TargetProperty="FontSize" Duration="0:0:0.2" />
    							</Storyboard>
    						</BeginStoryboard>
    						<BeginStoryboard>
    							<Storyboard>
    								<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.2" />
    							</Storyboard>
    						</BeginStoryboard>
    					</EventTrigger.Actions>
    				</EventTrigger>
    			</Style.Triggers>
    		</Style>
    		<!--  属性触发器,选中的不透明并变大,未选中半透明并变小  -->
    		<Style x:Key="属性触发器" TargetType="CheckBox">
    			<Setter Property="Opacity" Value="0.5" />
    			<Style.Triggers>
    				<Trigger Property="IsChecked" Value="True">
    					<Trigger.Setters>
    						<Setter Property="Opacity" Value="1" />
    						<Setter Property="FontSize" Value="20" />
    					</Trigger.Setters>
    				</Trigger>
    			</Style.Triggers>
    		</Style>
    		<!--  多属性触发器,选中并且宽度为自动时,字体变大,变为不透明  -->
    		<Style x:Key="多属性触发器" TargetType="CheckBox">
    			<Setter Property="Opacity" Value="0.5" />
    			<Style.Triggers>
    				<MultiTrigger>
    					<MultiTrigger.Conditions>
    						<Condition Property="IsChecked" Value="True" />
    						<Condition Property="Width" Value="Auto" />
    					</MultiTrigger.Conditions>
    					<Setter Property="Opacity" Value="1" />
    					<Setter Property="FontSize" Value="30" />
    				</MultiTrigger>
    			</Style.Triggers>
    		</Style>
    		<!--  绑定触发器,当输入框 Texr = 50 的时候, TextBlock 背景变为红色  -->
    		<Style x:Key="绑定触发器" TargetType="TextBlock">
    			<Style.Triggers>
    				<DataTrigger Binding="{Binding Text, ElementName=绑定输入框}" Value="50">
    					<Setter Property="Background" Value="Red" />
    				</DataTrigger>
    			</Style.Triggers>
    		</Style>
    		<!--  多绑定触发器 ,当第一个输入框为66,第二个为77的时候,TextBlock背景变为红色  -->
    		<Style x:Key="多绑定触发器" TargetType="TextBlock">
    			<Style.Triggers>
    				<MultiDataTrigger>
    					<MultiDataTrigger.Conditions>
    						<Condition Binding="{Binding Text, ElementName=绑定输入框1}" Value="66" />
    						<Condition Binding="{Binding Text, ElementName=绑定输入框2}" Value="77" />
    					</MultiDataTrigger.Conditions>
    					<Setter Property="Background" Value="Red" />
    				</MultiDataTrigger>
    			</Style.Triggers>
    		</Style>
    	</Window.Resources>
    	<Grid>
    		<StackPanel>
    			<Border
    				Margin="6"
    				Padding="6"
    				BorderBrush="Black"
    				BorderThickness="1">
    				<StackPanel>
    					<TextBlock>默认按钮</TextBlock>
    					<Button Content="Custom Button" />
    				</StackPanel>
    			</Border>
    			<Border
    				Margin="6"
    				Padding="6"
    				BorderBrush="Black"
    				BorderThickness="1">
    				<StackPanel>
    					<TextBlock>粗体按钮</TextBlock>
    					<Button Content="Custom Button" Style="{StaticResource 粗体}" />
    				</StackPanel>
    			</Border>
    			<Border
    				Margin="6"
    				Padding="6"
    				BorderBrush="Black"
    				BorderThickness="1">
    				<StackPanel>
    					<TextBlock>扩展样式按钮</TextBlock>
    					<Button Content="Custom Button" Style="{StaticResource 扩展}" />
    				</StackPanel>
    			</Border>
    			<Border
    				Margin="6"
    				Padding="6"
    				BorderBrush="Black"
    				BorderThickness="1">
    				<StackPanel>
    					<TextBlock>事件触发器,鼠标经过字体变大并半透明,离开变小。</TextBlock>
    					<Button Content="Custom Button" Style="{StaticResource 事件触发器}" />
    				</StackPanel>
    			</Border>
    			<Border
    				Margin="6"
    				Padding="6"
    				BorderBrush="Black"
    				BorderThickness="1">
    				<StackPanel>
    					<TextBlock>属性触发器,选中的不透明并变大,未选中半透明并变小</TextBlock>
    					<CheckBox Content="男" Style="{StaticResource 属性触发器}" />
    					<CheckBox Content="女" Style="{StaticResource 属性触发器}" />
    				</StackPanel>
    			</Border>
    			<Border
    				Margin="6"
    				Padding="6"
    				BorderBrush="Black"
    				BorderThickness="1">
    				<StackPanel>
    					<TextBlock>多属性触发器,选中并且宽度为自动时,字体变大,变为不透明</TextBlock>
    					<CheckBox
    						Width="Auto"
    						Content="男"
    						Style="{StaticResource 多属性触发器}" />
    					<CheckBox
    						Width="50"
    						Content="女"
    						Style="{StaticResource 多属性触发器}" />
    				</StackPanel>
    			</Border>
    			<Border
    				Margin="6"
    				Padding="6"
    				BorderBrush="Black"
    				BorderThickness="1">
    				<StackPanel>
    					<TextBlock Style="{StaticResource 绑定触发器}">绑定触发器,当输入框 Texr = 50 的时候, TextBlock 背景变为红色</TextBlock>
    					<TextBox x:Name="绑定输入框" />
    				</StackPanel>
    			</Border>
    			<Border
    				Margin="6"
    				Padding="6"
    				BorderBrush="Black"
    				BorderThickness="1">
    				<StackPanel>
    					<TextBlock Style="{StaticResource 多绑定触发器}">多绑定触发器, 当第一个输入框为66,第二个为77的时候,TextBlock背景变为红色</TextBlock>
    					<TextBox x:Name="绑定输入框1" />
    					<TextBox x:Name="绑定输入框2" />
    				</StackPanel>
    			</Border>
    		</StackPanel>
    
    	</Grid>
    </Window>
    
    

模板

如果在 ContentControl 的 ControlTemplate 中声明了 ContentPresenter,ContentPresenter 将自动绑定到 ContentTemplate 和 Content 属性。 同样,ItemsControl 的 ControlTemplate 中的 ItemsPresenter 将自动绑定到 ItemTemplate 和 Items 属性。

  • 分类

    • ControlTemplate 控件模板
    • DataTemplate 数据模板
    • HierarchicalDataTemplate 表示具有层次结构数据的一种特殊类型的数据模板
    • DataTemplateSelector 动态选择数据模板
  • 演示
    image

  • XAML

    <Window
    	x:Class="学习.MainWindow"
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:local="clr-namespace:学习"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	xmlns:sys="clr-namespace:System;assembly=mscorlib"
    	Title="MainWindow"
    	Width="850"
    	Height="700"
    	mc:Ignorable="d">
    	<Window.Resources>
    		<Style x:Key="样式设置模板" TargetType="Button">
    			<!--  Set to true to not get any properties from the themes.  -->
    			<Setter Property="OverridesDefaultStyle" Value="True" />
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="Button">
    						<Grid>
    							<Ellipse Fill="{TemplateBinding Background}" />
    							<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    		<ControlTemplate x:Key="控件模板" TargetType="Button">
    			<Grid>
    				<Ellipse Fill="{TemplateBinding Background}" />
    				<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    			</Grid>
    		</ControlTemplate>
    		<DataTemplate x:Key="数据模板" DataType="{x:Type local:Photo}">
    			<Image
    				Width="50"
    				Height="50"
    				Source="{Binding Source}" />
    		</DataTemplate>
    	</Window.Resources>
    	<Grid>
    		<StackPanel>
    			<Border
    				Margin="6"
    				Padding="6"
    				BorderBrush="Black"
    				BorderThickness="1">
    				<StackPanel>
    					<TextBlock>通过Style设置控件模板</TextBlock>
    					<Button
    						Width="60"
    						Height="60"
    						Background="Red"
    						Content="按钮"
    						Style="{StaticResource 样式设置模板}" />
    				</StackPanel>
    			</Border>
    			<Border
    				Margin="6"
    				Padding="6"
    				BorderBrush="Black"
    				BorderThickness="1">
    				<StackPanel>
    					<TextBlock>控件模板</TextBlock>
    					<Button
    						Width="60"
    						Height="60"
    						Background="Yellow"
    						Content="按钮"
    						Template="{StaticResource 控件模板}" />
    				</StackPanel>
    			</Border>
    			<Border
    				Margin="6"
    				Padding="6"
    				BorderBrush="Black"
    				BorderThickness="1">
    				<StackPanel>
    					<TextBlock>数据模板</TextBlock>
    					<ListBox
    						Width="600"
    						Margin="10"
    						Background="Silver"
    						ItemTemplate="{StaticResource 数据模板}"
    						ItemsSource="{Binding list}"
    						SelectedIndex="0" />
    				</StackPanel>
    			</Border>
    		</StackPanel>
    
    	</Grid>
    </Window>
    
  • C#

    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    
    namespace 学习
    {
    	/// <summary>
    	/// Interaction logic for MainWindow.xaml
    	/// </summary>
    	public partial class MainWindow : Window
    	{
    
    		public MainWindow()
    		{
    			InitializeComponent();
    			this.DataContext = new
    			{
    				list = new List<Photo>{
    					new Photo("/images/apple.jpg"),
    					new Photo("/images/apple.jpg"),
    					new Photo("/images/apple.jpg"),
    					new Photo("/images/apple.jpg"),
    				}
    			};
    		}
    	}
    	public class Photo
    	{
    		public Photo(string path)
    		{
    			Source = path;
    		}
    
    		public string Source { get; }
    
    		public override string ToString() => Source;
    	}
    }
    

视觉状态

控件始终处于特定的状态。 例如,当鼠标在控件的表面上移动时,该控件被视为处于公用状态 MouseOver。 没有特定状态的控件被视为处于公用 Normal 状态。 状态分为多个组,前面提到的状态属于 CommonStates 状态组。 大多数控件都有两个状态组:CommonStates 和 FocusStates。 在应用于控件的每个状态组中,控件始终处于每个组的一种状态,例如 CommonStates.MouseOver 和 FocusStates.Unfocused。 但是,控件不能处于同一组中的两种不同状态,例如 CommonStates.Normal 和 CommonStates.Disabled。

  • 演示
    image

  • XAML

    <Window
    	x:Class="学习.MainWindow"
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:local="clr-namespace:学习"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	xmlns:sys="clr-namespace:System;assembly=mscorlib"
    	Title="MainWindow"
    	Width="850"
    	Height="700"
    	mc:Ignorable="d">
    	<Window.Resources>
    		<ControlTemplate x:Key="B1" TargetType="Button">
    			<Grid>
    				<Grid.Background>
    					<SolidColorBrush x:Name="ButtonBrush" Color="Green" />
    				</Grid.Background>
    				<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    				<VisualStateManager.VisualStateGroups>
    					<VisualStateGroup x:Name="CommonStates">
    						<VisualStateGroup.Transitions>
    							<!--  Take one half second to trasition to the MouseOver state.  -->
    							<VisualTransition GeneratedDuration="0:0:0.5" To="MouseOver" />
    						</VisualStateGroup.Transitions>
    						<VisualState x:Name="Normal" />
    						<!--
    							Change the SolidColorBrush, ButtonBrush, to red when the
    							mouse is over the button.
    						-->
    						<VisualState x:Name="MouseOver">
    							<Storyboard>
    								<ColorAnimation
    									Storyboard.TargetName="ButtonBrush"
    									Storyboard.TargetProperty="Color"
    									To="Red" />
    							</Storyboard>
    						</VisualState>
    					</VisualStateGroup>
    				</VisualStateManager.VisualStateGroups>
    			</Grid>
    		</ControlTemplate>
    	</Window.Resources>
    	<Grid>
    		<StackPanel>
    			<Border
    				Margin="6"
    				Padding="6"
    				BorderBrush="Black"
    				BorderThickness="1">
    				<StackPanel>
    					<Button
    						Width="220"
    						Height="50"
    						Content="默认绿色,鼠标放上去变红"
    						Template="{StaticResource B1}" />
    				</StackPanel>
    			</Border>
    		</StackPanel>
    
    	</Grid>
    </Window>
    
    

标签:控件,触发器,样式,System,Windows,using,WPF,模板
From: https://www.cnblogs.com/xiaqiuchu/p/18053425

相关文章

  • WPF 应用迁移到 Electron 框架过程记录
    前一段时间我用WPF开发了一个查看emoji表情的小工具https://github.com/he55/EmojiViewer,由于最近我使用macOS系统比较多,我想能在macOS系统上也能使用这个工具。于是我尝试将WPF应用迁移到Electron框架,感觉这个框架很强大,在这里记录一下应用迁移的过程。安装Elec......
  • P3369 【模板】普通平衡树
    原题链接题解1stl模拟,注意lowerbound的效果和pos的返回值code1#include<bits/stdc++.h>usingnamespacestd;vector<int>a;intmain(){intn;cin>>n;while(n--){intop,x;cin>>op>>x;if(op==1)a.inser......
  • 浅谈WPF之Binding时数据校验和类型转换
    在WPF开发中,Binding实现了数据在Source和Target之间的传递和流通,就像现实生活中的一条条道路,建立起了城镇与城镇之间的衔接,而数据校验和类型转换,就像高速公路之间的收费站和安检站。那在WPF开发中,如何实现数据的校验和类型转换呢?本文以一个简单的小例子,简述在WPF开发中,实现数据校......
  • 触控:WPF捕捉触控事件
    1注册触控事件2注册键盘事件3注册鼠标点击事件4注册鼠标滚轮事件usingSystem;usingSystem.Diagnostics;usingSystem.Threading.Tasks;usingSystem.Windows;usingSystem.Windows.Input;namespaceWindows{///<summary>///触控源///</summar......
  • 解决WPF下popup不随着window一起移动的问题
    解决WPF下popup不随着window一起移动的问题_小戴BOTAOY演示博客(yii666.com)///<summary>///Popup帮助类,解决Popup设置StayOpen="True"时,移动窗体或者改变窗体大小时,Popup不随窗体移动的问题///</summary>publicclassPopopHelper{publicstaticDependency......
  • 有一个子组件DataList,然后在父组件中引入,并在父组件引入中的DataList标签上设置style
    有一个子组件DataList,然后在父组件中引入,并在父组件引入中的DataList标签上设置style样式,能生效吗?在React中,父组件可以通过props将样式传递给子组件,并在子组件内部应用这些样式。但直接在父组件引用子组件的地方设置style属性通常不会生效,因为React的JSX语法并不支持这种写法。......
  • 给大家推荐一款基于Vue3通用型后台管理模板
    ​ 给大家推荐一款基于Vue3通用型后台管理模板这款Vue3后台管理模板介绍如下:        使用Vue3、Vite、ElementPlus、Pinia最新开发技术栈,拥有完整的Token登录鉴权、路由配置、界面简洁美观,可根据需要灵活配置主题、系统采用响应式布局,自适应各类屏幕尺寸、源代码有......
  • 代码模板
    贴这里,防丢。会更新算法模板,坑会慢慢填。写题模板/*Author:Rainypaster(lhy)Time:File:Email:[email protected]*/#include<cstring>#include<iostream>#include<algorithm>#include<cmath>#include<bits/stdc++.h>usingna......
  • 算法模板 v1.9.1.20240303
    算法模板v1.1.1.20240115:之前历史版本已不可寻,创建第一份算法模板。v1.2.1.20240116:删除“编译”-“手动开栈”;删除“编译”-“手动开O优化”;修改“编译”-“CF模板”;删除“读写”;删除“图论”-“欧拉图”-“混合图”;删除“图论”-“可达性统计”;删除“数据类型”-“高精类”。......
  • PS 第五节 形状工具 + 图层样式
    PS第五节形状工具+图层样式......