c# - 制作 NxN tic tac toe GUI wpf c#

Question

我正在 WPF c# 中制作 NxN tic tac toe 游戏。我希望用户输入行数和列数(NxN)，我的代码将生成这些行数和列数。我不明白，如何动态生成那么多的行和列。我已经发布了我的 XAML 代码，有没有办法可以循环我的 XAML 代码？ 谢谢

<Grid x:Name="Container">
    <!-- First here i want to make N columns-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <!-- Here i want to make N rows-->
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Then here i want to add that number of buttons in N x N columns and rows -->
    <Button x:Name="Button0_0" Grid.Row="0" Grid.Column="0" Click="Button_Click"/>
    <Button x:Name="Button0_1" Grid.Row="0" Grid.Column="1" Click="Button_Click" />
    <Button x:Name="Button0_2" Grid.Row="0" Grid.Column="2" Click="Button_Click"/>

    <Button x:Name="Button1_0" Grid.Row="1" Grid.Column="0" Click="Button_Click"/>
    <Button x:Name="Button1_1" Grid.Row="1" Grid.Column="1" Click="Button_Click"/>
    <Button x:Name="Button1_2" Grid.Row="1" Grid.Column="2" Click="Button_Click"/>

    <Button x:Name="Button2_0" Grid.Row="2" Grid.Column="0" Click="Button_Click"/>
    <Button x:Name="Button2_1" Grid.Row="2" Grid.Column="1" Click="Button_Click"/>
    <Button x:Name="Button2_2" Grid.Row="2" Grid.Column="2" Click="Button_Click"/>                                                  
</Grid>

Answer 1

ItemsControl + UniformGrid 作为面板是显示矩形游戏板的不错选择。我已经发布了类似的解决方案( How to create and use matrix of (color) boxes C# WPF )，但它缺少行和列绑定(bind)。这是 TicTacToe 的更详细的示例。

让我们创建 View 模型类:

public class BoardCell : INotifyPropertyChanged
{
    private string _sign;
    private bool _canSelect = true;

    public string Sign
    {
        get { return _sign; }
        set
        {
            _sign = value;
            if (value != null)
                CanSelect = false;
            OnPropertyChanged();
        }
    }

    public bool CanSelect
    {
        get { return _canSelect; }
        set
        {
            _canSelect = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class Board
{
    public int Rows { get; set; }
    public int Columns { get; set; }

    private ObservableCollection<BoardCell> _cells;
    public ObservableCollection<BoardCell> Cells
    {
        get
        {
            if (_cells == null)
                _cells = new ObservableCollection<BoardCell>(Enumerable.Range(0, Rows*Columns).Select(i => new BoardCell()));
            return _cells;
        }
    } 
}

然后创建一个 View :

<Grid x:Name="Container">
    <Grid.DataContext>
        <wpfDemos:Board Rows="8" Columns="8"/>
    </Grid.DataContext>
    <ItemsControl x:Name="Board" ItemsSource="{Binding Path=Cells}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate >
                <UniformGrid Rows="{Binding Path=Rows}" Columns="{Binding Path=Columns}"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Content="{Binding Path=Sign}" 
                        IsEnabled="{Binding Path=CanSelect}"
                        Click="CellClick"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

在代码隐藏中，我们有一种方法可以让 2 个玩家轮流进行移动:

private bool _firstPlayer = true;
private void CellClick(object sender, RoutedEventArgs e)
{
    var cell = (sender as Button).DataContext as BoardCell;
    cell.Sign = _firstPlayer ? "X" : "O";
    _firstPlayer = !_firstPlayer;
    // TODO check winner 
}

为了遵循 MVVM 模式，此方法应包装到命令 ( ICommand ) 中，移至 Board类并通过 Button.Command 附加到 View 绑定(bind)。

总结:逻辑和表示分离。处理数据。让控件根据绑定(bind)和提供的模板生成其内容。