C#進階 WPF基礎一 XAML控制元件基礎、佈局
一、控制元件模型
WPF的控制元件與WinForm類似。區別在於WPF的控制元件可以用XAML手寫，並且功能更多更強大
二、XAML語言
1、概念：在WPF中用來描述控制元件的語言.
特點：
與XML、HTML語言類似，但對大小寫敏感
一個XAML標籤代表NEW一個控制元件物件
2、控制元件的通用屬性：
Visibility：控制元件是否可見，他的值是個列舉型別：Visibility.Visible可見；Visibility.Collapsed不可見；Visibility.Hidden 不可見，但保留空間
IsEnabled：是否可用
Background：背景顏色
FontSize：設定字型
TextBox的常用屬性：
MaxLength： 獲取或設定文字框的最大輸入字元數，值為int型別
TextWrapping： 獲取或設定文字框是否可自動換行，值為列舉型別：TextWrapping.Wrap為可自動換行
IsReadOnly：只讀，值為bool型別
PasswordBox：取值的屬性為：Password
CheckBox：是否選中的屬性：IsChecked，型別是bool？。可為空的bool型別
RadioButton：單選框，如果要分組，同組新增一個共同的GroupName屬性。
DatePicker： 屬性SelectedDate，值為datatime？型別，可空型別
Image： Source屬性為圖片路徑（可以是相對路徑）
Slider： Maximum最大值，double型別。Minimum，double型別，value，當前值，double型別
ProgressBar：跟Slider用法類似。特殊的屬性：IsIndeterminate bool型別，是否不確定值
三、可空資料型別
可空資料型別：引用型別、自定義類、string，大部分類
不可空資料型別：值型別--int、boolean、decimal、DataTime等
但是資料庫內的值型別是可為null的，所以為了配合資料庫，C#中使用了值型別後加一個“？”後，就可以為null了
例如：int n = null；系統會報錯，但是int? n = null；是可以的
int？還可以用普通int型別來賦值，比如：int n = 5； int？ n1=n；
但是int？不能轉換為int。 在int？資料不為null時可以用強制轉換： int？ n1 = 5； int n2 =（int） n1；
四、頁面佈局 ： 不用拖控制元件的方式佈局，因為拖的控制元件一般不會隨視窗的變大而變大。
基本佈局：有StackPanel、Grid、DockPanel幾種佈局容器，放在佈局容器中的控制元件按照佈局容器的特點進行佈局
1、StackPanel佈局：控制元件排列，在StackPanel中排列的控制元件會隨著視窗的大小相應變化大小。
屬性：
Orientation： 列舉型別；值為Vertical時橫向排列（預設值），Horizontal縱向排列
2、控制元件中的巢狀： 在按鈕的內容插入圖片。這一點Winform做不到
<Button>
<Button.Content>
<Image Source="Images/042.jpg"></Image>
</Button.Content>
</Button>還可以插入文字框：TextBox 或其他
因為按鈕Button的Content只能被賦值一次，所以如果想在按鈕中巢狀多個其他控制元件，可以賦值為一個StackPanel，然後再在StackPanel中排列許多控制元件
<Button.Content>
<StackPanel>
<Image Source="Images/042.jpg" Height="115" Width="140"/>
<TextBlock><Run Text="xxx"/></TextBlock>
</StackPanel>
</Button.Content>
3、Grid 佈局： Grid字面上是網格的意思。在XAML語言中，它可以用來分柵格
如果不定義高度和寬度，Grid會自動均分。分好的柵格里面可以新增控制元件，控制元件的位置由Grid的行和列屬性來控制
<Grid>
<Grid.RowDefinitions> <!--分為3行，並設定第一行高度為60-->
<RowDefinition Height="60"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions> <!--分為4列，並設定第二列高度為60-->
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="60"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--給柵格中新增按鈕控制元件，預設為行和列的下標為0.可以在屬性中修改行和列的值-->
<Button Grid.Row="1" Grid.Column="1">使用者名稱</Button>
<TextBox Grid.Row="1" Grid.Column="2" Background="Purple" Text="xxx" ></TextBox>
<!--如果控制元件要佔幾行，用Grid的屬性rowSpan或者ColunmSpan-->
<Image Grid.Row="0" Grid.Column="4" Grid.RowSpan="3" Source="Images/042.jpg"></Image>
</Grid>4、在C#窗體程式碼中佈局
1）在XAML中新建一個能佈局的控制元件，並給一個Name屬性（便於程式中呼叫）
2）在程式中用New的方式新建控制元件物件
3）通過XAML控制元件的Children屬性，將控制元件物件加入到佈局中，從而完成佈局；有些是用Add的方法新增
5、總練習例題：製作連連看棋盤 （動態新增控制元件物件）
1）在XAML中新建一個柵格Grid，並命名Name屬性為：gridGame
2）用Definition生成一個10*10的柵格：
for (int i = 0; i < 10; i++)
{
RowDefinition rowDef = new RowDefinition(); //建立行佈局物件
gridGame.RowDefinitions.Add(rowDef); //新增到Grid中
ColumnDefinition colDef = new ColumnDefinition(); //建立列布局物件
gridGame.ColumnDefinitions.Add(colDef); //新增到Grid中
}3）建立10*10的Image控制元件，並設定其圖片資源和柵格位置，最後加入總柵格Grid中
//隨機數物件
Random r = new Random();
//2、生成10*10的Image控制元件
for (int i = 0; i < 10; i++)
{
for (int j = 0; j < 10; j++)
{
Image img = new Image(); //通過迴圈建立10*10個控制元件物件
//這裡要記住用法，不像XAML中會自動解析，C#必須要用到其他幾個類將路徑轉成圖片資源
img.Source = new BitmapImage(new Uri("Images/"+r.Next(1,10)+".png",UriKind.Relative));
//設定相應的柵格位置
Grid.SetRow(img,i);
Grid.SetColumn(img,j);
//將設定好的控制元件放入Grid中
gridGame.Children.Add(img);
}
}