C#WPF - 如何防止图像被拖到画布外面

时间:2015-09-22 06:10:12

标签: c# wpf canvas drag-and-drop drag

我尝试了这个Answer并将其实现到我的代码中,这是我的代码:

XAML

obj["prop1"]["prop2"]["prop3"] . .. .["propn"]

CS

<Window x:Class="DSLayout.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
            xmlns:tk="http://schemas.xceed.com/wpf/xaml/toolkit"
            xmlns:local="clr-namespace:DSLayout"
            Title="MainWindow" Height="720" Width="1280" ResizeMode="NoResize">
<Window.Resources>
    <local:BrushColorConverter x:Key="BrushColorConverter"/>
</Window.Resources>

<Grid>
    <Border BorderBrush="Silver" BorderThickness="1" Name="borderHeader" Margin="12,12,12,636" />
    <Border BorderBrush="Silver" BorderThickness="1" Name="borderEditor" Margin="12,69,850,12">
        <Canvas>
            <Border BorderBrush="Silver" BorderThickness="1" Canvas.Left="24" Canvas.Top="20" Height="59" Name="border1" Width="355"></Border>
            <Canvas Height="59" Canvas.Left="26" Canvas.Top="20"></Canvas>
            <TextBlock Name="textBlock1" Text="Color Palette" Height="31" Width="197" FontSize="22" Canvas.Left="40" Canvas.Top="34" />
            <tk:ColorPicker x:Name="ColorPalette" ColorMode="ColorCanvas" 
                            SelectedColor="{Binding ElementName=Layout, 
                                            Path=Background, 
                                            Converter={StaticResource BrushColorConverter}}" 
                            Canvas.Left="243" Canvas.Top="34" Height="31" />
            <Button Grid.Row="1" Content="Add Image" Click="AddButtonClick" Canvas.Left="24" Canvas.Top="100" Height="43" Width="104" />
            <Border BorderBrush="Silver" BorderThickness="1" Canvas.Left="24" Canvas.Top="227" Height="350" Name="border3" Width="355">
                <Canvas>
                    <TextBlock Canvas.Left="15" Canvas.Top="27" Height="23" Name="textBlock2" Text="X-Pos " FontSize="16" Width="53" />
                    <TextBlock Canvas.Left="174" Canvas.Top="27" FontSize="16" Height="23" Name="textBlock3" Text="Y-Pos " Width="53" />
                    <Label Name="posX" Height="23" Width="83" Canvas.Left="74" Canvas.Top="27" />
                    <Label Name="posY" Canvas.Left="233" Canvas.Top="27" Height="23" Width="83" />
                    <TextBlock Canvas.Left="15" Canvas.Top="68" FontSize="16" Height="23" Name="textBlock4" Text="Width" Width="53" />
                    <TextBlock Canvas.Left="174" Canvas.Top="68" FontSize="16" Height="23" Name="textBlock5" Text="Height" Width="53" />
                    <Label Name="imgHeight" Canvas.Left="74" Canvas.Top="68" Height="23" Width="83" />
                    <Label Name="imgWidth" Canvas.Left="233" Canvas.Top="68" Height="23" Width="83" />
                    <!--<TextBlock Canvas.Left="15" Canvas.Top="169" FontSize="16" Height="23" Name="textBlock4" Text="Height" Width="53" />
                    <TextBlock Canvas.Left="174" Canvas.Top="169" FontSize="16" Height="23" Name="textBlock5" Text="Width" Width="53" />
                    <TextBox Canvas.Left="74" Canvas.Top="169" Height="23" Name="textBox3" Width="83" />
                    <TextBox Canvas.Left="233" Canvas.Top="169" Height="23" Name="textBox4" Width="83" />-->
                </Canvas>
            </Border>
        </Canvas>
    </Border>
    <Border BorderBrush="Silver" BorderThickness="1" Name="borderLayout" Margin="446,69,12,12">
        <Canvas x:Name="Layout" Background="White" AllowDrop="True" ClipToBounds="True"
                MouseLeftButtonDown="MouseLeftButtonDown"
                MouseLeftButtonUp="MouseLeftButtonUp"
                MouseMove="MouseMove">
        </Canvas>
    </Border>
</Grid>

所以我尝试使用ClipToBound =“True”,但如果我拖到画布外面它会丢失。所以我试图使用namespace DSLayout { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } public int imgX { get; set; } public int imgY { get; set; } private void AddButtonClick(object sender, RoutedEventArgs e) { var dialog = new Microsoft.Win32.OpenFileDialog(); dialog.Filter = "Image Files (*.jpg; *.png; *.jpeg; *.gif; *.bmp)|*.jpg; *.png; *.jpeg; *.gif; *.bmp"; if ((bool)dialog.ShowDialog()) { var bitmap = new BitmapImage(new Uri(dialog.FileName)); var image = new Image { Source = bitmap }; this.imgX = bitmap.PixelWidth; this.imgY = bitmap.PixelWidth; Canvas.SetLeft(image, 0); Canvas.SetTop(image, 0); Layout.Children.Add(image); imgHeight.Content = bitmap.PixelHeight; imgWidth.Content = bitmap.PixelWidth; } } private Image draggedImage; private Point mousePosition; private void MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { var image = e.Source as Image; if (image != null && Layout.CaptureMouse()) { mousePosition = e.GetPosition(Layout); draggedImage = image; Panel.SetZIndex(draggedImage, 1); } } private void MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { if (draggedImage != null) { Layout.ReleaseMouseCapture(); Panel.SetZIndex(draggedImage, 0); draggedImage = null; } } private void MouseMove(object sender, MouseEventArgs e) { if (draggedImage != null) { var position = e.GetPosition(Layout); var offset = position - mousePosition; mousePosition = position; if (mousePosition.X > 0 && mousePosition.Y > 0) { Canvas.SetLeft(draggedImage, Canvas.GetLeft(draggedImage) + offset.X); Canvas.SetTop(draggedImage, Canvas.GetTop(draggedImage) + offset.Y); } posX.Content = Canvas.GetLeft(draggedImage); posY.Content = Canvas.GetTop(draggedImage); } } } } 作品来限制它,但不是我想要的,因为如果我将它拖到左边并且我从图像的右边拖动它将会超出画布。

我的想法是让draggedImage成为我的光标所以if (mousePosition.X > 0 && mousePosition.Y > 0)它会阻止draggedImage走出画布。那可能吗?

或任何解决这个问题的简单想法?

编辑:

我尝试使用这个代码,但它的工作原理但并不是很好,因为当我将它拖到画布旁边时,它会像从弹药-1一样移动到0。

if (mousePosition.X > 0 && mousePosition.Y > 0)

1 个答案:

答案 0 :(得分:1)

当您拖动项目时,通过指定Canvas的附加属性Canvas.Left和Canvas.Top来更改它的X和Y位置。因此很容易确保拖动的元素不会被拖到它的面板之外。

double canvasSize = 800;

double newLeft = Canvas.GetLeft(draggedImage) + offset.X;
double newTop = Canvas.GetTop(draggedImage) + offset.Y;

if (newLeft < 0)
    newLeft = 0;
else if (newLeft + draggedImage.ActualWidth > canvasSize)
    newLeft = canvasSize - draggedImage.ActualWidth;

if (newTop < 0)
    newTop = 0;
else if (newTop + draggedImage.ActualHeight > canvasSize)
    newTop = canvasSize - draggedImage.ActualHeight;

Canvas.SetLeft(draggedImage, newLeft);
Canvas.SetTop(draggedImage, newTop);

这将检查您拖动的元素是否超出了画布。