Code Example for Button with Border in WPF

Below is the code sample to create Button with Border in WPF

<Page x:Class="TestWPF.ExBorder"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExBorder">
    <Grid>
        <Border Width=" 140" Height=" 70" CornerRadius="6">
            <Border.Background >
                <SolidColorBrush   Color="BurlyWood" ></SolidColorBrush>
                
            </Border.Background>
            <Border.Effect >
                
                <DropShadowEffect BlurRadius=" 15"  Color="BlanchedAlmond" ShadowDepth="15" Opacity=" 5" Direction=" 160" ></DropShadowEffect>
                
            </Border.Effect>
            <Border.Child >
                
                <Button  Height="60" Width=" 130" Content=" Button With Border"></Button>
                
            </Border.Child>
            
            
            
        </Border>
    </Grid>
</Page>

See the Button 

Code Sample for Transformation in WPF

<Page x:Class="TestWPF.ExTransofrm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExTransofrm">
    <Grid>
       
        <TextBlock Text=" TRANSFORM TEXT" FontSize="20" FontWeight="Bold">
            <TextBlock.RenderTransform >
                <TransformGroup >
                    <RotateTransform Angle=" 45"></RotateTransform>
                    <SkewTransform AngleX=" 20" AngleY=" 20"></SkewTransform>
                    <TranslateTransform X="20" Y="60"></TranslateTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1"></ScaleTransform>
                    
                    
                </TransformGroup>
             </TextBlock.RenderTransform>
            
     
        </TextBlock>
    </Grid>
</Page>

Below will be the transformed TextBlock

Code Sample to animate the button using Storyboard elemnets in WPF

Below is the sample code to Animate the button (Change the width,Change the Background color,Change the border color ) on Mouse Over

<PageFunction
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib" 
    x:Class="TestWPF.ExAnimation1"
    x:TypeArguments="sys:String"
    Title="ExAnimation1">
    <StackPanel>
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="Rectangle.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetName="btnAnimate" 
                        Storyboard.TargetProperty="Width">
                            <DoubleAnimation From="120"
                               To="180" 
                               Duration="0:0:2"/>
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetName="btnAnimate" 
                        Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
                            <ColorAnimation From="orange"
                              To="Blue"
                              By="Beige" 
                              Duration="0:0:5" />
                        </Storyboard>
                    </BeginStoryboard>


                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetName="btnAnimate" 
                        Storyboard.TargetProperty="BorderBrush.Color">
                            <ColorAnimation From="Black"
                              To="Orange"
                              By="Red" 
                              Duration="0:0:5" />
                        </Storyboard>
                    </BeginStoryboard>


                </EventTrigger.Actions>
            </EventTrigger>
        </StackPanel.Triggers>
        <Button Name="btnAnimate" 
            Width="120"
            Height="50"
            Margin="40"
            Background="OrangeRed" BorderBrush="Cyan">
          ANIMATE
            
        </Button>
        
    </StackPanel>
    
</PageFunction>

Code Sample for Content Template in WPF

 First of all to know how to create WPF Browser App check the below post

http://www.dotnetissues.com/2011/05/code-example-to-set-style-on-wpf.html

Below is the code to design elliptical button in WPF Application using Control Template

ExControlTemplate.xaml

<Page x:Class="TestWPF.ExControlTemplate"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExControlTemplate">


    <Grid>
        <Button Content=" Elliptical Button"  Width="100" Height="50" Style="{StaticResource EllipseButton}" />
          
           
        </Grid>
    


</Page>

App.xaml

<Application x:Class="TestWPF.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="ExControlTemplate.xaml">
    <Application.Resources>
        <Style x:Key="myStyle" TargetType="Button">
            <Setter Property="Background" Value="Orange" />
            <Setter Property="FontStyle" Value="Italic" />
            <Setter Property="Padding" Value="8,4" />
            <Setter Property="Margin" Value="4" />
        </Style>
        
        <Style x:Key="EllipseButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            
                            <Ellipse Fill="{TemplateBinding Background}"
                             Stroke="{TemplateBinding BorderBrush}"/>
                            <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center" />
                            
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
              
                </Setter>
         
        </Style>
    </Application.Resources>
</Application>

Run the app and you 'll see the button

Controls in WPF are separated into logic, states, events ,properties and template

Template  defines the visual appearance of the control.

nThe wireup between the logic and the template is done by DataBinding.