使用XAML的动态网格行数和列数

Question

我正在使用此博客文章来实现动态网格。

但是，当我更改全局类变量的行数和列数时，似乎无法正常工作。

我在上面的链接中使用GridHelpers.cs类，我的UserControl xaml看起来像这样

<UserControl x:Class="WPFPurpleButtonTest.InstrumentUserControl"
             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:WPFPurpleButtonTest"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Label x:Name="colourName" Content="PURPLE" HorizontalAlignment="Left" Height="93" Margin="284,88,0,0" VerticalAlignment="Top" Width="243" FontWeight="Bold" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="50" Foreground="#FFDC00FF"/>
        <Button x:Name="testButton" Content="Button" HorizontalAlignment="Left" Margin="354,234,0,0" VerticalAlignment="Top" Width="75" Click="TestButton_Click"/>
        <Label x:Name="label" Content="Row Size" HorizontalAlignment="Left" Margin="222,296,0,0" VerticalAlignment="Top" Foreground="#FFDC00FF"/>
        <Label x:Name="label_Copy" Content="Column Size" HorizontalAlignment="Left" Margin="438,296,0,0" VerticalAlignment="Top" Foreground="#FFDC00FF"/>
        <Button x:Name="createGrid" Content="Create Grid" HorizontalAlignment="Left" Margin="357,348,0,0" VerticalAlignment="Top" Width="75" Click="CreateGrid_Click"/>
        <TextBox x:Name="rowSizeText" HorizontalAlignment="Left" Height="23" Margin="296,299,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="62"/>
        <TextBox x:Name="columnSizeText" HorizontalAlignment="Left" Height="23" Margin="528,300,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="62"/>
        <Grid local:GridHelpers.RowCount="{Binding RowCount}"
      local:GridHelpers.ColumnCount="{Binding ColumnCount}" ></Grid>
    </Grid>
</UserControl>

我的CS代码如下所示：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WPFPurpleButtonTest
{
    /// <summary>
    /// Interaction logic for InstrumentUserControl.xaml
    /// </summary>
    public partial class InstrumentUserControl : UserControl
    {
        // We should put this in a separate user control, but for now for testing
        // let's put the grid configuration in here
        public int RowCount { get; set; }
        public int ColumnCount { get; set; }

        public InstrumentUserControl()
        {
            InitializeComponent();
            DataContext = this;
        }

        private void TestButton_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("HELLO!", "Greetings", MessageBoxButton.OK, MessageBoxImage.Information);
        }

        private void CreateGrid_Click(object sender, RoutedEventArgs e)
        {
            if (int.TryParse(rowSizeText.Text, out int rowResult))
            {
                RowCount = rowResult;
            }

            if (int.TryParse(columnSizeText.Text, out int columnResult))
            {
                ColumnCount = rowResult;
            }
        }
    }
}

当我在文本框中键入行数和列数并按我的按钮时，如果我出了错，任何帮助将不胜感激，但是不会调用GridHelpers行数和列数更改事件。

我也将属性更改为此，但是在change事件的GridHelpers类中， obj作为InstrumentUserControl而不是Grid因此它只是返回。

public int RowCount
{
    get { return (int)GetValue(GridHelpers.RowCountProperty); }
    set { SetValue(GridHelpers.RowCountProperty, value); }
}
public int ColumnCount
{
    get { return (int) GetValue(GridHelpers.ColumnCountProperty); }
    set { SetValue(GridHelpers.ColumnCountProperty, value); }
}

Answer 1

您必须在ViewModel类上实现INotifyPropertyChanged。 在您的情况下，您已设置“ DataContext = this”，因此必须在UserControl类上实现INotifyPropertyChanged。

我或多或少地定义了最小可能的实现...

using System.Windows;
using System.ComponentModel;

namespace GridHelperTest
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window, INotifyPropertyChanged
  {
    public int RowCount { get; set; }
    public int ColumnCount { get; set; }

    public MainWindow ( )
    {
      InitializeComponent ();
      DataContext = this ;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void TestButton_Click (object sender, RoutedEventArgs e)
    {
      MessageBox.Show ( "HELLO!", "Greetings", MessageBoxButton.OK, MessageBoxImage.Information );
    }

    private void CreateGrid_Click (object sender, RoutedEventArgs e)
    {
      if (int.TryParse ( rowSizeText.Text, out int rowResult ))
      {
        RowCount = rowResult;
        OnPropertyChanged("RowCount");
      }

      if (int.TryParse ( columnSizeText.Text, out int columnResult ))
      {
        ColumnCount = rowResult;
        OnPropertyChanged("ColumnCount");
      }
    }
    protected virtual void OnPropertyChanged(string propertyName = null)
    {
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
  }
}

设置属性后，调用OnPropertyChanged。 通常，您可能希望使用属性设置器方法来执行此操作。

为了测试它，我在网格中定义了一些彩色矩形。 它们最初彼此重叠，但是在设置行数和列数之后，它们被放置在单独的单元格中。

<Window x:Class="GridHelperTest.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:GridHelperTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="900" Width="800">

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
      <Label x:Name="colourName" Content="PURPLE" HorizontalAlignment="Left" Height="93" Margin="284,88,0,0" VerticalAlignment="Top" Width="243" FontWeight="Bold" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="50" Foreground="#FFDC00FF"/>
      <Button x:Name="testButton" Content="Button" HorizontalAlignment="Left" Margin="354,234,0,0" VerticalAlignment="Top" Width="75" Click="TestButton_Click"/>
      <Label x:Name="label" Content="Row Size" HorizontalAlignment="Left" Margin="222,296,0,0" VerticalAlignment="Top" Foreground="#FFDC00FF"/>
      <Label x:Name="label_Copy" Content="Column Size" HorizontalAlignment="Left" Margin="438,296,0,0" VerticalAlignment="Top" Foreground="#FFDC00FF"/>
      <Button x:Name="createGrid" Content="Create Grid" HorizontalAlignment="Left" Margin="357,348,0,0" VerticalAlignment="Top" Width="75" Click="CreateGrid_Click"/>
      <TextBox x:Name="rowSizeText" HorizontalAlignment="Left" Height="23" Margin="296,299,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="62"/>
      <TextBox x:Name="columnSizeText" HorizontalAlignment="Left" Height="23" Margin="528,300,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="62"/>

    </Grid>
    <Grid Grid.Row="1"
          local:GridHelpers.RowCount="{Binding RowCount}"
          local:GridHelpers.ColumnCount="{Binding ColumnCount}">
      <Rectangle Grid.Row="0" Grid.Column="0" Fill="Red" Width="100" Height="100"/>
      <Rectangle Grid.Row="0" Grid.Column="1" Fill="Green" Width="100" Height="100"/>
      <Rectangle Grid.Row="1" Grid.Column="0" Fill="Blue" Width="100" Height="100"/>
      <Rectangle Grid.Row="1" Grid.Column="1" Fill="Yellow" Width="100" Height="100"/>

    </Grid>
  </Grid>
</Window>

这与您的XAML并不完全相同，因为我是在Window而不是UserControl中定义它的。