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 

Run XBAP Application on Google Chrome

To Execute XBAP App on Google Chrome
I Copied following dll files from Mozilla Installatio Path to Google Chrome
Mozilla Installation Path :C:\Program Files\Mozilla Firefox
Moziila Version : 3.6.17
Google Chrome Installation Path :C:\Documents and Settings\(UserName)\Local Settings\Application Data\Google\Chrome\Application
Chrome Version:11.0.696.71



js3250.dll
mozcrt19.dll
mozcpp19.dll
nspr4.dll
nss3.dll
nssutil3.dll
plc4.dll
plds4.dll
smime3.dll
sqlite3.dll
ssl3.dll
xpcom.dll
xul.dll

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