我想为我的应用创建关闭/最大化/最小化按钮。所以我写了这篇 Style ：
<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个 Style 的副本， MouseOver 颜色的变化，如下所示：
<ColorAnimation Storyboard.TargetName="BackgroundColor1" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
<!-- Just "To" Color changes is each button -->
To="#FFFF1111"/>
但我想将这种颜色绑定到Button 背景颜色，这样我就不必拥有3个重复样式。我做了一些 RelativeSource 绑定但没有工作。
Q1：如何将渐变绑定到按钮背景？
Q2：还有其他 Type 控制器可以执行此操作 AND 是否具有颜色属性？
提前致谢。
编辑：转换代码：
<VisualStateGroup.Transitions>
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.2"/>
<VisualTransition From="MouseOver" GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
答案 0 :(得分：1)
如果是我，我可能会做更像下面的事情，所以你可以更容易地传递Brush，Color，ColorName等而不是换掉GradientStop并且一次只处理一个整个对象。由于Fill只接受Color。 Brush和Fill是不同的野兽。 ;）
喜欢的东西;
<强>样式;
<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>
希望这会有所帮助，欢呼。
更多信息;
为此，你绝对可以申请过渡;你只需要删除触发器（在前面的例子中这部分）;
<!-- DELETE THIS PART -->
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Opacity" TargetName="buttonLight" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
然后只是在我VisualStateManager内的Grid内的<Grid>位于 <!-- 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>
标记右上方的<{1}}标记处;
{{1}}
......就是这样，你已经完成了，并且还有颜色功能等等。）