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.

Code Example to set Style on WPF Browser Application/XBAP Application

To Create WPF Browser Application/XBAP Application Go to New Project in VS2008 or later versions
Select Template WPFBrowserApplication and Click OK.

This will create a XBAP(XAML Browser Application) with some files
page.xaml(Design Page Here), App.xaml(Application configurations here)

2.)To add a new page Right click On Solution Explorer and from new Click on Page, Give Name and add it in the Application

3.) Below is the sample code To set Style on a page  (A style consists of a list of setters)


ExStyle2.xaml

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


    <StackPanel Orientation="Vertical"  VerticalAlignment="Top">
        <Button Style="{StaticResource myStyle}" Height=" 50" Width="50">SEE</Button>
        <Button Style="{StaticResource myStyle}" Height=" 50" Width="50">WPF</Button>
        <Button Style="{StaticResource myStyle}" Height=" 50" Width="50">STYLES</Button>
        </StackPanel>
  
    
</Page>

Here in the above code Style setter is myStyle which is defined in App.xaml 

 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="ExStyle2.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="DialogButtonStyle" 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>


StartupUri attribute is used to set the StartUpPage of the App.

Run the app an see the Style applied to the page