Bind XAML Image Width and Height to my class property

Question

I have a custom WPF control that has a XAML Control template applied to it.

The XAML Control template has an image whos width and height I want to bind to a property in my control class.

<Image Height="24" Width="24"  Source="{Binding Path=IconSource}" Margin="2" />

I want to bind the Height and Width to a property of my class similar to how I am binding the onclick event of a button I have like so:

MyClass Code

#region Constructor        
public MyClass()
{ 
    CommandBindings.Add(new CommandBinding(ButtonClickCommand, ButtonClickCommand_Executed));
}
#endregion

#region Public
public static readonly RoutedUICommand ButtonClickCommand= new RoutedUICommand();
#endregion

private void ChangeViewCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
    //do something
}

XAML

<Button Name="MyButton" Command="{x:Static local:MyClass.ButtonClickCommand}">
    <Image Source="{DynamicResource MyImage}"  Width="20" Height="20"/>
</Button>

How do I do something similar for the Image Height and Width?? I will have a property that I want to modify and have this reflected in the XAML.

You already bind the `Source` property, so what stops you from doing the same with `Width` and `Height`? — Clemens, Jan 12 '17 at 11:53
The IconSource is a property from an object that is binded/added to an ItemsControl I did not include that part of the XAML. I want to bind WIdth and Height to a property of MyCLass and not an object added to the ItemsCOntrol. — Harry Boy, Jan 12 '17 at 11:56
Then do something similar to `Command="{x:Static local:MyClass.ButtonClickCommand}"`, e.g. `Width="{x:Static local:MyClass.ImageWidth}"`. Please explain the role of MyClass. Is it just a set of static configuration parameters? — Clemens, Jan 12 '17 at 11:59
You mean MyClass is a WPF UserControl? And it should have settable properties like e.g. `ImageWidth` and `ImageHeight`? — Clemens, Jan 12 '17 at 12:08
Why is it such a big problem to show all the relevant details here? E.g, the declaration of MyClass, is it derived directly from Control? Then the two XAML parts. On the first you write that it's part of a ControlTemplate, why not show the whole template declaration? And what is the role of the second XAML, is it also part of a ControlTemplate? It's hard to help you when you don't tell us what you actually have. — Clemens, Jan 12 '17 at 12:37

score 1 · Answer 1 · answered Jan 12 '17 at 13:31

If the Image element is a child element of the control you could bind to a property of parent control using a RelativeSource:

<Image Source="{DynamicResource MyImage}"  Width="{Binding YourWidth, RelativeSource={RelativeSource AncestorType=local:MyClass}}" 
           Height="{Binding YourHeight, RelativeSource={RelativeSource AncestorType=local:MyClass}}" />

Of course you must also add the YourWidth and YourHeight properties or whatever you choose to call them to your control class. The type of the properties should be double:

public static readonly DependencyProperty YourWidthProperty =
     DependencyProperty.Register("YourWidth", typeof(double),
     typeof(MyClass), new FrameworkPropertyMetadata(0.0));

public double YourWidth
{
    get { return (double)GetValue(YourWidthProperty); }
    set { SetValue(YourWidthProperty, value); }
}

score 1 · Answer 2 · edited May 23 '17 at 10:29

Well, the only changes you need to your XAML are these:

<Image Height="{Binding ImageHeight}" Width="{Binding ImageWidth}"  Source="{Binding Path=IconSource}" Margin="2" />

Then all you have to do is create two propertyes on MyClass:

public double ImageWidth { get; set; }
public double ImageWidth { get; set; }

Just don't forget to set your window DataContext to MyClass and implement INotifyPropertyChanged interface on it!

Bind XAML Image Width and Height to my class property

2 Answers2