How to create a circle button with image background and clicking feel in silverlight

Question

Now I can change the look of the button to an ellipse with a background image. However, when I click on it, I don’t feel the CLIMATE EFFECT of the usual buttons in Silverlight. Can someone help me how to get this effect?

this is my xaml style for the round button

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

after searching, I know that I should use VisualStateManager in System.Window. This is what my XAML looks like, but I still can’t get the CLICKING feeling like regular buttons

<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

You need to set the triggers for your button for the corresponding state.

<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

An easier way is to use Blend. Drag the ellipse, transfer it to the control (button). Go to StatesTab and adjust the states accordingly. Usually in the pressed state, use the scale form to reduce the size of the button and use the translation transform to move the button (provided that the size is 2 pixels) in the direction from below / to the right will do the trick.

NTN