How to create circle button with image background and CLICKING feel IN Silverlight

Question

Hi

Right 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 CLICKING EFFECT of the normal buttons in Silverlight Can anyone help me how to get that 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 around i know that i should use the VisualStateManager in Systems.Window. This is how my XAML looks now but i still can't get the CLICKING feeling like normal 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

Oh, I dont know, the feelings one experiences when clicking buttons are quite individual and are not to be tampered with. However, if the need is dire, how about you start by experimenting with the different WPF Bitmap Effects? Start with Bevel.

Or, for a more specific suggestion; check out this WPF Brushes Overview. Use a RadialGradientBrush with two colors to make the button look convex. When the button is pressed, change the colors so that it looks concave.

A slight offset of the label on the button might also work.

Answer 2

You need to set the triggers for your button for the respective 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 3

Far more simple way is to use Blend. Drag and Drop Ellipse, convert it into control(button). Go to StatesTab adjust the states accordingly. Normally, on pressed state, apply scale trasform to reduce the button size and use translate transform to move the button (appro 2px amount) towards bottom/right would do the trick.

HTH