Wednesday, October 27, 2010

WPF - Find Control in ControlTemplate in WPF

In some scenario that requires we have to find a control within a ControlTemplate. To do that, you use Template.FindName method.

Let see how to find control from ControlTemplate.

Step 1
Create a WPF application and give a solution name as SolFindControlInControlTemplate.

Step 2
Add a button control on window,it is look like this




<Window x:Class="SolFindControlInControlTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Find Control in Control Template" Height="350" Width="525">
 <Grid>
        <Button Content="ChangeColor" Height="43" HorizontalAlignment="Left" Margin="155,126,0,0" Name="btnColor" VerticalAlignment="Top" Width="208"/>
    </Grid>
</Window>

Step 3
Create a simple ControlTemplate for button control,it is look like this

    <Window.Resources>

        <ControlTemplate x:Key="BtnControlTemplate" TargetType="Button">
            
            <Grid>
                
                <Rectangle x:Name="ButtonRecTangle" Stroke="Black" StrokeThickness="3" RadiusX="10" RadiusY="10" Fill="Orange">
                     
                </Rectangle>

                <!--For Display Text(Content) in button -->
                <Viewbox>
                    <!--set the button text which user will define on button-->
                    <ContentControl Content="{TemplateBinding Button.Content}"></ContentControl>

                </Viewbox>

            </Grid>
            
        </ControlTemplate>

    </Window.Resources>

Step 4
Apply ControlTemplate on button control,it is look like this

    <Grid>
        <Button Content="ChangeColor" Height="43" HorizontalAlignment="Left" Margin="155,126,0,0" Name="btnColor" VerticalAlignment="Top" Width="208" Template="{StaticResource BtnControlTemplate}" Click="btnColor_Click" />

    </Grid>

Step 5
Find a rectangle control in the ControlTemplate of btnColor and change the rectangle color,it is look like

  private void btnColor_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                // Find a rectangle control within a ControlTemplate by using Template.FindName method
                Rectangle RecTangleObj =(Rectangle) btnColor.Template.FindName("ButtonRecTangle", btnColor);

                // Fill the rectangle color
                RecTangleObj.Fill = System.Windows.Media.Brushes.Red;        
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);   
            }
        }

Full Code

1. XAML Code

<Window x:Class="SolFindControlInControlTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Find Control in Control Template" Height="350" Width="525">
    
    <Window.Resources>

        <ControlTemplate x:Key="BtnControlTemplate" TargetType="Button">
            
            <Grid>
                
                <Rectangle x:Name="ButtonRecTangle" Stroke="Black" StrokeThickness="3" RadiusX="10" RadiusY="10" Fill="Orange">
                     
                </Rectangle>

                <!--For Display Text(Content) in button -->
                <Viewbox>
                    <!--set the button text which user will define on button-->
                    <ContentControl Content="{TemplateBinding Button.Content}"></ContentControl>

                </Viewbox>

            </Grid>
            
        </ControlTemplate>

    </Window.Resources>  
    
    <Grid>
        <Button Content="ChangeColor" Height="43" HorizontalAlignment="Left" Margin="155,126,0,0" Name="btnColor" VerticalAlignment="Top" Width="208" Template="{StaticResource BtnControlTemplate}" Click="btnColor_Click" />
    </Grid>
</Window>

2. Code behind

using System;
using System.Collections.Generic;
using System.Linq;
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.Navigation;
using System.Windows.Shapes;

namespace SolFindControlInControlTemplate
{

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btnColor_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                // Find a rectangle control within a ControlTemplate by using Template.FindName method
                Rectangle RecTangleObj =(Rectangle) btnColor.Template.FindName("ButtonRecTangle", btnColor);

                // Fill the rectangle color
                RecTangleObj.Fill = System.Windows.Media.Brushes.Red;        
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);   
            }
        }

       
    }
}

Run the project.

Download
Download Source Code

1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from .Net Core Training in Chennai. or learn thru .Net Core Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
    or Es6 Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete