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);
}
}