WPF 中自定义按钮的视觉反馈答案

【问题标题】：Visual Feedback for custom button in WPFWPF 中自定义按钮的视觉反馈
【发布时间】：2013-07-15 15:51:00
【问题描述】：

我在我的主窗口中有一个自定义按钮，我希望能够在单击它以及鼠标悬停在它上面时向用户提供一些视觉反馈。我使用RadialGrandientBrush 为按钮着色。我想在这些事件中继续使用它，但我不知道如何在 trigger 中实现它。

这是我当前的代码：

   <Button Width="100"
        Height="100" Click="Button_Click_1">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse Stroke="Black"
                         StrokeThickness="1">
                        <Ellipse.Fill>
                            <RadialGradientBrush>
                                <GradientStop Offset="0"
                                          Color="White" />
                                <GradientStop Offset="1"
                                          Color="LightSkyBlue" />
                                <GradientStop Offset="1"
                                          Color="LightSkyBlue" />
                                <RadialGradientBrush.Transform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="0.65" />
                                    </TransformGroup>
                                </RadialGradientBrush.Transform>
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <!--- THIS IS WHERE I NEED TO USE THE RADIALGRADIENTBRUSH AGAIN -->
                        <Setter ........ />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>

</Window>

如何在触发器中使用画笔，例如 RadialGradientBrush 作为设置器？

谢谢。

【问题讨论】：

标签： wpf button radial-gradients

【解决方案1】：

您可以在控件模板中使用x:Name 命名您的Ellipse，并使用触发器部分中Setter 上的TargetName 属性访问它。

示例代码如下：

<Button Width="100"
        Height="100" >
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse Stroke="Black" x:Name="ellipse"
                         StrokeThickness="1">
                        <Ellipse.Fill>
                            <RadialGradientBrush>
                                <GradientStop Offset="0"
                                          Color="White" />
                                <GradientStop Offset="1"
                                          Color="LightSkyBlue" />
                                <GradientStop Offset="1"
                                          Color="LightSkyBlue" />
                                <RadialGradientBrush.Transform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="0.65" />
                                    </TransformGroup>
                                </RadialGradientBrush.Transform>
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ellipse" Property="Fill">
                                <Setter.Value>
                                <RadialGradientBrush>
                                <GradientStop Offset="0"
                                          Color="White" />
                                <GradientStop Offset="1"
                                          Color="LightGreen" />
                                <GradientStop Offset="1"
                                          Color="Green" />
                                <RadialGradientBrush.Transform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="0.65" />
                                    </TransformGroup>
                                </RadialGradientBrush.Transform>
                            </RadialGradientBrush>
                                </Setter.Value>
                            </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>

理想情况下，您应该使用VisualStateManager 来实现此目的。

请参阅此MSDN Walkthrough 关于使用 ControlTemplate 和 VisualStateManager 自定义按钮外观

【讨论】：

这正是我想要的，非常感谢。