Add A label to a resizable an movable image

Question

I have a project that does multi-touch...image moving, resizing etc. These images are loaded on the fly, so I don't know how many may load onto the canvas. The moving and resizing has all been worked out. However, I would like to put a label on each image.
When I place the Image usercontrol nto a container and make a label, I lose all ability to resize, which is crucial.
Here is the Picture controls XAML:
<UserControl x:Class="DocumentHandlingTouch.Picture"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Image Source="{Binding Path=ImagePath}" Stretch="Fill" Width="Auto" Height="Auto" RenderTransformOrigin="0.5, 0.5">
<Image.RenderTransform>
<TransformGroup>
<RotateTransform Angle="{Binding Path=Angle}"></RotateTransform>
<ScaleTransform ScaleX="{Binding Path=ScaleX}" ScaleY="{Binding Path=ScaleY}"></ScaleTransform>
<TranslateTransform X="{Binding Path=X}" Y="{Binding Path=Y}"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</UserControl>
Here is some of the Picture controls class...the portion i use to set the image path:
public partial class Picture : UserControl
public Picture()
InitializeComponent();
DataContext = this;
public string ImagePath
get { return (string)GetValue(ImagePathProperty); }
set { SetValue(ImagePathProperty, value); }
public string ImageName
get { return (string)GetValue(ImageNameProperty); }
set { SetValue(ImageNameProperty, value); }
public static readonly DependencyProperty ImageNameProperty =
DependencyProperty.Register("ImageName", typeof(string), typeof(Picture), new UIPropertyMetadata(""));
the complete code for what I'm doing can be found on OneDrive at DocumentHandling.
Again, I am not looking for any help in getting these images to move or resize, what I'm looking for is a way to get a label onto these images that still allows them to be moved or resized.

Answer 1

You could just add the following recursive FindParent method that will find the Picture parent element of the Image in the visual tree and make a small change to the FindPicture method in MainWindow.xaml.cs:
private Picture FindPicture(Point location)
HitTestResult result = VisualTreeHelper.HitTest(_canvas, location);
if (result == null)
return null;
Image image = result.VisualHit as Image;
if (image == null)
return null;
return FindParent<Picture>(image);
private static T FindParent<T>(DependencyObject dependencyObject) where T : DependencyObject {
var parent = VisualTreeHelper.GetParent(dependencyObject);
if (parent == null) return null;
var parentT = parent as T;
return parentT ?? FindParent<T>(parent);
..and use the following XAML markup for Picture.xaml user control:
<UserControl x:Class="DocumentHandlingTouch.Picture"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform Angle="{Binding Path=Angle}"></RotateTransform>
<ScaleTransform ScaleX="{Binding Path=ScaleX}" ScaleY="{Binding Path=ScaleY}"></ScaleTransform>
<TranslateTransform X="{Binding Path=X}" Y="{Binding Path=Y}"/>
</TransformGroup>
</Grid.RenderTransform>
<Image Source="{Binding Path=ImagePath}" Stretch="Fill" Width="Auto" Height="Auto" RenderTransformOrigin="0.5, 0.5">
</Image>
<TextBlock Text="{Binding ImagePath}" VerticalAlignment="Bottom"/>
</Grid>
</UserControl>
Then it should work as expected.
Hope that helps.
Please remember to mark helpful posts as answer and please start a new thread if you have a new question.