Simple Custom Button

image_pdfimage_print


   
  
<Window x:Class="ControlTemplates.SimpleCustomButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="SimpleCustomButton" Height="410" Width="400">
  <Window.Resources>
    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
      <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="2"
       Background="Red" TextBlock.Foreground="White" Name="Border">
        <Grid>
          <Rectangle Name="FocusCue" Visibility="Hidden" Stroke="Black"
           StrokeThickness="1" StrokeDashArray="1 2"
           SnapsToDevicePixels="True" ></Rectangle>
          <ContentPresenter RecognizesAccessKey="True"
         Margin="{TemplateBinding Padding}"></ContentPresenter>
        </Grid>
      </Border>
      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter TargetName="Border" Property="Background" Value="Red" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
          <Setter TargetName="Border" Property="Background" Value="IndianRed" />
          <Setter TargetName="Border" Property="BorderBrush" Value="DarkKhaki" />
        </Trigger>
        <Trigger Property="IsKeyboardFocused" Value="True">
          <Setter TargetName="FocusCue" Property="Visibility" Value="Visible" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
          <Setter TargetName="Border" Property="TextBlock.Foreground" Value="Gray" />
          <Setter TargetName="Border" Property="Background" Value="MistyRose" />
        </Trigger>

      </ControlTemplate.Triggers>
    </ControlTemplate>

  </Window.Resources>
  <StackPanel Margin="10">
    <Button Template="{StaticResource ButtonTemplate}" Click="Clicked" Name="cmdOne">
      A Simple Button with a Custom Template
    </Button>
    <Button Template="{StaticResource ButtonTemplate}" IsEnabled="False" Click="Clicked" Name="cmdFour">
      A Disabled Button
    </Button>
  </StackPanel>
</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 ControlTemplates
{

    public partial class SimpleCustomButton : System.Windows.Window
    {

        public SimpleCustomButton()
        {
            InitializeComponent();
        }

        private void Clicked(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("You clicked " + ((Button)sender).Name);
        }

    }
}

   
    
     


Custom Shaped Button

image_pdfimage_print


   
  
<Window x:Class="ControlTemplates.SimpleShapedButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Shaped Button" Height="510" Width="600">
  <Window.Resources>
    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}" >      
        <Grid>          
          <Path Name="Border" Stroke="Red" StrokeThickness="2" Stretch="Fill">
            <Path.Fill>            
                <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3" >
                  <GradientStop Color="Red" Offset="0" />
                  <GradientStop Color="Blue" Offset="1" />
                </RadialGradientBrush>            
            </Path.Fill>
            <Path.Data>
              <CombinedGeometry GeometryCombineMode="Union">
                <CombinedGeometry.Geometry1>                  
                  <EllipseGeometry Center="70 20" RadiusX="50" RadiusY="25"></EllipseGeometry>
                </CombinedGeometry.Geometry1>
                <CombinedGeometry.Geometry2>
                  <RectangleGeometry Rect="100 0 150 30"></RectangleGeometry>                  
                </CombinedGeometry.Geometry2>                
              </CombinedGeometry>
            </Path.Data>
          </Path>
        <Rectangle Name="FocusCue" Visibility="Hidden" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" SnapsToDevicePixels="True" ></Rectangle>
          <Border Margin="5,10,5,10">
            <ContentPresenter  Name="Content" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" TextBlock.Foreground="White"></ContentPresenter>
          </Border>
        </Grid>
      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter TargetName="Border" Property="Fill" Value="DarkRed" />
        </Trigger>                
        <Trigger Property="IsPressed" Value="True">
          <Setter TargetName="Border" Property="Fill" Value="IndianRed" />
          <Setter TargetName="Border" Property="Stroke" Value="DarkKhaki" />
        </Trigger>
        <Trigger Property="IsKeyboardFocused" Value="True">
          <Setter TargetName="FocusCue" Property="Visibility" Value="Visible"></Setter>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
          <Setter TargetName="Content" Property="TextBlock.Foreground" Value="Gray"></Setter>
          <Setter TargetName="Border" Property="Fill" Value="MistyRose"></Setter>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Window.Resources>
  <StackPanel Width="150" HorizontalAlignment="Left">
    <Button Template="{StaticResource ButtonTemplate}" Click="Clicked" Name="cmdOne">A Simple Button
    </Button>
     <Button Template="{StaticResource ButtonTemplate}" IsEnabled="False" Click="Clicked" Name="cmdFour">
      <StackPanel>
        <Label>sfsdfsf</Label>
      </StackPanel>
      
    </Button>
  </StackPanel>
