WPF编游戏系列 之三 物品清单

       本篇将介绍如何通过C#自动生成游戏界面，主要演示点击“My Shop”后如何显示所有物品清单。其中数据源来自于Access 2007，当然肯定会用到System.Data.OleDb。

1. 在“My Shop” Image中加入MouseLeftButtonDown事件。

<Image Source="image/market.png" Width="125" Height="125" Cursor="Hand"
Tag="My Shop"  Canvas.Left="150" Canvas.Top="13"
MouseEnter="Image_BlurEffect_MouseEnter"
MouseLeave="Image_BlurEffect_MouseLeave"
MouseLeftButtonDown="Image_MouseLeftButtonDown" >
</Image>

2. 创建一个数据查询函数，方便以后使用（要使用System.Data.OleDb）。在这里还想提个问题，有没有更好的查询并返回查询数据的方法？

//sqlc用来计算数据行数，sql用来查询，并返回一个object数组
private object[,] Data_Query(string sqlc, string sql)
{
//链接Access 2007的Provider要使用ACE.OLEDB.12.0
OleDbConnection aConnection =
new OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=xmarket.accdb");
OleDbCommand aCommand = new OleDbCommand();
aConnection.Open();
aCommand.Connection = aConnection;
//计算行数
aCommand.CommandText = sqlc;
OleDbDataReader countReader = aCommand.ExecuteReader();
countReader.Read();
int num = countReader.GetInt32(0);
countReader.Close();
//查询数据
aCommand.CommandText = sql;
OleDbDataReader queryReader = aCommand.ExecuteReader();
//获取查询列数
int fieldNum = queryReader.FieldCount;
//创建return数组
object[,] queryRes = new object[num, fieldNum];
int i = 0;
//为数组写入数据
while (queryReader.Read())
{
for (int j = 0; j < fieldNum; j++)
{
queryRes[i, j] = queryReader.GetValue(j);
}
i++;
}
queryReader.Close();
aConnection.Close();
return queryRes;
}

3. 接下来就要进行Image_MouseLeftButtonDown事件的编写了：

private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
… …
}

3.1. 由于当初设计是将所有界面都显示在queryGrid（关于queryGrid请参考《WPF编游戏系列 之一 布局设计》）组件中，当点击“My Home”时queryGrid里可能会有其他界面内容，所以要先对queryGrid进行清空。

//清空queryGrid中所有行与列
queryGrid.RowDefinitions.Clear();
queryGrid.ColumnDefinitions.Clear();
//清空queryGrid中所有子组件
queryGrid.Children.Clear();
//设定queryGrid与queryScrollViewer的间距
queryGrid.Margin = new Thickness(20);

3.2. 判断哪个图标被点击了

//将sender定义为Image
Image image = sender as Image;
//获取Image Tag
string imageTag = image.Tag.ToString();
//imageTag为“My Shop”就要干活了
if (imageTag == "My Shop")
{… …}

 

3.2.1. 调整queryScrollViewer背景颜色、queryBorder边框颜色，设定queryGrid行数与列数

//个人感觉Brushes.SystemColor的颜色有限，而且那些已知颜色的名称实在看不懂，
//所以通过Color.FromRgb设定颜色。
queryScrollViewer.Background = new SolidColorBrush(Color.FromRgb(255, 204, 102));
queryBorder.BorderBrush = new SolidColorBrush(Color.FromRgb(255, 102, 51));
//SQL
string sqlc = "select count(*) from goods where available=1 and typeid=1";
string sql = "select * from goods where available=1 and typeid=1";
//查询物品
object[,] res = Data_Query(sqlc, sql);
//查询物品个数
int num = res.Length / 7;
//由于每行要放置5个物品，所以重新定义下行数
int rows = Convert.ToInt32(Math.Ceiling(Convert.ToDouble(num) / 5));

