在按钮中绘制4个象限，并通过绑定更改每个象限的背景

Question

如何将WPF按钮拆分为4个象限，并对其进行自定义，以便可以为每个象限分别设置背景颜色绑定()和绑定路径，以分离属性。

如果按钮也有属性来控制每个象限是否可点击，或者每个象限只作为一个整体引发单击事件，那就太好了。

Answer 1

假设您正在讨论绑定，那么您将使用MVVM模式。

在View中，创建一个按钮，并在按钮的内容中添加4个矩形。

<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="150" Height="150" Command="{Binding RectangleButtonClick}">
            <Button.Content>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="75"/>
                        <RowDefinition Height="75"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="75"/>
                        <ColumnDefinition Width="75"/>
                    </Grid.ColumnDefinitions>
                    <Rectangle x:Name="SecondQuad" Grid.Row="0" Grid.Column="0" Fill="{Binding SecondQuadColor}" />
                    <Rectangle x:Name="FirstQuad" Grid.Row="0" Grid.Column="1" Fill="{Binding FirstQuadColor}"/>
                    <Rectangle x:Name="ThirdQuad" Grid.Row="1" Grid.Column="0" Fill="{Binding ThirdQuadColor}"/>
                    <Rectangle x:Name="FourthQuad" Grid.Row="1" Grid.Column="1" Fill="{Binding FourthQuadColor}"/>
                </Grid>
            </Button.Content>
        </Button>

在你的ViewModel里

public class MyViewModel
{
    private SolidColorBrush _FirstQuadColor;
    public SolidColorBrush FirstQuadColor
    { 
       get { return _FirstQuadColor; }
       set { _FirstQuadColor = value; OnPropertyChanged("FirstQuadColor"); }
    }

private SolidColorBrush _SecondQuadColor;
public SolidColorBrush SecondQuadColor
{
   get { return _SecondQuadColor; }
   set { _SecondQuadColor = value; OnPropertyChanged("SecondQuadColor"); }
}

private SolidColorBrush _ThirdQuadColor;
public SolidColorBrush ThirdQuadColor
{
  get { return _ThirdQuadColor; }
  set { _ThirdQuadColor = value; OnPropertyChanged("ThirdQuadColor"); }
}

private SolidColorBrush _FourthQuadColor;
public SolidColorBrush FourthQuadColor
{
   get { return _FourthQuadColor; }
   set { _FourthQuadColor = value; OnPropertyChanged("FourthQuadColor"); }
}

private ICommand _RectangleButtonClick;
public ICommand RectangleButtonClick
{
   get { return _RectangleButtonClick; }
   set { _RectangleButtonClick = value; OnPropertyChanged("RectangleButtonClick"); }
}

public MyViewModel()
{
   RectangleButtonClick = new DelegateCommand(RectangleButtonClick_Execute);
   FirstQuadColor = Brushes.Red;
   SecondQuadColor = Brushes.Green;
   ThirdQuadColor = Brushes.Blue;
   FourthQuadColor = Brushes.Yellow;
}

    void RectangleButtonClick_Execute()
    {
        var directlyOver = Mouse.DirectlyOver;
        if (directlyOver is Rectangle)
        {
            var selectedRectangle = (directlyOver as Rectangle);

            switch (selectedRectangle.Name)
            {
                case "FirstQuad" : Console.Write("First Quad clicked"); break;
                case "SecondQuad": Console.Write("Second Quad clicked"); break;
                case "ThirdQuad": Console.Write("Third Quad clicked"); break;
                case "FourthQuad": Console.Write("Fourth Quad clicked"); break;
            }

        }
    }

}

Answer 2

实际上有很多不同的方法可以做到这一点，最好的方法将取决于您的实现的具体情况。我将在这里提供一个方法，但要知道这绝不是最好的方法(特别是如果您正在做MVVM，这是您应该做的)。

<Button x:Name="MyButton" Margin="93,92,68,77" >
        <Button.Template>
            <ControlTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100*" />
                        <ColumnDefinition Width="100*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="100*" />
                        <RowDefinition Height="100*" />
                    </Grid.RowDefinitions>
                    <Rectangle Grid.Column="0" Grid.Row="0" Fill="{Binding Brush00}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MouseDown="UserControl_MouseDown_1"/>
                    <Rectangle Grid.Column="0" Grid.Row="1" Fill="{Binding Brush01}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MouseDown="UserControl_MouseDown_2"/>
                    <Rectangle Grid.Column="1" Grid.Row="0" Fill="{Binding Brush10}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MouseDown="UserControl_MouseDown_3"/>
                    <Rectangle Grid.Column="1" Grid.Row="1" Fill="{Binding Brush11}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MouseDown="UserControl_MouseDown_4" />
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>

然后在后面的代码中：

public partial class MyParentWindow : Window
{
    public MyParentWindow()
    {
        InitializeComponent();
        this.MyButton.DataContext = new ButtonModel();
    }

    private void UserControl_MouseDown_1(object sender, RoutedEventArgs e)
    {
    }

    private void UserControl_MouseDown_2(object sender, RoutedEventArgs e)
    {
    }

    private void UserControl_MouseDown_3(object sender, RoutedEventArgs e)
    {
    }

    private void UserControl_MouseDown_4(object sender, RoutedEventArgs e)
    {
    }
}

public class ButtonModel
{
    public Brush Brush00 { get { return Brushes.Red; } }
    public Brush Brush01 { get { return Brushes.Green; } }
    public Brush Brush10 { get { return Brushes.Blue; } }
    public Brush Brush11 { get { return Brushes.Yellow; } }
}