在 WPF 中实现 Custom/User 控件

Question

要求：

如图一个矩形控件需要分成五个地区。
应该可以给每个设置背景色 region.(BackgroundBrushProperty)
每个区域都需要实现一个鼠标点击事件（MouseDown事件）

问题

如何在 WPF 中创建这样的控件？
我可以为此目的扩展现有控件吗？
在 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>

祝你好运！

在 WPF 中实现 Custom/User 控件

Implementing Custom/User control in WPF

c#

wpf

user-interface

user-controls

custom-controls