C＃WPF-如何防止圖像被拖到畫布外

Question

我嘗試了這個答案並將其實現到我的代碼中，這是我的代碼：

XAML

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

CS

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

            }
        }


    }
}

所以我嘗試使用ClipToBound =“ True”，但是如果我拖動到畫布之外，它將丟失。 所以我試圖使用if (mousePosition.X > 0 && mousePosition.Y > 0)來限制它的工作，但是我不想要它，因為如果我將其向左拖動並從右側向右拖動，它將超出畫布的范圍圖片。

我的想法是使draggedImage成為我的光標，因此if (mousePosition.X > 0 && mousePosition.Y > 0) ，它將防止draggedImage進入畫布之外。 那有可能做到嗎？

或解決這個問題的任何簡單方法？

編輯：

我嘗試使用此代碼，但效果很好，因為當我將其拖到畫布旁邊時，它會像彈性那樣從-1位置移動到0位置。

if (Canvas.GetLeft(draggedImage) <= 0)
{
    Canvas.SetLeft(draggedImage, 0);
}

if (Canvas.GetTop(draggedImage) <= 0)
{
    Canvas.SetTop(draggedImage, 0);
}

if (Canvas.GetLeft(draggedImage) + this.imgX >= 800)
{
    Canvas.SetLeft(draggedImage, 800 - this.imgX);
}

if (Canvas.GetTop(draggedImage) +this.imgY >= 600)
{
    Canvas.SetTop(draggedImage, 600 - this.imgY);
}

Answer 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);

這將檢查您拖動的元素是否在“畫布”之外。