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

FaheemAhmadGul
FaheemAhmadGul used Ask the Experts™
on

I would like to create a 3D effect for a Button Control in Silverlight 4. I would like my Button to look like as shown in the picture I have uploaded.  

I would like to know if it is possible to achieve this kind of appearance for a Button Control in Silverlight 4 and if yes, how.
Thank you for your help in anticipation.

3D-Effect-Button.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
Try this:

    <UserControl.Resources>
        <ControlTemplate x:Key="FlatButtonTemplate" TargetType="Button">
            <Grid>
                <Border 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"/>
            </Grid>
           
        </ControlTemplate>
    </UserControl.Resources>

Commented:
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.
Top Expert 2011

Commented:
Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Author

Commented:
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.


Commented:
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.

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

Open in new window

Author

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

Commented:
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?)

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

Open in new window

Author

Commented:
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.

Commented:
Glad I could help :-)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial