按钮
样式,重新定义模板和过渡动画,以便在鼠标进入、退出、按下、松开、禁用和启用状态之间进行转换。这不是问题,但我想制作另一种按钮样式,基本上与背景颜色不同。我已经在样式资源和Storyboards中为正常、悬停和禁用状态定义了颜色。
<Style.Resources>
<Color x:Key="DisabledBackground">#4c4c4c</Color>
<Color x:Key="NormalBackground">#538ce1</Color>
<Color x:Key="HoverBackground">#6ea8ff</Color>
<Storyboard x:Key="MouseOverAnimation">
<ColorAnimation Storyboard.TargetName="BackgroundBrush"
Storyboard.TargetProperty="Color"
To="{StaticResource HoverBackground}"
Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetName="Underlay"
Storyboard.TargetProperty="Opacity"
To="0.7"
Duration="0:0:0.3" />
</Storyboard>
<!-- and few others... -->
</Style>
然后我定制了模板,最终是 ControlTemplate.Triggers
部分:
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{DynamicResource MouseOverAnimation}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{DynamicResource MouseOutAnimation}"/>
</Trigger.ExitActions>
</Trigger>
<!-- and few others... -->
现在我想创建一个新样式,并仅更改DisabledBackground
和NormalBackground
的颜色,就像这样:
<Style x:Key="Start"
TargetType="{x:Type Button}"
BasedOn="{StaticResource {x:Type Button}}">
<Style.Resources>
<Color x:Key="DisabledBackground">#4c4c4c</Color>
<Color x:Key="NormalBackground">#960a0a</Color>
<Color x:Key="HoverBackground">#de1111</Color>
</Style.Resources>
</Style>
请勿更改控制模板。您可能已经注意到,我的公共按钮样式中使用了
DynamicResource
来引用以样式资源结尾的Storyboard,因为Storyboard不能具有绑定或动态资源而导致异常。这是我最后的“解决方案”,但它不起作用,我想不出其他办法。
我不想复制和粘贴整个按钮样式来更改两个颜色。如何修改我的样式,以便能够“动态”更改Storyboard动画中使用的颜色,或者至少继承样式并在那里设置颜色?
XAML完整代码
<Style TargetType="{x:Type Button}">
<Style.Resources>
<Color x:Key="DisabledBackground">#4c4c4c</Color>
<Color x:Key="NormalBackground">#538ce1</Color>
<Color x:Key="HoverBackground">#6ea8ff</Color>
<Storyboard x:Key="MouseOverAnimation">
<ColorAnimation Storyboard.TargetName="BackgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource HoverBackground}" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetName="Underlay" Storyboard.TargetProperty="Opacity" To="0.7" Duration="0:0:0.3" />
</Storyboard>
<Storyboard x:Key="MouseOutAnimation" FillBehavior="Stop">
<ColorAnimation Storyboard.TargetName="BackgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource NormalBackground}" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetName="Underlay" Storyboard.TargetProperty="Opacity" To="0.2" Duration="0:0:0.3" />
</Storyboard>
<Storyboard x:Key="MouseDownAnimation">
<DoubleAnimation Storyboard.TargetName="OverlayGradient" Storyboard.TargetProperty="Opacity" To="0.45" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="MouseUpAnimation" Storyboard.TargetProperty="Background" FillBehavior="Stop">
<DoubleAnimation Storyboard.TargetName="OverlayGradient" Storyboard.TargetProperty="Opacity" To="0.5" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="DisabledAnimation">
<ColorAnimation Storyboard.TargetName="BackgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource DisabledBackground}" Duration="0:0:0.3" />
<ColorAnimation Storyboard.TargetName="UnderlayFillBrush" Storyboard.TargetProperty="Color" To="{StaticResource DisabledBackground}" Duration="0:0:0.3" />
</Storyboard>
<Storyboard x:Key="EnabledAnimation">
<ColorAnimation Storyboard.TargetName="BackgroundBrush" Storyboard.TargetProperty="Color" To="{StaticResource NormalBackground}" Duration="0:0:0.3" />
<ColorAnimation Storyboard.TargetName="UnderlayFillBrush" Storyboard.TargetProperty="Color" To="{StaticResource NormalBackground}" Duration="0:0:0.3" />
</Storyboard>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<!-- Button underlay glow
-->
<Rectangle x:Name="Underlay" Opacity="0.2">
<Rectangle.Fill>
<SolidColorBrush x:Name="UnderlayFillBrush" Color="{DynamicResource NormalBackground}"/>
</Rectangle.Fill>
<Rectangle.Effect>
<BlurEffect Radius="35" KernelType="Gaussian"/>
</Rectangle.Effect>
</Rectangle>
<!-- Button base border with rounded corners
Contains base background
-->
<Border x:Name="ButtonBackground" BorderThickness="1" CornerRadius="2">
<Border.BorderBrush>
<SolidColorBrush Color="Black" Opacity="0.8"/>
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush x:Name="BackgroundBrush" Color="{DynamicResource NormalBackground}"/>
</Border.Background>
<!-- Button Overlay
Adds the background overlay gradient -->
<Border CornerRadius="2">
<Border.Background>
<LinearGradientBrush x:Name="OverlayGradient" Opacity="0.5" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="0.02" Color="White"/>
<GradientStop Offset="0.02" Color="Transparent"/>
<GradientStop Offset="0.85" Color="#000000" />
</LinearGradientBrush>
</Border.Background>
<Border BorderThickness="1" CornerRadius="2">
<Border.BorderBrush>
<SolidColorBrush Color="#b4b4b4" Opacity="0.2"/>
</Border.BorderBrush>
<!-- Inner text -->
<TextBlock Text="{TemplateBinding Content}"
FontSize="{TemplateBinding FontSize}"
FontFamily="Segoe UI"
Foreground="White"
TextWrapping="Wrap"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextOptions.TextFormattingMode="Display"
RenderOptions.BitmapScalingMode="NearestNeighbor">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="6" Color="Black" RenderingBias="Quality"/>
</TextBlock.Effect>
</TextBlock>
</Border>
</Border>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{DynamicResource DisabledAnimation}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{DynamicResource EnabledAnimation}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{DynamicResource MouseOverAnimation}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{DynamicResource MouseOutAnimation}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{DynamicResource MouseDownAnimation}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{DynamicResource MouseUpAnimation}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>