I need to place a moveable rectangle on a WPF Image control. When the user clicks a button after moving the rectangle it should give me the Rect coordinates.
I can't imaging this is so hard to do, but I can't figure it out. Found some examples to draw a rectangle with the mouse and then crop the image, but that's not what I need.
Here is the code of my UserControl which can shown an Image and his properties. On the Image there should be placed a moveable rectangle as I described above.
Any ideas how I can accomplish this?
<UserControl x:Class="Test.View.UserControls.PhotoEditorControl"
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"
mc:Ignorable="d"
d:DesignHeight="500"
d:DesignWidth="400"
x:Name="photoEditorControl">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../../Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid Background="Transparent"
Visibility="{Binding ElementName=photoEditorControl,Path=ControlVisibility, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<Grid Name="popupBackground"
Grid.RowSpan="4">
<Grid.Background>
<SolidColorBrush Color="#9995AE"
Opacity="0.3" />
</Grid.Background>
</Grid>
<Border BorderBrush="Black"
Background="WhiteSmoke"
BorderThickness="1"
CornerRadius="15"
DockPanel.Dock="Bottom"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="Black"
Opacity="0.5"
Direction="270"
ShadowDepth="0.7" />
</Border.BitmapEffect>
<Grid Width="380"
Height="450">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="150" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Margin="15,15,15,0"
Background="WhiteSmoke"
Grid.Row="1"
Grid.ColumnSpan="2"
VerticalAlignment="Top"
HorizontalAlignment="Center">
<Border.Effect>
<DropShadowEffect ShadowDepth="3"
Color="LightGray" />
</Border.Effect>
<Image Source="{Binding ElementName=photoEditorControl, Path=Image.MediumUrl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Stretch="Uniform">
</Image>
</Border>
<Grid Grid.Row="2"
Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="150*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<TextBlock Name="textBlock1"
Text="Properties"
Grid.ColumnSpan="2"
HorizontalAlignment="Center"
Style="{StaticResource InfoLabel}" />
<TextBlock Grid.Row="1"
Name="textBlockName"
Text="Filename:"
Style="{StaticResource InfoLabel}" />
<TextBlock Grid.Row="2"
Name="textBlockAlbum"
Text="Original name:"
Style="{StaticResource InfoLabel}" />
<TextBlock Grid.Row="3"
Name="textBlockFilesize"
Text="Filesize:"
Style="{StaticResource InfoLabel}" />
<TextBlock Grid.Row="4"
Name="textBlockSize"
Text="Size:"
Style="{StaticResource InfoLabel}" />
<TextBlock Grid.Row="5"
Name="textBlockSavedDate"
Text="Upload date:"
Style="{StaticResource InfoLabel}" />
<TextBlock Grid.Row="1"
Grid.Column="1"
Name="textBlockNameData"
Margin="4"
Text="{Binding ElementName=photoEditorControl, Path=Image.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Grid.Row="2"
Grid.Column="1"
Name="textBlockOriginalNameData"
Margin="4"
Text="{Binding ElementName=photoEditorControl, Path=Image.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Grid.Row="3"
Grid.Column="1"
Name="textBlockFileSizeData"
Margin="4"
Text="{Binding ElementName=photoEditorControl, Path=Image.FileSize, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Grid.Row="4"
Grid.Column="1"
Name="textBlockSizeData"
Margin="4">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0}x{1}">
<Binding ElementName="photoEditorControl"
Path="Image.Width"
Mode="TwoWay"
UpdateSourceTrigger="PropertyChanged" />
<Binding ElementName="photoEditorControl"
Path="Image.Height"
Mode="TwoWay"
UpdateSourceTrigger="PropertyChanged" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Grid.Row="5"
Grid.Column="1"
Name="textBlockUploadDateData"
Margin="4"
Text="{Binding ElementName=photoEditorControl, Path=Image.DateUploaded, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Grid>
<Button Content="Close"
Grid.Row="3"
Height="30"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="10 5 5 10"
Name="buttonCancel"
Width="75"
Command="{Binding ElementName=photoEditorControl, Path=CloseControlCommand}" />
<Button Content="Done"
Grid.Column="1"
Grid.Row="3"
Height="30"
Margin="5 5 10 10"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Name="buttonDone"
Width="75"
Visibility="Visible" />
</Grid>
</Border>
</Grid>
</UserControl>
Why don I see my full UserControl code? When I vlick edit I do see it in the text editor.