</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 ControlTemplates
{
    public partial class SimpleShapedButton : System.Windows.Window
    {
        public SimpleShapedButton()
        {
            InitializeComponent();
        }
        private void Clicked(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("You clicked " + ((Button)sender).Name);
        }
    }
}

   
    
     


Set Delay and Interval for RepeatButton

image_pdfimage_print


   
  

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="CustomSpinButtonApp" Height="124" Width="280" WindowStartupLocation="CenterScreen">
  <StackPanel>
    <RepeatButton Name ="repeatAddValueButton"
      Delay ="200" Interval ="1" Click ="repeatAddValueButton_Click" Content = "+"/>
   
    <Label Name ="lblCurrentValue" Background ="LightGray" Height ="30" Width = "40"
      VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="15"/>

    <RepeatButton Name ="repeatRemoveValueButton"
      Delay ="200" Interval ="1" Click ="repeatRemoveValueButton_Click" Content = "-"/>
  </StackPanel>
</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 WpfApplication1
{
  public partial class MainWindow : System.Windows.Window
  {
    private int currValue = 0;

    public MainWindow()
    {
      InitializeComponent();
      lblCurrentValue.Content = currValue;
    }
    protected void repeatAddValueButton_Click(object sender, RoutedEventArgs e)
    {
      currValue++;
      lblCurrentValue.Content = currValue;
    }
    protected void repeatRemoveValueButton_Click(object sender, RoutedEventArgs e)
    {
      currValue--;
      lblCurrentValue.Content = currValue;
    }
  }
}

   
    
     


A simple template for a round button

image_pdfimage_print


   
  
      
<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ControlTemplates" Height="300" Width="300" WindowStartupLocation="CenterScreen">
    <Window.Resources>
    <Style x:Key ="roundButtonTemplate" TargetType ="{x:Type Button}">
      <Setter Property ="Foreground" Value ="Black"/>
      <Setter Property ="FontWeight" Value ="Bold"/>
      <Setter Property ="Template">
      <Setter.Value>
        <ControlTemplate TargetType ="{x:Type Button}">
          <Grid>
            <Ellipse Name ="OuterRing" Width ="75" Height ="75" Fill ="DarkGreen"/>
            <Ellipse Name ="InnerRing" Width ="60" Height ="60" Fill ="MintCream"/>
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property ="IsMouseOver" Value ="True">
              <Setter TargetName ="OuterRing" Property ="Fill" Value ="MediumSeaGreen"/>
            </Trigger>
            <Trigger Property ="IsPressed" Value ="True">
              <Setter TargetName ="OuterRing" Property ="Height" Value ="90"/>
              <Setter TargetName ="OuterRing" Property ="Width" Value ="90"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
      </Style>
  </Window.Resources>
    <Button Name ="myButton"
      Style ="{StaticResource roundButtonTemplate}"
      Click ="myButton_Click">
      Click!
    </Button>
</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 WpfApplication1
{
  public partial class MainWindow : System.Windows.Window
  {
    public MainWindow()
    {
      InitializeComponent();
    }
    protected void myButton_Click(object sender, RoutedEventArgs args)
    {
      MessageBox.Show("Clicked!");
    }
  }
}

   
    
     


Load style defined in Xaml and apply to the Button

image_pdfimage_print


   
  

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WpfApplication1" Height="231" Width="544" WindowStartupLocation="CenterScreen">
  <Window.Resources>
    <Style x:Key ="TiltStyle" TargetType = "{x:Type Button}">
      <Setter Property = "RenderTransform">
        <Setter.Value>
          <RotateTransform Angle = "30"/>
        </Setter.Value>
      </Setter>
    </Style>
    <Style x:Key ="GreenStyle" TargetType = "{x:Type Button}">
      <Setter Property = "Background" Value ="Green"/>
      <Setter Property = "Foreground" Value ="Yellow"/>
      <Setter Property ="FontSize" Value ="15" />
    </Style>
    <Style x:Key ="MouseOverStyle" BasedOn ="{StaticResource GreenStyle}" TargetType = "{x:Type Button}">
      <Style.Triggers>
        <Trigger Property ="IsMouseOver" Value ="True">
          <Setter Property ="FontSize" Value ="20" />
          <Setter Property ="Foreground" Value ="Black" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>

  <StackPanel>
    <ListBox Name ="lstStyles" Height ="60" Background = "Yellow"
        SelectionChanged ="comboStyles_Changed" />
    <Button Name="btnMouseOverStyle" Grid.Column="1"
      Height="40" Width="100" Click ="btnMouseOverStyle_Click">My Button</Button>
  </StackPanel>
