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

待续... ...