How to reference image in controltemplate

Question

I have a usercontrol named ItemGrid with a button with an image, I moved the image to a controltemplate so I would be able to size it right:

<Button x:Name="btnOrder" Click="btnOrder_Click" HorizontalAlignment="Right" Width="48" Height="48" Margin="0,0,0,100">
    <Button.Template>
        <ControlTemplate>
            <Image x:Name="imgOrder" Source="/Images/dark/appbar.food.png" Stretch="None"/>
        </ControlTemplate>
    </Button.Template>
</Button>

In the MainPage I want to set the right image depending on the currently selected them (Dark / Light)

private void detecttheme()
    {
        Visibility v = (Visibility)Resources["PhoneLightThemeVisibility"];
        if (v == System.Windows.Visibility.Visible)
        {
            uri = new Uri("/Images/light/appbar.food.png", UriKind.Relative);
            imgSource = new BitmapImage(uri);
            ItemGrid.imgOrder.Source = imgSource;

        }
        else  ....

That gives me: UserControls.ItemGrid' does not contain a definition for 'imgOrder' after I moved imgOrder to the controltemplate

I've tried to use findname but that gives a nullreference exception too for img

//Use FindName because we cannot directly reference the image because it's in a control template
  Image img = ItemGrid.FindName("imgOrder") as Image;
  img.Source = imgSource;

I also tried putting the findname in the OnApplyTemplate of the control but that doesn't seem to get fired at all?

 public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
         Image i = this.FindName("imgOrder") as Image;
    }

I hope somebody has an answer to this?

Kind regards,

Mike

score 5 · Answer 1 · edited May 23 '17 at 11:51

I think in this case you can find it by using the VisualTreeHelper class - there's a thread on this in WPF here, but in case you don't feel like reading it:

make this method:

            /// <summary>
/// Finds a Child of a given item in the visual tree. 
/// </summary>
/// <param name="parent">A direct parent of the queried item.</param>
/// <typeparam name="T">The type of the queried item.</typeparam>
/// <param name="childName">x:Name or Name of child. </param>
/// <returns>The first parent item that matches the submitted type parameter. 
/// If not matching item can be found, 
/// a null parent is being returned.</returns>
public static T FindChild<T>(DependencyObject parent, string childName)
   where T : DependencyObject
{    
  // Confirm parent and childName are valid. 
  if (parent == null) return null;

  T foundChild = null;

  int childrenCount = VisualTreeHelper.GetChildrenCount(parent);
  for (int i = 0; i < childrenCount; i++)
  {
    var child = VisualTreeHelper.GetChild(parent, i);
    // If the child is not of the request child type child
    T childType = child as T;
    if (childType == null)
    {
      // recursively drill down the tree
      foundChild = FindChild<T>(child, childName);

      // If the child is found, break so we do not overwrite the found child. 
      if (foundChild != null) break;
    }
    else if (!string.IsNullOrEmpty(childName))
    {
      var frameworkElement = child as FrameworkElement;
      // If the child's name is set for search
      if (frameworkElement != null && frameworkElement.Name == childName)
      {
        // if the child's name is of the request name
        foundChild = (T)child;
        break;
      }
    }
    else
    {
      // child element found.
      foundChild = (T)child;
      break;
    }
  }

  return foundChild;
}

and use it to find your image:

Image img = FindChild<Image>(btnOrder, "imgOrder");

Hopefully that works (I'll admit I haven't tested this yet)...and as for why OnApplyTemplate() doesn't work, I believe it's only called if you subclass the Button to make your own Custom button.

How to reference image in controltemplate

1 Answers1

Linked