作为一个样式如何使其在WPF使用的例子,,让我们看一下TTT简单的实现,如示例5-1。
示例5-1
<!-- Window1.xaml -->
<Window
x:Class="TicTacToe.Window1"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
Text="TicTacToe">
<!-- the black background lets the tic-tac-toe -->
<!-- crosshatch come through on the margins -->
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Margin="0,0,2,2" Grid.Row="0" Grid.Column="0" x:Name="cell00" />
<Button Margin="2,0,2,2" Grid.Row="0" Grid.Column="1" x:Name="cell01" />
<Button Margin="2,0,0,2" Grid.Row="0" Grid.Column="2" x:Name="cell02" />
<Button Margin="0,2,2,2" Grid.Row="1" Grid.Column="0" x:Name="cell10" />
<Button Margin="2,2,2,2" Grid.Row="1" Grid.Column="1" x:Name="cell11" />
<Button Margin="2,2,0,2" Grid.Row="1" Grid.Column="2" x:Name="cell12" />
<Button Margin="0,2,2,0" Grid.Row="2" Grid.Column="0" x:Name="cell20" />
<Button Margin="2,2,2,0" Grid.Row="2" Grid.Column="1" x:Name="cell21" />
<Button Margin="2,2,0,0" Grid.Row="2" Grid.Column="2" x:Name="cell22" />
</Grid>
</Window>
这个grid的外观上排列了一组9个按钮在一个3X3栅格的TTT单元中,在按钮上使用了页面空白为了TTT的交叉线阴影。对游戏逻辑的一个简单的实现,在xaml后台代码中,如示例5-2所示。
示例5-2
// Window1.xaml.cs
![](/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
namespace TicTacToe
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
public partial class Window1 : Window
{
// Track the current player (X or O)
string currentPlayer;
![](/Images/OutliningIndicators/InBlock.gif)
// Track the list of cells for finding a winner etc.
Button[] cells;
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
public Window1( )
{
InitializeComponent( );
![](/Images/OutliningIndicators/InBlock.gif)
// Cache the list of buttons and handle their clicks
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.cells = new Button[]
{ this.cell00, this.cell01,
};
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
foreach( Button cell in this.cells )
{
cell.Click += cell_Click;
}
![](/Images/OutliningIndicators/InBlock.gif)
// Initialize a new game
NewGame( );
}
![](/Images/OutliningIndicators/InBlock.gif)
// Wrapper around the current player for future expansion,
// e.g. updating status text with the current player
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
string CurrentPlayer
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
get
{ return this.currentPlayer; }
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
set
{ this.currentPlayer = value; }
}
![](/Images/OutliningIndicators/InBlock.gif)
// Use the buttons to track game state
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
void NewGame( )
{
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
foreach( Button cell in this.cells )
{
cell.Content = null;
}
CurrentPlayer = "X";
}
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
void cell_Click(object sender, RoutedEventArgs e)
{
Button button = (Button)sender;
![](/Images/OutliningIndicators/InBlock.gif)
// Don't let multiple clicks change the player for a cell
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if( button.Content != null )
{ return; }
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
// Set button content
button.Content = CurrentPlayer;
![](/Images/OutliningIndicators/InBlock.gif)
// Check for winner or a tie
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if( HasWon(this.currentPlayer) )
{
MessageBox.Show("Winner!", "Game Over");
NewGame( );
return;
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else if( TieGame( ) )
{
MessageBox.Show("No Winner!", "Game Over");
NewGame( );
return;
}
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
// Switch player
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if( CurrentPlayer == "X" )
{
CurrentPlayer = "O";
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
CurrentPlayer = "X";
}
}
![](/Images/OutliningIndicators/InBlock.gif)
// Use this.cells to find a winner or a tie
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
bool HasWon(string player)
{
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
bool TieGame( )
{
}
}
}
我们的简单TTT逻辑使用字符串代表玩家,使用按钮来跟踪游戏状态。当点击任意一个按钮时,我们将内容设置为字符串,用来象征当前玩家以及转换玩家。当游戏结束的时候,每一个按钮上的内容都会被清除。游戏中的截图如图5-1。
图5-1
![](/images/cnblogs_com/jax/501.gif)
注意到图5-1中,grid的背景来自页面的空白。这些空白差不多使grid看上去像一个可绘制的TTT木板(虽然我们将来会做的更好)。然而,如果我们真的指望模仿一个手绘的游戏,我们已经对按钮上的字体大小做了设置,但并没匹配到线条的厚度。
一种修复这个问题的方法是为每一个按钮对象设置字体和宽度,如示例5-3。
示例5-3
<Button FontSize="32" FontWeight="Bold"
x:Name="cell00" />
<Button FontSize="32" FontWeight="Bold"
x:Name="cell01" />
<Button FontSize="32" FontWeight="Bold"
x:Name="cell02" />
<Button FontSize="32" FontWeight="Bold"
x:Name="cell10" />
<Button FontSize="32" FontWeight="Bold"
x:Name="cell11" />
<Button FontSize="32" FontWeight="Bold"
x:Name="cell12" />
<Button FontSize="32" FontWeight="Bold"
x:Name="cell20" />
<Button FontSize="32" FontWeight="Bold"
x:Name="cell21" />
<Button FontSize="32" FontWeight="Bold"
x:Name="cell22" />
依照我的视觉敏感性,今天,虽然这样做使得X的和O的外观更好,一旦我以后想改动它,我就要负责在9个独立的地方改变这些属性,这是重复性的努力——违反了我的编码敏感性。我宁愿重制我的决定——为了以后的维护,将我的TTT单元的外观放在一个共同的地方。这是样式派得上用场的地方。