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

WPF 样式与模板

时间：2024-03-05 12:11:05浏览次数：16  
标签：控件 触发器 样式 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第五节形状工具+图层样式......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99