WPF Button Color Style

最新推荐文章于 2024-05-27 22:24:24 发布
原创 最新推荐文章于 2024-05-27 22:24:24 发布 · 921 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#wpf #button style

本文介绍了一种使用WPF进行按钮样式定制的方法，通过自定义样式实现独特的视觉效果。包括了扩展按钮、颜色按钮等样式的详细配置，适用于UI设计师和WPF开发者。

直接上效果图


<Window
	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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna" mc:Ignorable="d"
	x:Class="WpfAppButton.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	Width="376.5" Height="274" Background="#FFA1B4B6">

	<Window.Resources>
		<Style x:Key="ButtonFocusVisual">
			<Setter Property="Control.Template">
				<Setter.Value>
					<ControlTemplate>
						<Rectangle Margin="3" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<LinearGradientBrush x:Key="ButtonNormalBackgroundFill" EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FFFFFFFF" Offset="0"/>
			<GradientStop Color="#FFF0F0EA" Offset="0.9"/>
		</LinearGradientBrush>
		<Style x:Key="myExpandButtonStyle" TargetType="{x:Type ToggleButton}">
			<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
			<Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
			<Setter Property="HorizontalContentAlignment" Value="Center"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type ToggleButton}">
						<Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
							<Grid.RenderTransform>
								<TransformGroup>
									<ScaleTransform/>
									<SkewTransform/>
									<RotateTransform/>
									<TranslateTransform/>
								</TransformGroup>
							</Grid.RenderTransform>
							<Rectangle Fill="#FF40BE48" Stroke="{x:Null}" StrokeThickness="0" Opacity="0" Margin="4.684,3.979,6.378,5.834" RadiusY="0" Height="Auto" VerticalAlignment="Stretch"/>
							<Path x:Name="path" Data="M5.8980706,13.542352 L15.316946,5.1993148 24.897892,13.618299 20.877304,13.646207 15.248735,8.7229148 9.5104679,13.611588 z" Height="11.438" Margin="4.672,3.979,6.39,0" Stretch="Fill" VerticalAlignment="Top" StrokeThickness="0" Opacity="0.995" Stroke="#FF18ED7D" Fill="#FF0FA33A" HorizontalAlignment="Center" Width="23.212"/>
							<Path x:Name="path2" Data="M5.8980706,13.542352 L15.316946,5.1993148 24.897892,13.618299 20.877304,13.646207 15.248735,8.7229148 9.5104679,13.611588 z" Height="Auto" Margin="4.684,14.083,6.354,6.98" Stretch="Fill" VerticalAlignment="Stretch" StrokeThickness="0" Opacity="0.995" Stroke="#FF18ED7D" Fill="#FF0FA33A" HorizontalAlignment="Stretch" Width="Auto"/>
						</Grid>
						<ControlTemplate.Triggers>
							<Trigger Property="IsMouseOver" Value="True">
								<Setter Property="Fill" TargetName="path" Value="#FF0FDA25"/>
								<Setter Property="Fill" TargetName="path2" Value="#FF0FDA25"/>
							</Trigger>
							<Trigger Property="IsKeyboardFocused" Value="true"/>
							<Trigger Property="ToggleButton.IsChecked" Value="true">
								<Setter Property="RenderTransform" TargetName="grid">
									<Setter.Value>
										<TransformGroup>
											<ScaleTransform/>
											<SkewTransform/>
											<RotateTransform Angle="180"/>
											<TranslateTransform/>
										</TransformGroup>
									</Setter.Value>
								</Setter>
							</Trigger>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<SolidColorBrush x:Key="ButtonBorder" Color="#FF003C74"/>
		<Style x:Key="colorButtonStyle" TargetType="{x:Type Button}">
			<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
			<Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
			<Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
			<Setter Property="HorizontalContentAlignment" Value="Center"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Button}">
						<Grid Height="Auto" Margin="0,0,3.5,0">
							<Rectangle x:Name="rectangle" Fill="#FF0F0F7C" Stroke="{x:Null}" Opacity="1" RadiusX="5" RadiusY="5" StrokeThickness="0">
								<Rectangle.Effect>
									<DropShadowEffect ShadowDepth="1" BlurRadius="8"/>
								</Rectangle.Effect>
							</Rectangle>
							<TextBlock Margin="5,3" TextWrapping="Wrap" Text="{TemplateBinding Content}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="13.333" Height="Auto"/>
						</Grid>
						<ControlTemplate.Triggers>
							<Trigger Property="IsMouseOver" Value="True">
								<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
								<Setter Property="StrokeThickness" TargetName="rectangle" Value="0"/>
								<Setter Property="Fill" TargetName="rectangle" Value="#FF0F0FED"/>
								<Setter Property="Opacity" TargetName="rectangle" Value="1"/>
							</Trigger>
							<Trigger Property="IsPressed" Value="True">
								<Setter Property="Stroke" TargetName="rectangle" Value="#FF0A6E07"/>
								<Setter Property="Opacity" TargetName="rectangle" Value="1"/>
								<Setter Property="Effect" TargetName="rectangle">
									<Setter.Value>
										<DropShadowEffect BlurRadius="8" ShadowDepth="3"/>
									</Setter.Value>
								</Setter>
								<Setter Property="StrokeThickness" TargetName="rectangle" Value="2"/>
							</Trigger>
							<Trigger Property="IsKeyboardFocused" Value="true"/>
							<Trigger Property="ToggleButton.IsChecked" Value="true"/>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Window.Resources>

	<Grid x:Name="LayoutRoot">
		<ToggleButton  Name="toggle"  Focusable="False" Content="expand" HorizontalAlignment="Right" Height="32.501" Margin="0,31.333,22.917,0" VerticalAlignment="Top" Width="34.25" Style="{DynamicResource myExpandButtonStyle}" BorderBrush="{x:Null}" RenderTransformOrigin="6.56,-5.735" d:LayoutOverrides="VerticalAlignment">
			<ToggleButton.RenderTransform>
				<TransformGroup>
					<ScaleTransform ScaleX="0.6" ScaleY="0.6"/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform X="-83.021" Y="81.055"/>
				</TransformGroup>
			</ToggleButton.RenderTransform>
		</ToggleButton>
		<Button Content="Start &#xd;&#xa;2015.01.03" Focusable="False" HorizontalAlignment="Left" Margin="54,8,0,0" VerticalAlignment="Top" Style="{DynamicResource colorButtonStyle}"/>
		<Button Content="Quantity Info" Focusable="False" HorizontalAlignment="Left" Margin="54,79,0,0" VerticalAlignment="Top" Style="{DynamicResource colorButtonStyle}"/>
		<Button Content="Filter" Focusable="False" HorizontalAlignment="Left" Margin="54,0,0,96.27" VerticalAlignment="Bottom" Style="{DynamicResource colorButtonStyle}"/>
		<Button Content="Button\niiii" HorizontalAlignment="Left" Height="26" Margin="54,0,0,28.667" VerticalAlignment="Bottom" Width="80.667"/>
	</Grid>
