WPF, cannot access a control inside a ControlTemplate

Question

I have the following ControlTemplate:

<UserControl x:Class="WpfSinergoHMIControls.Controlli.ControlButton"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:WpfSinergoHMIControls.Controlli"
         mc:Ignorable="d">

<UserControl.Template>
    <ControlTemplate TargetType="UserControl" x:Name="ControlButtonTemplate">
        <Grid Background="Black" Name="ControlButtonGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="2*" />
            </Grid.RowDefinitions>

            <Label Content="{TemplateBinding Content}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="White" Margin="1,1,1,1" Grid.Row="0"></Label>
            <Viewbox Grid.Row="1" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Ellipse Width="100" Height="100"  Fill="White" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Viewbox>
            <Viewbox Grid.Row="1" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Ellipse Width="100" Height="100" Margin="0" Name="InnerEllipse" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Viewbox>
        </Grid>
    </ControlTemplate>
</UserControl.Template>

and I would like to programmatically access the object called 'InnerEllipse'.

I try doing so with the following line of code:

Ellipse InnerEllipse = (Ellipse) this.Template.FindName("InnerEllipse", this);

which is called inside a property called 'Color' inside the 'ControlButton' class:

public Color Color
{
    set
    {
        Ellipse InnerEllipse = (Ellipse)this.Template.FindName("InnerEllipse", this);
    }
}

the property 'Color' is then initializated when I use the 'UserControl'

<Controlli:ControlButton Height="169" Width="119" Color="DarkGreen"/>

the problem is that the function "FindName" returns me 'null'. I cannot figure out what is missing. Thank you very much!

Answer 1

The issue is that the Color property is set before the template has been applied.

Color should be a dependency property. You could then specify a default value as well as hooking up a PropertyChangedCallback that gets invoked whenever it is changed:

public partial class ControlButton : UserControl
{
    public ControlButton()
    {
        InitializeComponent();
    }

    Ellipse InnerEllipse;
    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        InnerEllipse = (Ellipse)this.Template.FindName("InnerEllipse", this);
    }

    public static readonly DependencyProperty ColorProperty =
         DependencyProperty.Register("Color", typeof(Color),
         typeof(ControlButton), new FrameworkPropertyMetadata(Colors.DarkGreen, new PropertyChangedCallback(OnColorChanged)));

    public Color Color
    {
        get { return (Color)GetValue(ColorProperty); }
        set { SetValue(ColorProperty, value); }
    }

    private static void OnColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ControlButton ctrl = d as ControlButton;
        if (ctrl.InnerEllipse != null)
            ctrl.InnerEllipse.Fill = new SolidColorBrush() { Color = ctrl.Color };
    }
}