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. 再上个效果图，请大家多拍砖。



待续... ...