C# 将形状FillColor绑定到按钮背景笔刷
我想为我的应用程序创建关闭/最大化/最小化按钮。所以我写了这篇风格的文章:C# 将形状FillColor绑定到按钮背景笔刷,c#,wpf,xaml,C#,Wpf,Xaml,我想为我的应用程序创建关闭/最大化/最小化按钮。所以我写了这篇风格的文章: <Style x:Key="CloseButton" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Grid Background="T
<Style x:Key="CloseButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="BackgroundColor1" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0"
To="#FFFF1111"/>
<ColorAnimation
Storyboard.TargetName="BackgroundColor2" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0"
To="#FFFF1111"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse Name="BackgroundColor1" Margin="4,0,0,0" Width="18" Height="18">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource ColorBorder}" Offset="0.2"/>
<GradientStop Color="WhiteSmoke" Offset=".9"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Name="BackgroundColor2" Margin="4,0,0,0" Width="18" Height="18">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource ColorBorder}" Offset="1"/>
<GradientStop Color="WhiteSmoke" Offset="0"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse Margin="4,0,0,8" Width="7" Height="7">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
<GradientStop Color="WhiteSmoke" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.7"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="4,0,0,0" Width="18" Height="18" StrokeThickness="2" StrokeLineJoin="Round">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse Margin="4,0,0,0" Width="18" Height="18" StrokeThickness="1" StrokeLineJoin="Round">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="#FF333333" Offset="1"/>
<GradientStop Color="Transparent" Offset="0.5"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
现在我有3个重复的样式,鼠标上方的颜色发生了变化,如下所示:
<ColorAnimation Storyboard.TargetName="BackgroundColor1" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
<!-- Just "To" Color changes is each button -->
To="#FFFF1111"/>
如果是我,我可能会像下面这样做,这样你可以更容易地传入笔刷、颜色、颜色名称等,而不是交换GradientStop,一次只处理一个完整的对象。因为填充只接受颜色<代码>刷子和填充是不同的
有点像
风格强>
<Style x:Key="CloseButton2" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Red"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<!-- Left this here in case you want to use it later for something. Just set Visibility. -->
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" SnapsToDevicePixels="true" Visibility="Collapsed">
<ContentPresenter x:Name="contentPresenter" Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<!-- Your new magic. -->
<Border x:Name="buttonLight" Opacity="0"
Background="{TemplateBinding Background}" CornerRadius="50"
Width="18" Height="18" Margin="4,0,0,0"/>
<Ellipse Name="BackgroundColor1" Margin="4,0,0,0" Width="18" Height="18">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Transparent" Offset="0.2"/>
<GradientStop Color="WhiteSmoke" Offset=".9"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Name="BackgroundColor2" Margin="4,0,0,0" Width="18" Height="18">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Transparent" Offset="1"/>
<GradientStop Color="WhiteSmoke" Offset="0"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse Margin="4,0,0,8" Width="7" Height="7">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
<GradientStop Color="WhiteSmoke" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.7"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="4,0,0,0" Width="18" Height="18" StrokeThickness="2" StrokeLineJoin="Round">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse Margin="4,0,0,0" Width="18" Height="18" StrokeThickness="1" StrokeLineJoin="Round">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="#FF333333" Offset="1"/>
<GradientStop Color="Transparent" Offset="0.5"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Opacity" TargetName="buttonLight" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Style="{DynamicResource CloseButton2}"/>
<Button Background="Green"
Style="{DynamicResource CloseButton2}" Margin="0,10"/>
<Button Background="Blue"
Style="{DynamicResource CloseButton2}"/>
</StackPanel>
…就这样,您完成了,并且仍然具有颜色功能等:)所以您只需要一个通用按钮样式模板,并且能够在每个实例中将不同的鼠标颜色作为属性传递?@ChrisW。确切地谢谢实际上,我对另一个椭圆做了类似的操作,但我不知道如何设置动画。在你目前的回答中,你能做些什么吗?@Mostafa我不明白,如果连过渡期都没有,为什么你的动画很重要。从我所看到的情况来看,它所做的一切就是立即将按钮的色调从一种颜色转换为另一种颜色,这与本例中的简单触发器所完成的相同?因此,我可能需要更多地解释一下您希望实现的总体目标。:)哎呀,我忘记添加转换代码了。我现在就做,我甚至没想过用不透明来工作,太棒了,谢谢!不用担心,有很多方法可以完成同样的事情,但这种方法不仅仅局限于填充
颜色(尽管带有填充的形状总是比带有背景
属性的边框
稍轻一些),但我想,如果你想用任何方式来填充任何颜色,都会很好。干杯
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Style="{DynamicResource CloseButton2}"/>
<Button Background="Green"
Style="{DynamicResource CloseButton2}" Margin="0,10"/>
<Button Background="Blue"
Style="{DynamicResource CloseButton2}"/>
</StackPanel>
<!-- DELETE THIS PART -->
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Opacity" TargetName="buttonLight" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
<!-- Invoke VisualStateManager to handle it instead of Trigger as requested. -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.2"/>
<VisualTransition From="MouseOver" GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="buttonLight"
Duration="0:0:1">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>