Rounded edge 3D style button in WPF

Question

I am trying to create a round edge 3D shape styled button in WPF. I want to create a button look like this image.

  <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="#002060" Offset="0" />
                                    <GradientStop Color="#002060" Offset="1" />
                                </LinearGradientBrush>
                            </Rectangle.Stroke>
                        </Rectangle>
                        <Rectangle x:Name="GelShine" Margin="2,2,2,0" VerticalAlignment="Top" RadiusX="8" RadiusY="8"
                               Opacity="1" Stroke="Transparent" Height="5px">
                            <Rectangle.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="#002060" 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="#002060"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Width" Value="55"/>
        <Setter Property="Height" Value="30"/>

    </Style>

I used above code for creating button but it will not giving expected result. look like this.

Any help will be appreciated.

Answer 1

You can use borders inside a button template with a blur-effect to achive the requested result:

    <Button Content="English" Width="100" Height="50">
        <Button.Style>
            <Style TargetType="{x:Type Button}" >
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ButtonBase}">
                            <Border CornerRadius="5" Background="{TemplateBinding Background}" Name="button" Width="100">
                                <Grid>
                                    <Border BorderThickness="1,0,1,1" BorderBrush="Black" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
                                        <Border.Effect>
                                            <BlurEffect Radius="2" KernelType="Gaussian"/>
                                        </Border.Effect>
                                    </Border>
                                    <Border BorderThickness="0,1,0,0" BorderBrush="White" Margin="2" Opacity="0.7" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
                                        <Border.Effect>
                                            <BlurEffect Radius="2" KernelType="Gaussian"/>
                                        </Border.Effect>
                                    </Border>
                                    <ContentPresenter TextBlock.FontSize="{TemplateBinding FontSize}" TextBlock.FontFamily="{TemplateBinding FontFamily}" TextBlock.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Background" Value="#002060" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="FontSize" Value="20" />
                <Setter Property="FontFamily" Value="Consolas" />                    
            </Style>
        </Button.Style>
    </Button>

Result: