Simple ControlTemplate

Posted on by coder
image_pdfimage_print


   
      

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RSS Reader">
    
<Grid xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid.Resources>
    <ControlTemplate x:Key="buttonTemplate">
      <Grid>
        <Ellipse Width="100" Height="100">
          <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
              <GradientStop Offset="0" Color="Blue"/>
              <GradientStop Offset="1" Color="Red"/>
            </LinearGradientBrush>
          </Ellipse.Fill>
        </Ellipse>
        <Ellipse Width="80" Height="80">
          <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
              <GradientStop Offset="0" Color="White"/>
              <GradientStop Offset="1" Color="Transparent"/>
            </LinearGradientBrush>
          </Ellipse.Fill>
        </Ellipse>
      </Grid>
    </ControlTemplate>
  </Grid.Resources>
  <Button Template="{StaticResource buttonTemplate}">OK</Button>
</Grid>



</Window>

ControlTemplate with Triggers

Posted on by coder
image_pdfimage_print


   
      


<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RSS Reader">
      
<Grid xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid.Resources>
    <ControlTemplate x:Key="buttonTemplate">
      <Grid>
        <Ellipse x:Name="outerCircle" Width="100" Height="100">
          <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
              <GradientStop Offset="0" Color="Blue"/>
              <GradientStop Offset="1" Color="Red"/>
            </LinearGradientBrush>
          </Ellipse.Fill>
        </Ellipse>
      </Grid>
      <ControlTemplate.Triggers>
        <Trigger Property="Button.IsMouseOver" Value="True">
          <Setter TargetName="outerCircle" Property="Fill" Value="Orange"/>
        </Trigger>
        <Trigger Property="Button.IsPressed" Value="True">
          <Setter Property="RenderTransform">
            <Setter.Value>
              <ScaleTransform ScaleX=".9" ScaleY=".9"/>
            </Setter.Value>
          </Setter>
          <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Grid.Resources>
  <Button Template="{StaticResource buttonTemplate}">OK</Button>
</Grid>

</Window>

ControlTemplate that Respects Content

Posted on by coder
image_pdfimage_print


   
      

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="">
        
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid.Resources>
    <ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
      <Grid>
        <Ellipse x:Name="outerCircle" Width="100" Height="100">
          <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
              <GradientStop Offset="0" Color="Blue"/>
              <GradientStop Offset="1" Color="Red"/>
            </LinearGradientBrush>
          </Ellipse.Fill>
        </Ellipse>
        <Viewbox>
          <ContentControl Margin="20" Content="{TemplateBinding Content}"/>
        </Viewbox>
      </Grid>
      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter TargetName="outerCircle" Property="Fill" Value="Orange"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
          <Setter Property="RenderTransform">
            <Setter.Value>
              <ScaleTransform ScaleX=".9" ScaleY=".9"/>
            </Setter.Value>
          </Setter>
          <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Grid.Resources>
  <Button Template="{StaticResource buttonTemplate}">OK</Button>
</Grid>


</Window>

ControlTemplate that Respects More Properties

Posted on by coder
image_pdfimage_print


   
      


<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="">
        
        
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid.Resources>
    <ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
      <Grid>
        <Ellipse x:Name="outerCircle">
          <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
              <GradientStop Offset="0"
                Color="{Binding RelativeSource={RelativeSource TemplatedParent},
                Path=Background.Color}"/>
                <GradientStop Offset="1" Color="Red"/>
              </LinearGradientBrush>
          </Ellipse.Fill>
        </Ellipse>
        <Viewbox>
          <ContentPresenter Margin="{TemplateBinding Padding}"/>
        </Viewbox>
      </Grid>
      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter TargetName="outerCircle" Property="Fill" Value="Orange"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
          <Setter Property="RenderTransform">
            <Setter.Value>
              <ScaleTransform ScaleX=".9" ScaleY=".9"/>
            </Setter.Value>
          </Setter>
          <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Grid.Resources>
  <StackPanel Orientation="Horizontal">
    <Button Template="{StaticResource buttonTemplate}" Height="100" Width="100" FontSize="80" Background="Black"
    Padding="20" Margin="5">1</Button>
  </StackPanel>
</Grid>

</Window>

Use ControlTemplate and event handler

Posted on by coder
image_pdfimage_print


   
  
<Window x:Class="ControlTemplate.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="ControlTemplate" Height="300" Width="300">
  <Window.Resources>
    <ControlTemplate x:Key="customizeButton" TargetType="{x:Type Button}">
      <Grid>
        <Ellipse Width="100" Height="100" Fill="Green" 
          Stroke="Red" StrokeThickness="2"/>
        <ContentPresenter VerticalAlignment="Center"
          HorizontalAlignment="Center"></ContentPresenter>
      </Grid>
    </ControlTemplate>
  </Window.Resources>
  <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Name="button1" Template="{StaticResource customizeButton}"  
      Foreground="White" Click="button1_Click">Press Me!</Button>
  </Grid>
</Window>

//File:Window.xaml.cs
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;


namespace ControlTemplate
{
  public partial class Window1 : System.Windows.Window
  {

    public Window1()
    {
      InitializeComponent();
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
      MessageBox.Show("Hello WPF!");
    }

  }
}

Finding the border that is generated by the ControlTemplate of the Button

Posted on by coder
image_pdfimage_print


   
  

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF" Height="100" Width="160">

    <Window.Resources>
        <ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
            <Border x:Name="border" BorderThickness="3" BorderBrush="DarkGray" Background="LightGray">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="Background" Value="Orange"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <Button x:Name="button" Height="24" HorizontalAlignment="Stretch" Content="Custom Template"
                Template="{StaticResource buttonTemplate}" Click="Button_Click">
        </Button>
    </Grid>
</Window>
//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Border borderInTemplate = (Border)button.Template.FindName("border", button);
            Console.WriteLine(borderInTemplate.GetValue(Border.ActualWidthProperty));
        }
    }
}

Get The actual width of the border in the ControlTemplate

Posted on by coder
image_pdfimage_print


   
  

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF" Height="100" Width="160">

    <Window.Resources>
        <ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
            <Border x:Name="border" BorderThickness="3" BorderBrush="DarkGray" Background="LightGray">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="Background" Value="Orange"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <Button x:Name="button" Height="24" HorizontalAlignment="Stretch" Content="Custom Template"
                Template="{StaticResource buttonTemplate}" Click="Button_Click">
        </Button>
    </Grid>
</Window>
//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Border borderInTemplate = (Border)button.Template.FindName("border", button);
            Console.WriteLine(borderInTemplate.GetValue(Border.ActualWidthProperty));
        }
    }
}