WPF 中的棋盘

Question

多年来我一直使用 Winforms 进行开发，现在我想切换到 WPF 并制作一个棋盘。不幸的是我不知道从哪里开始。使用 WPF 让我非常不确定，我感觉自己又像个菜鸟了。有人可以概述一下基本设计吗？我想我会从 8x8 网格开始，使用矩形作为正方形，使用图像作为碎片。进而？我错过了什么吗？

编辑：这只是关于用户界面；幕后发生的事情是没有问题的。

Answer 1

标准网格的替代方案是使用 UniformGrid (msdn 链接）。

它可能更适合这个（在我看来），因为它总是给你相同大小的单元格。

使用ala：

<UniformgGrid Columns="8" Rows="8">
    <Control1/>
    <Control2/>
    <Control3/>
</UniformGrid>

这些答案中的任何一个都会给你你想要的结果。

Answer 2

Chess 似乎非常适合 WPF 的 MVVM 代码模式。

模型将成为国际象棋游戏的逻辑，听起来你可以控制它。
View 将呈现游戏的 WPF 外观，ViewModel 将表示游戏，视图可以在其中进行数据绑定。

对于视图，使用 UniformGrid 的 ItemsControl 将适用于游戏的 2D 表示。

这是一个开始（未选中）

<ItemsControl ItemsSource="{Binding TheGame}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="8" Rows="8" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ContentControl Background="{Binding SquareColor}">
                <Path Data="{Binding PieceShape}" Fill="{Binding PieceColor}" />
            </ContentControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

为了使上述工作正常，您的 ViewModel 将需要有一个 ObservableCollection 并且 ChessGridItem 应该是一个 DependencyObject公开 SquareColor、PieceColor 和 PieceShape 的 DependencyProperties

Answer 3

您可以使用 XAML 或代码来实现 UI，并获得相同的结果。我最近开始使用 WPF，我推荐 XAML 方法。一开始有点吓人，但很快就会熟悉。对我来说，这感觉像是一种精心设计的 UI 设计方法，而现在 WinForms 看起来就像是把 .NET 压垮了之前的一切。

您可以从拖放方法开始，但如果您像我一样，您将很快使用 XAML 工作并使用设计界面进行视觉检查。

这可能不是我会做的，但如果您查看过任何 XML 或 HTML，您可能会猜到这将显示什么，即使您以前从未查看过任何 XAML：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="100" />
    </Grid.ColumnDefinitions>

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

    <Border Grid.Column="0" Grid.Row="0" Background="Black" />
    <Border Grid.Column="2" Grid.Row="0" Background="Black" />
    <Border Grid.Column="1" Grid.Row="1" Background="Black" />
    <Border Grid.Column="3" Grid.Row="1" Background="Black" />
</Grid>

Answer 4

不，我认为你根本没有错过任何东西。这是一个好的开始。

创建一个网格，然后添加列和行。然后将一个矩形放入交替的单元格（或图像）中。我将为矩形的填充颜色和描边创建一个样式。这允许您在一个位置（样式定义）更改背景颜色，而不是为需要更改的每个单元格更改背景颜色。

这是一个使用网格的非常基本的板。请注意，我没有对行和列的大小进行硬编码。这将使一切保持比例并允许董事会扩展。

    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Name="A1"  />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Rectangle Name="rectangle1"
               Stroke="Black" Fill="Aquamarine" />
</Grid>

Answer 5

我同意这里发布的所有示例，但我认为您有点困惑，因为 WPF 中“数据”的“模板”模型与 WinForms 的纯紧密绑定 UI + 数据模型完全不同。

从 WinForm 到 WPF 的学习曲线并不大，我自己花了两年时间才开始使用 WPF 进行编码，因为我总是更喜欢代码隐藏文件。

我最好的猜测是，首先您必须研究 WPF 的“逻辑树”和“视觉树”概念，在这里您将了解 WPF UI 元素和非 UI 元素（数据对​​象）如何轻松地在 XAML 中连接，而无需编写任何 C#。

另一个最重要的概念是“触发器”。

您需要创建的只是“数据”对象，这些对象将是您的国际象棋项目（King、Horse）等，派生自一个实现 IPropertyChanged 接口的公共基类，并且它们将实现“CanBeKilled”、“IsPossibleTarget”等可以简单绑定的属性在列表框的 ItemTemplate 中，列表框将保存当前选择。

ListBox 的项目面板模板可以是上述示例之一，并且在 MouseOver 上，您可以根据上述属性突出显示颜色或边框。您所要做的就是在选择更改时更新 ListBox 中每个项目的布尔属性。

我刚刚阅读了您的编辑部分，我相信 WPF 中的隐藏代码一定是不同且简单的，因为与 WinForms 相比，设计良好的 WPF 的隐藏代码将比 WinForm 少 90%。