Dynamic 3D Button

Dynamic 3D button in WPF using Control template

<Style TargetType="{x:Type Button}" >

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type Button}">

                    <Grid>

                        <Rectangle x:Name="GelBackground" Opacity="1" RadiusX="9" RadiusY="9"

                                   Fill="{TemplateBinding Background}" StrokeThickness="0.35">

                            <Rectangle.Stroke>

                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                                    <GradientStop Color="#FF6495ED" Offset="0" />

                                    <GradientStop Color="#FF6495ED" Offset="1" />

                                </LinearGradientBrush>

                            </Rectangle.Stroke>

                        </Rectangle>

                        <Rectangle x:Name="GelShine" Margin="2,2,2,0" VerticalAlignment="Top" RadiusX="6" RadiusY="6"

                                   Opacity="1" Stroke="Transparent" Height="15px">

                            <Rectangle.Fill>

                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                                    <GradientStop Color="#FF6495ED" Offset="0"/>

                                    <GradientStop Color="Transparent" Offset="1"/>

                                </LinearGradientBrush>

                            </Rectangle.Fill>

                        </Rectangle>

                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter Property="Background" Value="DarkBlue">

                            </Setter>

                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">

                            <Setter Property="Fill" TargetName="GelBackground">

                                <Setter.Value>

                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">

                                        <GradientStop Color="Blue" Offset="0"/>

                                        <GradientStop Color="Blue" Offset="1"/>

                                    </LinearGradientBrush>

                                </Setter.Value>

                            </Setter>

                        </Trigger>

                        <Trigger Property="IsEnabled" Value="False">

                            <Setter Property="Fill" TargetName="GelBackground" Value="Blue">

                            </Setter>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

        <Setter Property="Background" Value="#FF4169E1"/>

        <Setter Property="Foreground" Value="White"/>

        <Setter Property="Width" Value="55"/>

        <Setter Property="Height" Value="30"/>

         

    </Style>

This will look like:

Note: This is not my original work. Have blogged it here just for my future reference and of course if someone wants to use it.

Flat 3D button Style

Note: This is not my original work. Have blogged it here just for my future reference and of course if someone wants to use it.
 
Flat 3D button in WPF using simple gradient brush. For a more sophisticated 3D button go to Dynamic 3D Button

<Page>  

<Page.Resources>

        <!-- A brush for flat 3D panel borders -->

        <LinearGradientBrush x:Key="Flat3DBorderBrush"

                         StartPoint="0.499,0" EndPoint="0.501,1">

            <GradientStop Color="#FFF" Offset="0" />

            <GradientStop Color="#DDD" Offset="0.01" />

            <GradientStop Color="#AAA" Offset="0.99" />

            <GradientStop Color="#888" Offset="1" />

        </LinearGradientBrush>

    </Page.Resources>

    <Grid>

        <!-- A flat 3D panel -->

        <Border

          HorizontalAlignment="Center" VerticalAlignment="Center"

          BorderBrush="{StaticResource Flat3DBorderBrush}"

          BorderThickness="5" Background="#BBB">

            <StackPanel>

                <Label Content="hi" Height="30" Width="50"/>

                <Control Width="100" Height="100"/>

            </StackPanel>

        </Border>

    </Grid>

</Page>

The button will look like this:

For dynamic 3D button - See this post