</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 WpfApplication1
{
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();

      lstStyles.Items.Add("TiltStyle");
      lstStyles.Items.Add("GreenStyle");
      lstStyles.Items.Add("MouseOverStyle");
    }

    protected void comboStyles_Changed(object sender, RoutedEventArgs args)
    {
      System.Windows.Style currStyle = (System.Windows.Style)FindResource(lstStyles.SelectedValue);
      this.btnMouseOverStyle.Style = currStyle;
    }

    protected void btnMouseOverStyle_Click(object sender, RoutedEventArgs args)
    {
      MessageBox.Show("Clicked");
    }
  }
}

   
    
     


Nested Button content

image_pdfimage_print


   
  
<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WpfApplication1" Height="300" Width="300" WindowStartupLocation="CenterScreen">
  <StackPanel>
    <Button Name="btnClickMe" Height="75" Width = "250" Click ="btnClickMe_Clicked">
      <StackPanel Orientation ="Horizontal">
        <Label Height="50" FontSize ="20">Fancy Button!</Label>
        <Canvas Height ="50" Width ="100" >
          <Ellipse Name = "outerEllipse" Fill ="Green" Height ="25" 
                   MouseDown ="outerEllipse_MouseDown"
                   PreviewMouseDown ="outerEllipse_PreviewMouseDown"
                   Width ="50" Cursor="Hand" Canvas.Left="25" Canvas.Top="12"/>
          <Ellipse Name = "innerEllipse" Fill ="Yellow" Height = "15" Width ="36"
                        Canvas.Top="17" Canvas.Left="32"/>
        </Canvas>
      </StackPanel>
    </Button>
  </StackPanel>
</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 WpfApplication1
{
  public partial class MainWindow : System.Windows.Window
  {
    public MainWindow()
    {
      InitializeComponent();
    }

    public void btnClickMe_Clicked(object sender, RoutedEventArgs e)
    {
      Console.WriteLine("Button Click event fired!");
    }

    public void outerEllipse_MouseDown(object sender, RoutedEventArgs e)
    {
      Console.WriteLine("MouseDown event fired!");
      e.Handled = false;
    }

    public void outerEllipse_PreviewMouseDown(object sender, RoutedEventArgs e)
    {
      Console.WriteLine("PreviewMouseDown event fired!");
      e.Handled = false;
    }
  }
}

   
    
     


Button PreviewMouseLeftButtonDown action and MouseLeftButtonDown action

image_pdfimage_print


   
  

<Window x:Class="TunnelingBubbling.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TunnelingBubbling">
  
    <Grid MouseLeftButtonDown="MouseDownGrid"
          PreviewMouseLeftButtonDown="PreviewMouseDownGrid"
      Width="300" Height="300">

    <Button PreviewMouseLeftButtonDown="PreviewMouseDownButton"
      MouseLeftButtonDown="MouseDownButton"
      Click="MyClickEvent"
      Name="btnGo">

      <TextBox MouseLeftButtonDown="MouseLeftButtonDown"
        PreviewMouseLeftButtonDown="PreviewMouseLeftButtonDown"
        Width="200" Height="30" Name="textBox1">
      </TextBox>
    </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;
using System.Diagnostics;

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

        public Window1()
        {
            InitializeComponent();
        }

        private void PreviewMouseDownGrid(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("PreviewMouseDownGrid");
        }

        private void PreviewMouseDownButton(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("PreviewMouseDownButton");
        }

        private void PreviewMouseLeftButtonDown(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("PreviewMouseLeftButtonDown");
        }

        private void MyClickEvent(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("MyClickEvent");
        }

        private void MouseLeftButtonDown(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("MouseLeftButtonDown");
        }

        private void MouseDownButton(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("MouseDownButton");
        }

        private void MouseDownGrid(object sender, RoutedEventArgs e)
        {
            Debug.WriteLine("MouseDownGrid");
        }

    }
}