c# - WPF - 项目模板的网格用法

Question

我想放置绑定(bind)到我的自定义字段类型 KField 的按钮，我需要将 5 个按钮放置在 X 形状中 - 所以在 3x3 网格上，我需要按钮4条边，在中间。我有以下字段类型:

public class KField : ViewModelBase // ViewModelBase is a custom abstract INotifyPropertyChanged
{
    private char _text;
    private bool _isEnabled;
    private int _x;
    private int _y;    

    public int X { get { return _x; } set { _x = value; OnPropertyChanged(); } }
    public int Y { get { return _y; } set { _y = value; OnPropertyChanged(); } }
    public bool IsEnabled
    {
        get { return _isEnabled; }
        set
        {
            if (_isEnabled != value)
            {
                _isEnabled = value;
                OnPropertyChanged();
            }
        }
    }

    public char Text
    {
        get { return _text; }
        set
        {
            if (_text != value)
            {
                _text = value;
                OnPropertyChanged();
            }
        }
    }

    public DelegateCommand ClickCommand { get; set; }
}

我使用一个 _fields 变量，它包含所有按钮并绑定(bind)到 View :

_fields = new ObservableCollection<KField>();
_fields.Add(new KField { Text = _model.ModelFields[0], IsEnabled = true, X = 0, Y = 0});
_fields.Add(new KField { Text = _model.ModelFields[1], IsEnabled = false, X = 0, Y = 2 });
_fields.Add(new KField { Text = _model.ModelFields[2], IsEnabled = false, X = 1, Y = 1 });
_fields.Add(new KField { Text = _model.ModelFields[3], IsEnabled = true, X = 2, Y = 0 });
_fields.Add(new KField { Text = _model.ModelFields[4], IsEnabled = false, X = 2, Y = 2 });

我当然创建了 Fields 属性:

    public ObservableCollection<KField> Fields
    {
        get { return _fields; }
        set
        {
            if (_fields != value)
            {
                _fields = value;
                OnPropertyChanged();
            }
        }
    }

我正在使用这个 XAML:

<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="376" Width="534">
    <Grid x:Name="myGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <ItemsControl ItemsSource="{Binding Fields}" Margin="0,0,0,35">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Grid.Column="{Binding Y}" Grid.Row="{Binding X}" BorderThickness="0.3 " BorderBrush="Black" Command="{Binding ButtonPressed}" Content="{Binding Text}" IsEnabled="{Binding IsEnabled}">
                    </Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

但是，这会将我所有的按钮放入网格的第一个单元格中。文本和启用/禁用状态工作正常，因此绑定(bind)确实发生了，但它忽略了所有 X 和 Y 属性。我错过了什么？我怎样才能按照我想要的方式放置这些按钮？谢谢!

Answer 1

问题是，ItemsControl 与网格是分开的。如果我在 ItemsControl 中放置一个网格，并在 ItemContainerStyle 中提供坐标绑定(bind)，它就可以正常工作:

<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="376" Width="534">
    <ItemsControl x:Name="MyItems" ItemsSource="{Binding Fields}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button BorderThickness="0.3 " BorderBrush="Black" Command="{Binding ButtonPressed}" Content="{Binding Text}" IsEnabled="{Binding IsEnabled}">
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Style.Setters>
                    <Setter Property="Grid.Row" Value="{Binding X}" />
                    <Setter Property="Grid.Column" Value="{Binding Y}" />
                </Style.Setters>
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Window>