How to creat a 3 Effect for a Button Control in Silverlight

Btw, you don't need to create a new question for each subject. I can still help you on some issues on the old topics.

If you for example want to have the button looked like pressed when you click it then I can help you with it in this topic.

Pixel Shader Effects
http://msdn.microsoft.com/en-us/library/dd901594(v=vs.95).aspx

With reference to comment from saragani
Your solution has worked perfectly. It gives me the control on color and 3D effect by adding the following to a Button's attributes. Template="{StaticResource FlatButtonTemplate}.
The code, as it is,  effect two aspects of the appearance of the button at the same time. I would now also like to understand how these two aspects of the appearance of the Button code be controlled separately.
That is if I have two Buttons (Button 1 and Button2) I may want to apply only the color effect (as in my previous question without making it look 3D) to the Button1 appearance and both the Color and 3D effect to Button2. I suppose I am looking a modification of the UserControl.Resources part of the code that would allow me to control these two aspects of it separately.
And I would also love to learn how to have the button look like pressed when you click it.
As I requesting additional help I am increasing the point count to 250.

Hi, the easiest way to have both buttons with 3D and flat mode is to have 2 templates
(The one I have you earlier and the one posted here).

If you would like to have only 1 template for both of them and have a property like 3DButton="True" then that will require to create your own button that inherits Button, and add it a Boolean dependency property 3DButton.

Hi, here is a Control Template for the button so it will have some visual effects on mouse over, on Click, and when it is disabled:
I have used VisualStateManager cause Sliverlight doesn't have Triggers, and because it is the right way to do it in SilverLight...

        <ControlTemplate x:Key="FlatButtonTemplate" TargetType="Button">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <Border x:Name="Background" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="LightGray">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <Border BorderThickness="1 1 0 0" BorderBrush="White" Margin="1" />
                <Border BorderThickness="0 0 1 1" BorderBrush="Black" Margin="1"/>

                <Border x:Name="BackgroundAnimation" Background="Black" Opacity="0" IsHitTestVisible="False" />

                <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" />
            </Grid>
        </ControlTemplate>

Select allOpen in new window

It has been extremely helpful. I have been able to follow the advice in your last comment, by creating two templates.
This answers my question, but before I close this question, could you please also, if possible, explain how to make a button look like pressed when you click it. Please also, if you don't mind, send me a blank email at   gulgee at me dot com.   It is just that I would like to send you a present as a small gesture of thanks for all the help you have very kindly given me. Thanks

Hi, Please take a look at the XAML I posted above. Does it give you the right behavior you want for the button to be pressed?

If not, please explain what do you mean for it to look like pressed (Do you want the Black/ White borders on the 3D button to switch directions, similar to Windows?)

Hi, here is a similar press effect like in windows:
I use RotateTransform tp rotate the black and white borders by 180 degrees, so it looks like it is pressed... :-)

<ControlTemplate x:Key="FlatButtonTemplate" TargetType="Button">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
                                <DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="Angle" Storyboard.TargetName="pressedTransform"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <Border x:Name="Background" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="LightGray">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <Grid RenderTransformOrigin="0.5, 0.5">
                    <Border BorderThickness="1 1 0 0" BorderBrush="White" Margin="1" />
                    <Border BorderThickness="0 0 1 1" BorderBrush="Black" Margin="1"/>
                    <Grid.RenderTransform>
                        <RotateTransform Angle="0"  x:Name="pressedTransform"/>
                    </Grid.RenderTransform>
                </Grid>
                

                <Border x:Name="BackgroundAnimation" Background="Black" Opacity="0" IsHitTestVisible="False" />

                <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" />
            </Grid>
        </ControlTemplate>

Select allOpen in new window

Thank you Saragani for the additional help. The code you provided gives me the visual effects I was looking for. However, as your first comment had answered the question I had originally asked, I am accepting it as correct. Thanks again for your help.

Glad I could help :-)