May 30, 2011

Code Sample for Content Template in WPF




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

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.


No comments:

Post a Comment