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

代码隐藏 .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>

祝你好运！