0

我需要在 WPF Image 控件上放置一个可移动的矩形。当用户在移动矩形后单击按钮时，它应该给我 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 代码？当我 vlick 编辑时，我确实在文本编辑器中看到了它。

4

2 回答 2

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;
    }


}
于 2013-06-19T15:11:03.163 回答
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" />

这是移动矩形的代码。任何时候，通过点击按钮，都可以通过获取margin来获取矩形的位置：

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;
    }
}

让我知道这是否是你想要的。

于 2013-06-19T15:28:36.820 回答