我需要在WPF图像控件上放置一个可移动的矩形。当用户在移动矩形后单击一个按钮时，它应该给我Rect坐标。
我无法想象这是如此难以做到，但我无法弄明白。找到一些用鼠标绘制矩形然后裁剪图像的例子，但这不是我需要的。
这是我的UserControl的代码，它可以显示图像及其属性。 在图像上应该放置一个可移动的矩形，如上所述。
我有什么想法可以做到这一点？
<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>
为什么我看不到我的完整UserControl代码？当我点击编辑时，我会在文本编辑器中看到它。
答案 0 :(得分：1)
XAML：
<Window x:Class="moveableRectangle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Image Name="Image" Source="bsp.jpg" MouseMove="Image_MouseMove" MouseUp="Rectangle_MouseLeftButtonUp" />
<Rectangle Name="Rect" Width="100" Height="100" Fill="Transparent" Stroke="Red" StrokeThickness="5" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" />
</Grid>
代码背后：
public partial class MainWindow : Window
{
private bool moveRect;
TranslateTransform trans = null;
Point originalMousePosition;
public MainWindow()
{
InitializeComponent();
}
private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
moveRect = true;
originalMousePosition = e.GetPosition(Image);
Rect.IsHitTestVisible = false;
}
private void Image_MouseMove(object sender, MouseEventArgs e)
{
if (moveRect)
{
trans = Rect.RenderTransform as TranslateTransform;
if (trans == null)
{
Rect.RenderTransformOrigin = new Point(0, 0);
trans = new TranslateTransform();
Rect.RenderTransform = trans;
}
trans.Y = -(originalMousePosition.Y - e.GetPosition(Image).Y);
trans.X = -(originalMousePosition.X - e.GetPosition(Image).X);
}
e.Handled = false;
}
private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
moveRect = false;
Rect.IsHitTestVisible = true;
}
}
答案 1 :(得分：0)
我使用了这个简单的XAML：
<Grid Name="grdBoard">
<Image Source="http://lorempixel.com/400/200/sports/" />
<Rectangle Name="rctRectangle" Fill="Transparent" Stroke="Yellow" StrokeThickness="2" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
<Button Content="Get the coordinates" Name="btnGetCoordinates"/>
<TextBlock Name="txtOutput" />
这是移动矩形的代码。在任何时候，通过单击按钮，您可以通过获取边距来获取矩形的位置：
public partial class MainWindow : Window
{
bool IsMouseDown;
public MainWindow()
{
InitializeComponent();
rctRectangle.MouseLeftButtonDown += StartMoveRectangle;
rctRectangle.MouseLeftButtonUp += EndMoveRectangle;
rctRectangle.MouseMove += MoveRectangle;
}
private void GetCoordinates()
{
Thickness margin = rctRectangle.Margin;
double x = margin.Left;
double y = margin.Top;
WriteToOutput("Coordinates are: X = " + x + " and Y = " + y);
}
private void StartMoveRectangle(object sender, EventArgs e)
{
IsMouseDown = true;
}
private void MoveRectangle(object sender, MouseEventArgs e)
{
if (IsMouseDown)
{
Point cursorposition = e.GetPosition(grdBoard);
rctRectangle.Margin = new Thickness(cursorposition.X - (rctRectangle.Width / 2), cursorposition.Y - (rctRectangle.Height / 2), 0, 0);
}
}
private void EndMoveRectangle(object sender, EventArgs e)
{
IsMouseDown = false;
}
private void WriteToOutput(string text)
{
txtOutput.Text = text;
}
}
如果这是你想要的，请告诉我。