//为queryGrid添加rows行
for (int ri = 0; ri < rows; ri++)
{
RowDefinition rd = new RowDefinition();
//设定行高
rd.Height = new GridLength(210);
queryGrid.RowDefinitions.Add(rd);
}

//为queryGrid添加5列
for (int ci = 0; ci < 5; ci++)
{
ColumnDefinition cd = new ColumnDefinition();
queryGrid.ColumnDefinitions.Add(cd);
}

3.2.2. 在3.2.1中已经知道有num个物品，下面就要将他们都加入到queryGrid中。

//rowNum和colNum用于定义物品在queryGrid的行、列位置
int rowNum = 0;
int colNum = 0;

//创建物品单元
for(inti = 0; i < num; i++)
{
//首先每个物品都有一个Border
BordergoodsBorder = newBorder();
//定义Border的样式
goodsBorder.Background = newSolidColorBrush(Color.FromRgb(255, 255, 204));
goodsBorder.BorderBrush = newSolidColorBrush(Color.FromRgb(255, 102, 51));
goodsBorder.BorderThickness = newThickness(3);
goodsBorder.CornerRadius = newCornerRadius(5);
goodsBorder.Width = 150; goodsBorder.Height = 195;
//设定Border的位置，每行5个物品
if(colNum == 5)
{
rowNum++;
colNum = 0;
}
//为Border设定行、列属性
goodsBorder.SetValue(Grid.RowProperty, rowNum);
goodsBorder.SetValue(Grid.ColumnProperty, colNum);
//将Border加入到queryGrid中
queryGrid.Children.Add(goodsBorder);
colNum++;
//由于物品的信息想要垂直显示，创建一个StackPanel
StackPanel goodsStackPanel = new StackPanel();
//设定StackPanel显示方式
goodsStackPanel.Orientation = Orientation.Vertical;
goodsStackPanel.HorizontalAlignment = HorizontalAlignment.Center;
goodsStackPanel.Margin = new Thickness(5);
//将StackPanel加入到Border中
goodsBorder.Child = goodsStackPanel;

//第一个要显示物品图片，定义Image
Image goodsImage = new Image();
//创建Image Source
BitmapImage bitImage = new BitmapImage();
bitImage.BeginInit();
//将数据库的图片名称加入到UriSource
bitImage.UriSource = newUri("image/shop/"+ res[i, 2].ToString(), UriKind.Relative);
bitImage.EndInit();
goodsImage.Source = bitImage;
goodsImage.Height = 80;
goodsImage.Width = 80;
goodsImage.Margin = new Thickness(5);
//将Image加入到StackPanel中
goodsStackPanel.Children.Add(goodsImage);
//显示物品价格Textblock
TextBlock goodsPrice = new TextBlock();
goodsPrice.Text = "Price: $" + res[i, 6].ToString();
goodsPrice.Margin = new Thickness(5);
//将物品数量加入到StackPanel中
goodsStackPanel.Children.Add(goodsPrice);
//显示物品数量Textblock
TextBlock goodsQty = new TextBlock();
goodsQty.Text = "Quantity: " + res[i, 5].ToString();
//由于后续还要修改数量值，所以将其Name在queryGrid中注册
goodsQty.Name = "gQty" + res[i, 0].ToString();
//在注册前先判断Name是否已经注册过 objectfindTextObj = queryGrid.FindName("gQty" + res[i, 0].ToString());
if(findTextObj != null)
{
//若注册过则先取消注册
queryGrid.UnregisterName("gQty" + res[i, 0].ToString());
}
queryGrid.RegisterName(goodsQty.Name, goodsQty);
goodsQty.Margin = new Thickness(5);
//将物品数量加入到queryGrid中
goodsStackPanel.Children.Add(goodsQty);
}

 

3.3. 将queryGrid显示出来

queryCanvas.Visibility = Visibility.Visible;

4. goods表结构截图



5. 再上个效果图，请大家多拍砖。



待续... ...