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>