</Window>


WPF中鼠标移动到Button颜色改变效果设置
weixin_45778846的博客
05-15 2171
这样就成功实现了预定义样式。首先，先预定义按钮样式。
WPF之ColorButton
WuzhiBin0926的博客
05-21 252
<Style x:Key="ColorButton" TargetType="Button"> <Setter Property="Background" Value="#FF399C34"/> <Setter Property="BorderBrush" Value="Silver"/> ...
【C#】在WPF项目中，如何自定义Button按钮控件的背景色
a6669666的博客
06-05 4743
大多时候，VS默认的控件并不能满足我们的需求，所以，需要自定义控件的某些属性。本章主要讲述的内容，便是在WPF项目中，如何自定义Button按钮控件的背景色色。
WPF 修改按钮按下的颜色
u014453443的博客
01-07 1万+
首先在后台创建一个附加属性 public class ButtonBrush { public static readonly DependencyProperty ButtonPressBackgroundProperty = DependencyProperty.RegisterAttached( "ButtonPressBackground",...
WPF style 换肤
weixin_34240657的博客
08-09 206
原文地址：http://www.cnblogs.com/DebugLZQ/p/3181040.html 原作者：DebugLZQ UI的风格一致性是应用程序应当关注的重要特性。 1.Creating and using styles 用一个Demo，来总结Style。 MainWindow.xaml如下： <Window x:Class="Creati...
WPFButton样式
10-09
本资源“WPFButton样式”提供了6种不同的按钮样式，帮助开发者实现界面的美化。 1. **基础样式**： WPF 的基础按钮样式是最简单、最直接的，通常包含默认的背景色、边框和文本。在XAML中，可以通过`<Button>`标签...
精选资源
WPFButton组件使用
01-17
在Windows Presentation Foundation (WPF) 中，`Button`组件是用户界面设计中不可或缺的一部分，它允许用户通过单击执行特定的操作或触发事件。本篇文章将深入探讨WPF `Button`组件的使用，包括其基本属性、事件、...
精选资源
WPF异步定时发送验证码 同时修改button的style样式
01-27
<Button Style="{StaticResource CustomSendCodeButtonStyle}" Content="发送验证码" Click="SendVerificationCodeButton_Click" x:Name="SendVerificationCodeButton" /> ``` 这段XAML定义了一个样式，包括正常、...
wpf的button样式
02-09
### WPF Button样式的深入解析 在WPF (Windows Presentation Foundation) 开发中，自定义控件样式是一项非常重要的技能，尤其是对于按钮(Button)这样的常用控件。通过自定义样式，开发者可以为用户提供更加丰富多样...
WPF combobox button 漂亮样式
12-30
在WPF中，我们可以使用Style和ControlTemplate来定制控件的外观和行为。Style用于设置控件的一系列属性，而ControlTemplate则定义了控件的视觉结构和交互逻辑。 对于ComboBox，我们主要关注它的两部分：TextBox和...
WPF圆角按钮与触发颜色变化
weixin_34409703的博客
08-30 762
原文:WPF圆角按钮与触发颜色变化 <Button x:Name="button1" Content="按钮1" Margin="10,10,0,0" Cursor="Pen"> <Button.Template> <ControlTemplate> ...
设置button的边框颜色和宽度
z997756128的专栏
11-22 9980
UIButton*button=[UIButton buttonWithType:UIButtonTypeCustom];     button.frame=CGRectMake(100, 100, 100, 100);     button.layer.cornerRadius=30;     button.backgroundColor=[UIColor grayCol
WPF 设置颜色及字符串，Color，Brush之间的转换 以及渐变色的操作LinearGradientBrush（转）
weixin_40029679的博客
09-13 3340
原文链接：https://blog.youkuaiyun.com/lvxingzhe3/article/details/122143475。版权声明：本文为优快云博主「一介学徒」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.youkuaiyun.com/rwo_bear/article/details/132363967。版权声明：本文为优快云博主「无熵~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
WPF教程（十一）模板入门一
鱼骨头科技
09-21 1307
在前面一篇我们粗略说了Style，如果要自定义一个个性十足的控件，仅仅依靠样式和行为是不行的，他们只能通过控件的既有属性来简单改变外观，还需要有ControlTemplate来彻底定制，这是改变Control的呈现，也可以通过DataTemplate来改变Data的呈现，对于ItemsControl，还可以通过ItemsPanelTemplate来改变Items容器的呈现。 从上段文字可以总结出...
WPF修改控件颜色
weixin_43152819的博客
03-04 1553
WPF 设置 控件颜色
C# WPF入门学习主线篇（四）—— Button的常用属性
weixin_56595425的博客
05-27 2305
本期博客详细介绍了WPF中Button组件的各种属性，包括基础属性（如名称和类型）、画笔属性（如背景色、边框色、前景色和不透明度遮罩）、布局属性（如宽度、高度、最小宽度、高度、水平和垂直对齐及外边距）、外观属性（如透明度和可视状态），以及文字属性（如按钮上的文本内容），帮助读者全面掌握Button组件的定制和使用。
WPF控件（Control类：颜色与字体）
热门推荐
萌萌的It人 www.itmmd.com
06-14 1万+
WPF控件分类： 内容控件 标题内容控件 文本控件 列表控件 基于范围的控件 日期控件 控件类 控件是与用户交互的元素。控件可以获得焦点，能接受键盘或鼠标的输入。 所有控件的基类是System.Windows.Control类，这类包括一些基本功能： 对齐 tab序列 背景、前景、边界 文本内容的字体 背景和前景刷
WPF 自定义样式
YouyoMei的博客
02-06 2696
WPF 自定义样式 引言 对于WPF开发者而言，默认的控件样式是不是觉得非常的”Low“或者说不好看。其实我也是一样，看多了就觉得样式一般般，不好看。因此如何解决这个问题呢？当然是自己来定义控件的样式。 本节使用Visual Studio自带的功能——“编辑模板”来实现只需修改颜色（边框、背景、前景等）的控件美化功能。 应用 鱼 废话不多说，首先贴上自己定义并使用过的几个控件的样式，如下： But...
WPF ListBox 修改鼠标悬停颜色和选中状态颜色
^@^lemon tea^@^
09-18 3473
WPF ListBox 修改鼠标悬停颜色和选中状态颜色
wpf button按钮颜色设置
最新发布
03-14
### 设置 WPF Button 颜色的方法 在 Windows Presentation Foundation (WPF) 中，可以通过多种方法来设置 `Button` 的颜色。以下是几种常见的方式： #### 使用 XAML 定义静态资源风格 通过定义一个包含所需颜色样式的静态资源，并将其应用到按钮上可以实现这一目的。 ```xml <Window.Resources> <Style TargetType="Button" x:Key="ColorfulButton"> <Setter Property="Background" Value="Blue"/> <Setter Property="Foreground" Value="#FF6E6E6E"/> </Style> </Window.Resources> <Button Style="{StaticResource ColorfulButton}" Content="点击我"></Button> ``` 这种方式允许开发者创建可重用的颜色主题并应用于多个控件[^3]。 #### 动态更改背景和前景色 除了预先设定好样式外，在运行期间也可以动态改变这些属性。这通常是在后台 C# 代码里完成的: ```csharp TempButton.Background = new SolidColorBrush(Colors.Black); // 背景色 TempButton.Foreground = new SolidColorBrush(Color.FromArgb(0xff, 0x6e, 0x6e, 0x6e)); // 字体颜色 ``` 这段代码展示了如何直接操作 `Background` 和 `Foreground` 属性以即时更新界面元素的颜色[^2]. #### 利用触发器调整状态下的显示效果 为了更精细地控制不同状态下（比如鼠标悬停、按下等）的颜色变化，还可以利用事件触发器或者数据绑定机制来进行处理。例如下面的例子演示了当鼠标指针位于按钮上方时会自动切换其背景色的效果： ```xml <Button Content="Hover Over Me!"> <Button.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Background)"> <DiscreteObjectKeyFrame KeyTime="0" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> <!-- 更多触发条件... --> </Button.Triggers> </Button> ``` 这种方法不仅限于简单的颜色变换；它同样适用于其他类型的视觉反馈设计[^5].
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值