WPF編遊戲系列 之三 物品清單

原文: 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));

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;
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. 再上個效果圖，請大家多拍磚。

待續... ...