如何在Silverlight中创建带图像背景和具有点击感觉的圆形按钮

Question

现在我可以通过使用背景图片将按钮的外观更改为椭圆形。然而，当我点击它时，我没有感受到Silverlight中普通按钮的点击效果。有人能帮我解决如何获得这种效果吗？

这是我的圆形按钮XAML样式：

<style x:Key="roundButton" TargetType="Button">
    <Setter Properties="Template">
        <Setter.Value>
              <ControlTemplate TargetType="Button">
                 <Ellipse width="100" height="100">
                     <Ellipse.Fill>
                            <ImageBrush ImageSource="./icon.png">
                     </Ellipse.Fill>
                 </Ellipse>

              </ControlTemplate>
        </Setter.Value>
    </Setter>
</style>

在搜索了一番后，我知道应该使用系统窗口中的VisualStateManager。这是我的XAML代码，但是我仍然无法像普通按钮那样获得“点击”感觉。

<Style x:Key="roundButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                    <Ellipse Width="100" Height="100">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="./icon.png" />
                        </Ellipse.Fill>
                    </Ellipse>

                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="MouseOver"/>
                            <vsm:VisualState x:Name="Normal"/>
                            <vsm:VisualState x:Name="Pressed"/>
                            <vsm:VisualState x:Name="Disabled"/>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="FocusStates">
                            <vsm:VisualState x:Name="Unfocused"/>
                            <vsm:VisualState x:Name="Focused"/>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

- Tai

Answer 1

您需要为相应状态设置按钮触发器。

<style x:Key="roundButton" TargetType="Button">
    <Setter Properties="Template">
        <Setter.Value>
              <ControlTemplate TargetType="Button">
                 <Ellipse width="100" height="100">
                     <Ellipse.Fill>
                            <ImageBrush ImageSource="./icon.png"/>
                     </Ellipse.Fill>
                 </Ellipse>

                 <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                       <!-- mouse over look and feel here -->
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                       <!-- clicked look and feel here -->
                    </Trigger>
                    </ControlTemplate.Triggers> 
              </ControlTemplate>
        </Setter.Value>
    </Setter>
</style>

- MrDosu

---

抱歉，我之前没有提到我想在Silverlight而不是WPF中完成这个。ControlTemplate.Triggers找不到了。为了让它被识别，我该怎么做？ - Tai

Answer 2

        <Setter Property="Template">

            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                            <Ellipse.Fill>
                                <RadialGradientBrush GradientOrigin=".2,.2">
                                    <GradientStop Offset="0.2" Color="White" />
                                    <GradientStop Offset="1" Color="Blue" />

                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>

            </Setter.Value>
        </Setter>

    </Style>

- Dhaval

Answer 3

更简单的方法是使用Blend。拖放椭圆形，将其转换为控件（按钮）。进入StatesTab并相应地调整状态。通常，在按下状态下，应用比例变换来减小按钮大小，并使用平移变换将按钮向下/右移动（大约2像素）即可解决问题。

希望对你有所帮助。

- Prince Ashitaka

---

我使用Blend将椭圆形状转换为按钮。但是，当我点击状态选项卡时，没有任何设置可用。你能指导我如何设置以获得点击感觉吗？谢谢。 - Tai

这可能会对你有所帮助 :) - Prince Ashitaka