Как разделить картинку (WPF C#)&

Question

Подскажите как разделить картинку(программно) на прямоугольники как показано на картинке.(Рамки это border'ы). Часть фоновой картинки должна быть привязана к бордеру который находится над этой областью и при удалении/перемещении элемента картинка также удалялась/перемещалась.

https://ru.stackoverflow.com/a/863379/218063 – Андрей NOP Dec 19 '20 at 15:41 — Андрей NOP, Dec 19 '20 at 15:41

VladD · Accepted Answer · 2020-12-19T20:06:02.420

Вам вовсе не нужно делить картинку. Вы просто кладёте ваш рисунок в фон, а перемещающиеся части реализуете при помощи UserControl-ов.

Давайте реализуем эту идею.

У меня получилась вот такая разметка:

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Test"
        Title="Test" SizeToContent="WidthAndHeight">
    <Canvas Height="384" Width="512">
        <Image Height="384" Width="512" Source="Resources/img.jpg"/>
        <Rectangle Canvas.Left="10"  Canvas.Top="10"  Height="100" Width="150" Fill="DarkGray"/>
        <Rectangle Canvas.Left="180" Canvas.Top="10"  Height="100" Width="150" Fill="DarkGray"/>
        <Rectangle Canvas.Left="350" Canvas.Top="10"  Height="100" Width="150" Fill="DarkGray"/>
        <Rectangle Canvas.Left="10"  Canvas.Top="140" Height="100" Width="150" Fill="DarkGray"/>
        <Rectangle Canvas.Left="180" Canvas.Top="140" Height="100" Width="150" Fill="DarkGray"/>
        <Rectangle Canvas.Left="350" Canvas.Top="140" Height="100" Width="150" Fill="DarkGray"/>
        <Rectangle Canvas.Left="10"  Canvas.Top="270" Height="100" Width="150" Fill="DarkGray"/>
        <Rectangle Canvas.Left="180" Canvas.Top="270" Height="100" Width="150" Fill="DarkGray"/>
        <Rectangle Canvas.Left="350" Canvas.Top="270" Height="100" Width="150" Fill="DarkGray"/>
        <local:ImagePart Canvas.Left="20"  Canvas.Top="20"  Height="100" Width="150"
                         OffsetX="-10"  OffsetY="-10"  Image="Resources/img.jpg"/>
        <local:ImagePart Canvas.Left="180" Canvas.Top="10"  Height="100" Width="150"
                         OffsetX="-180" OffsetY="-10"  Image="Resources/img.jpg"/>
        <local:ImagePart Canvas.Left="350" Canvas.Top="10"  Height="100" Width="150"
                         OffsetX="-350" OffsetY="-10"  Image="Resources/img.jpg"/>
        <local:ImagePart Canvas.Left="10"  Canvas.Top="140" Height="100" Width="150"
                         OffsetX="-10"  OffsetY="-140" Image="Resources/img.jpg"/>
        <local:ImagePart Canvas.Left="180" Canvas.Top="140" Height="100" Width="150"
                         OffsetX="-180" OffsetY="-140" Image="Resources/img.jpg"/>
        <local:ImagePart Canvas.Left="350" Canvas.Top="140" Height="100" Width="150"
                         OffsetX="-350" OffsetY="-140" Image="Resources/img.jpg"/>
        <local:ImagePart Canvas.Left="10"  Canvas.Top="270" Height="100" Width="150"
                         OffsetX="-10"  OffsetY="-270" Image="Resources/img.jpg"/>
        <local:ImagePart Canvas.Left="180" Canvas.Top="270" Height="100" Width="150"
                         OffsetX="-180" OffsetY="-270" Image="Resources/img.jpg"/>
        <local:ImagePart Canvas.Left="350" Canvas.Top="270" Height="100" Width="150"
                         OffsetX="-350" OffsetY="-270" Image="Resources/img.jpg"/>
    </Canvas>
</Window>

и такое определение ImagePart:

<UserControl x:Class="Test.ImagePart"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Border Margin="-1" BorderThickness="1" BorderBrush="Black">
        <Canvas
            DataContext="{Binding RelativeSource={RelativeSource FindAncestor,
                                  AncestorType=UserControl}}"
            ClipToBounds="True">
            <Image Source="{Binding Image}"
                   Canvas.Left="{Binding OffsetX}" Canvas.Top="{Binding OffsetY}"/>
        </Canvas>
    </Border>
    <UserControl.Effect>
        <DropShadowEffect Color="DarkGray"/>
    </UserControl.Effect>
</UserControl>

и code-behind

public partial class ImagePart : UserControl
{
    public ImagePart()
    {
        InitializeComponent();
    }
public ImageSource Image
{
    get =&gt; (ImageSource)GetValue(ImageProperty);
    set =&gt; SetValue(ImageProperty, value);
}

public static readonly DependencyProperty ImageProperty =
    DependencyProperty.Register(nameof(Image), typeof(ImageSource), typeof(ImagePart));

public int OffsetX
{
    get =&gt; (int)GetValue(OffsetXProperty);
    set =&gt; SetValue(OffsetXProperty, value);
}

public static readonly DependencyProperty OffsetXProperty =
    DependencyProperty.Register(nameof(OffsetX), typeof(int), typeof(ImagePart));

public int OffsetY
{
    get =&gt; (int)GetValue(OffsetYProperty);
    set =&gt; SetValue(OffsetYProperty, value);
}

public static readonly DependencyProperty OffsetYProperty =
    DependencyProperty.Register(nameof(OffsetY), typeof(int), typeof(ImagePart));

}

В главном окне на Canvas'е лежат: фоновая картинка, 9 серых прямоугольников, которые «вырезают» на ней кусочки, и 9 UserControl'ов, представляющих собой движущиеся части картинки.

У ImagePart я добавил три dependency property: картинка, и смещение картинки в UserControl'е по X и по Y.

В каталог Resources я положил картинку img.jpg. Размер картинки 512 × 384, и все константы в коде подогнаны под этот размер. Если в вашем коде размер картинки не фиксирован, вам прижётся перевычислять размеры (либо в code-behind, либо при помощи layout manager'а).

Вот что получилось:

Левый верхний кусочек я специально поместил немного в стороне, чтобы было видно, что он отдельно.

Как обеспечить перемещение кусочков, можно посмотреть, например, здесь.

Как разделить картинку (WPF C#)&

1 Answers1