如何在 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>

搜索后我知道我应该在 Systems.Window 中使用 VisualStateManager。这就是我的 XAML 现在的样子，但我仍然无法像普通按钮那样获得 CLICKING 的感觉

<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>

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>

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>

Answer 3

更简单的方法是使用 Blend。拖放椭圆，将其转换为控件（按钮）。转到 StatesTab 相应地调整状态。通常，在按下状态下，应用缩放变换以减小按钮大小并使用平移变换将按钮（大约 2px 量）移至底部/右侧就可以了。

HTH