在WPF圖像控件上放置一個可移動的矩形

我需要在WPF圖像控件上放置一個可移動的矩形。當用戶在移動矩形後點擊按鈕時，它應該給我Rect座標。在WPF圖像控件上放置一個可移動的矩形

我不能想象這是如此難以做到，但我無法弄清楚。找到一些例子用鼠標繪製一個矩形然後裁剪圖像，但那不是我需要的。

這裏是我的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代碼？當我編輯時，我會在文本編輯器中看到它。

來源

2013-06-19 PitAttack76

你只需要知道如何獲得矩形的位置，或者是否需要移動矩形？ – Terry

@Derry我需要能夠將圖像上的矩形移動到我想要的位置，在圖像內部。 – PitAttack76

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-19 15:11:03 GenericTeaCup

這就是我需要它做的。只有2個問題。我怎樣才能避免將圖像拖到圖像邊界外（網格外）？我的意思是當矩形的頂部碰到圖像的頂部時，它應該停止移動。其次，在Rectangle_MouseLeftButtonUp事件中，Rect對象的_rect屬性保存圖像上矩形的座標，是否正確？謝謝！ – PitAttack76

您可以將網格更改爲畫布，然後使用Canvas.Top，Canvas.Left等...屬性。這會給你矩形座標，並且可以防止矩形的XY座標大於畫布 – GenericTeaCup

我用這個簡單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; 
    } 
}

讓我知道，如果這是你想要的。

來源

2013-06-19 15:28:36 Terry

感謝您的努力！但我更關注一個C＃解決方案。 – PitAttack76

@ PitAttack76：我改變了我的例子。將來，通過在您的問題中提供標籤來指明您想要哪種語言的答案。這可以防止人們爲您創建兩種解決方案。 – Terry

在WPF圖像控件上放置一個可移動的矩形

回答

相關問題