本例要实现的目标如下:
1.右上角的按钮是X的形式(使用path用两根直线绘制)
2.鼠标移动上去以及鼠标点击背景色都变化。(使用不同透明度的白色来区分表示)
一、关于颜色的表示
在C# WPF和WinForms中,Background 属性用于设置控件的背景颜色,可以使用16进制(HEX)格式来表示颜色。下面详细介绍16进制颜色表示的含义和使用方法。
16进制颜色基本格式
在C#中,16进制颜色通常有以下几种表示形式:
6位16进制:#RRGGBB
8位16进制:#AARRGGBB (包含透明度)
3位16进制:#RGB (简写形式)
各部分含义
1. 6位16进制 (#RRGGBB)
RR:红色分量 (00-FF)
GG:绿色分量 (00-FF)
BB:蓝色分量 (00-FF)
2. 8位16进制 (#AARRGGBB)
AA:Alpha通道(透明度) (00-FF, 00完全透明,FF完全不透明)
RR:红色分量
GG:绿色分量
BB:蓝色分量
. 3位16进制 (#RGB)
这是6位表示法的简写形式,每个数字会被复制一次:
#RGB 等同于 #RRGGBB
二、关于path
下图右上角的按钮是两根线段组成的×。使用自定义的模板,其中使用path绘制。
<Border Background="Transparent" Name="back"><Path Data="M0 0 12 12M0 12 12 0" Stroke="white" StrokeThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
三、具体代码
<Window.Resources><ControlTemplate TargetType="Button" x:Key="CloseButtonTemplate"><Border Background="Transparent" Name="back"><Path Data="M0 0 12 12M0 12 12 0" Stroke="white" StrokeThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="back" Property="Background" Value="#22FFFFFF"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="back" Property="Background" Value="#44FFFFFF"/></Trigger></ControlTemplate.Triggers></ControlTemplate>
</Window.Resources>
<Border Margin="5" Background="White" CornerRadius="10" ><Border.Effect><DropShadowEffect Color="Gray" ShadowDepth="0" BlurRadius="5" Opacity="0.3" Direction="0"></DropShadowEffect></Border.Effect><Grid><Grid.RowDefinitions><RowDefinition Height="1.8*"/><RowDefinition Height="3*"/><RowDefinition Height="60"/></Grid.RowDefinitions><Border Background="#007DFA" CornerRadius="10,10,0,0"/><Button HorizontalAlignment="Right" VerticalAlignment="Top" Width="50" Height="40"Template="{StaticResource CloseButtonTemplate}"/></Grid>
</Border>