Реализация пользовательского управления/пользователя в WPF

Question

Требование:

1. Как показано на изображении необходим прямоугольный контроль должен быть разделен на пять областей .
2. Он должен быть в состоянии установить цвет фона для каждого области. (BackgroundBrushProperty)
3. необходимо реализовать для каждого региона Событие мыши. (MouseDown событие)

Вопрос

1. Как создать такой элемент управления в WPF?
2. Могу ли я использовать существующие средства контроля для этой цели?
3. Какая уловка при создании таких фигур в WPF?

Я думаю, что создание формы с несколькими регионами является большой проблемой в этом требовании.

Может ли кто-нибудь помочь мне реализовать это? Существуют ли онлайн-учебные пособия или статьи? Предоставление примера будет высоко оценено !!

.

Answer 1

Вы можете расширить UserControl, как показано ниже.

.xaml:

<UserControl x:Class="WpfApplication.TileBlock" 
    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" 
    xmlns:local="clr-namespace:WpfApplication" 
    mc:Ignorable="d" 
    d:DesignHeight="300" d:DesignWidth="200" 
    x:Name="self" SnapsToDevicePixels="True"> 
    <Viewbox Stretch="Fill"> 
    <Grid Width="40" Height="50"> 
     <Polygon Points="0,0 10,10 10,40 0,50" Fill="{Binding ElementName=self, Path=LeftBlockBackground}" Stroke="Black" StrokeThickness="0.5" MouseDown="LeftBlock_MouseDown" /> 
     <Polygon Points="0,0 10,10 30,10 40,0" Fill="{Binding ElementName=self, Path=TopBlockBackground}" Stroke="Black" StrokeThickness="0.5" MouseDown="TopBlock_MouseDown" /> 
     <Polygon Points="40,0 30,10 30,40 40,50" Fill="{Binding ElementName=self, Path=RightBlockBackground}" Stroke="Black" StrokeThickness="0.5" MouseDown="RightBlock_MouseDown" /> 
     <Polygon Points="0,50 10,40 30,40 40,50" Fill="{Binding ElementName=self, Path=BottomBlockBackground}" Stroke="Black" StrokeThickness="0.5" MouseDown="BottomBlock_MouseDown" /> 
     <Rectangle Width="20" Height="30" Fill="{Binding ElementName=self, Path=CentralBlockBackground}" Stroke="Black" StrokeThickness="0.5" MouseDown="CentralBlock_MouseDown" /> 
    </Grid> 
    </Viewbox> 
</UserControl> 

Code-за .cs:

public partial class TileBlock : UserControl { 
    public TileBlock() { 
    InitializeComponent(); 
    } 

    //Dependency properties for backgrounds 
    public Brush LeftBlockBackground { 
    get { return (Brush)GetValue(LeftBlockBackgroundProperty); } 
    set { SetValue(LeftBlockBackgroundProperty, value); } 
    } 
    public static readonly DependencyProperty LeftBlockBackgroundProperty = 
     DependencyProperty.Register("LeftBlockBackground", typeof(Brush), typeof(TileBlock), new PropertyMetadata(Brushes.Transparent)); 
    //... repeat for Top, Right, Bottom and Central 

    public event MouseButtonEventHandler LeftBlockMouseDown; 
    private void LeftBlock_MouseDown(object sender, MouseButtonEventArgs e) { 
    if (LeftBlockMouseDown != null) LeftBlockMouseDown(this, e); 
    e.Handled = true; 
    } 
    //... repeat for Top, Right, Bottom and Central 

    //... repeat for MouseEnter, MouseLeave, MouseMove etc. if necessary 
} 

Теперь вы можете поместить этот UserControl Ваши приложения:

<Window x:Class="WpfApplication2.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:WpfApplication2" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
    <local:TileBlock LeftBlockBackground="Yellow" Width="80" Height="100" LeftBlockMouseDown="TileBlock_LeftBlockMouseDown" /> 
    </Grid> 
</Window> 

удачи !