多选按钮和单选按钮 wpf
本教程旨在启发XAML的功能,以为Windows(WPF),Web(Silverlight)和浏览器(XBAP)构建丰富的应用程序。 我将向您介绍有关使用纯XAML构建有吸引力的渐变发光按钮的信息。 使用XAML,我们不必为外观精美的控件构建用户或自定义控件。 相反,我们使用样式,与应用于Web控件CSS相同。
为此,我们将创建一个资源字典。 资源字典是一个包含控件样式的文件(例如.css文件)。 为了可重用,我们定义了资源字典。 虽然,您不必创建应用样式的资源字典。 您可以在各自的xaml源代码中以App.xaml或Window或Page级别样式编写应用程序级别样式。
您可以通过从“项目”菜单添加新的Reosurce词典来添加ResourceDictionary文件。
默认情况下,您的资源字典文件将包含以下标记。
现在,在介绍样式之前,我们将把此资源文件引入App.xaml<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
如您在上述标记中的<Application.Resources>下所看到的,我们需要合并将在应用程序中使用的资源文件。 我将所有资源文件都保存在Resources文件夹下,您可以指定自己的文件。<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Resources/Generic.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>
完成此操作后,让我们回到定义样式。 这是我们要为按钮定义样式的地方。 现在,为按钮定义衰落的发光样式需要大量的XAML标记。
因此,我将逐步解释每个阶段。
阶段1:追求风格阶段2:为“空”按钮提供背景首先,我们将定义一个这样的样式,在其中指定样式GlowButtonStyle的可访问名称以及我们要定位的控件的类型,即Button。<Style x:Key="GlowButtonStyle" TargetType="{x:Type Button}">
然后,我指定按钮的文本颜色。
要更改按钮的整体外观并创建自己的外观,我们需要覆盖默认的temaplte并定义一个新模板。 这就是大多数代码的全部含义。<Setter Property="Button.Foreground" Value="Black"/>
我们将在控件的template属性下设置新模板在上面的标记中,我们为控件设置了一个新模板,所有代码都在<ControlTemplate>标记下。<Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}" x:Name="ButtonUpControlTemplate">
现在,没有任何内容作为模板,该按钮将仅在窗口中不可见。
为此,我们在按钮周围创建一个浅边框以使其出现。阶段3:安排动画Glowy效果现在,对于渐变部分,我们必须在边框背景中绘制按钮的背景渐变。<Border x:Name="ButtonBorder" BorderThickness="1" BorderBrush="Gray">
在给定边框后,我们需要为按钮提供内容设置,如要保留在按钮内的文本中所示。ContentPresenter管理内容对齐,并通知空白按钮Canvas它必须在其中容纳一些内容。 如果不指定ContentPresenter,您将无法看到按钮内嵌的蚂蚁内容。<ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center"/>
现在有关填充控件背景。您可以在Border.Background中将渐变填充设置指定为按钮背景的一部分。 在这里,我定义了一个LinearGradientBrush,它具有一些看起来更好的渐变停止点,还指定了StartPoint作为渐变的原点和EndPoint作为渐变的末尾。<Border.Background> <LinearGradientBrush x:Name="ButtonUp" StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="WhiteSmoke" Offset="0.1"/> <GradientStop Color="LightGray" Offset="0.2"/> <GradientStop Color="White" Offset="0.9"/> </LinearGradientBrush> </Border.Background>
然后最后用</ Border>标签关闭Border</Border>
在此之下,我将向您解释动画部分,该部分使鼠标悬停时按钮发光,并在鼠标离开时恢复正常。这是完整的资源字典代码。
当鼠标悬停在按钮上或单击鼠标时,动画效果最适合该按钮。
现在,要处理鼠标悬停时的动画,我们需要在<ControlTemplate.Triggers>标记下为其编写标记。
为了指定在哪个触发器上执行指定的动作,我们需要在<MultiTrigger.Conditions>标记下指定触发器条件。<MultiTrigger> <MultiTrigger.Conditions> <Condition Property="Button.IsMouseOver" Value="True"/> </MultiTrigger.Conditions>
在这里,我们检查Button的属性。 如果将鼠标悬停在鼠标上,并且属性值满足条件。 然后,我们将动画代码编写如下:
在<MultiTrigger.EnterActions>中,我们启动彩色动画的情节提要,该情节提要引用同一文件中的动画资源。<MultiTrigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOver}"/> </MultiTrigger.EnterActions>
此StoryBoard播放ColorAnimation,该动画在Duration属性中指定的时间内将按钮的当前渐变颜色更改为PaleGoldenRed Color。<Storyboard x:Key="ButtonAnimationOver"> <ParallelTimeline> <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" From ="WhiteSmoke" To="PaleGoldenrod" Duration="0:0:0.50"/> <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" From ="LightGray" To="PaleGoldenrod" Duration="0:0:0.50"/> <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" From ="White" To="PaleGoldenrod" Duration="0:0:0.50"/> </ParallelTimeline> </Storyboard>
当鼠标离开控件焦点时,我们为效果编写ExitActions,如下所示和退出动画<MultiTrigger.ExitActions> <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOut}"/> </MultiTrigger.ExitActions>
<Storyboard x:Key="ButtonAnimationOut"> <ParallelTimeline> <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To ="WhiteSmoke" From="PaleGoldenrod" Duration="0:0:0.50"/> <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="LightGray" From="PaleGoldenrod" Duration="0:0:0.50"/> <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" To="White" From="PaleGoldenrod" Duration="0:0:0.50"/> </ParallelTimeline> </Storyboard>
现在已经可以将样式应用于按钮了,现在转到要样式化的按钮并应用样式。
我们在样式属性中为按钮指定样式名称,这就是将按钮样式设置为Fading Glowy Button所需的全部。<Button Content="Button4" Height="42" x:Name="button1" Width="85" Style="{StaticResource GlowButtonStyle}"/>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!-- Style for application Background--> <Style x:Key="ApplicationBackground" TargetType="{x:Type Window}"> <Setter Property="Control.Background" Value="WhiteSmoke"/> </Style> <Storyboard x:Key="ButtonAnimationOver"> <ParallelTimeline> <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" From ="WhiteSmoke" To="PaleGoldenrod" Duration="0:0:0.50"/> <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" From ="LightGray" To="PaleGoldenrod" Duration="0:0:0.50"/> <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" From ="White" To="PaleGoldenrod" Duration="0:0:0.50"/> </ParallelTimeline> </Storyboard> <Storyboard x:Key="ButtonAnimationOut"> <ParallelTimeline> <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To ="WhiteSmoke" From="PaleGoldenrod" Duration="0:0:0.50"/> <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="LightGray" From="PaleGoldenrod" Duration="0:0:0.50"/> <ColorAnimation Storyboard.TargetName="ButtonUp" Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" To="White" From="PaleGoldenrod" Duration="0:0:0.50"/> </ParallelTimeline> </Storyboard> <!-- Common Button Style--> <Style x:Key="GlowButtonStyle" TargetType="{x:Type Button}"> <Setter Property="Button.Foreground" Value="Black"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}" x:Name="ButtonUpControlTemplate"> <Border x:Name="ButtonBorder" BorderThickness="1" BorderBrush="Gray"> <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center"/> <Border.Background> <LinearGradientBrush x:Name="ButtonUp" StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="WhiteSmoke" Offset="0.1"/> <GradientStop Color="LightGray" Offset="0.2"/> <GradientStop Color="White" Offset="0.9"/> </LinearGradientBrush> </Border.Background> </Border> <ControlTemplate.Triggers> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="Button.IsMouseOver" Value="True"/> </MultiTrigger.Conditions> <MultiTrigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOver}"/> </MultiTrigger.EnterActions> <MultiTrigger.ExitActions> <BeginStoryboard Storyboard="{StaticResource ButtonAnimationOut}"/> </MultiTrigger.ExitActions> </MultiTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>
翻译自: https://bytes.com/topic/xaml/insights/889097-fading-glowy-button-wpf-silverlight
多选按钮和单选按钮 wpf