格式
1.XAML格式：
<Button x:Name="btnClick" Content="按钮" HorizontalAlignment="Left" Margin="45,94,0,0" VerticalAlignment="Top" Width="75" Click="btnClick_Click" />
与
<Button x:Name="btnClick" HorizontalAlignment="Left" Margin="45,94,0,0" VerticalAlignment="Top" Width="75" Click="btnClick_Click">
<Button.Content>按钮</Button.Content>
</Button>
是一样的，第二种，第一种，一般用于写常规的属性，第二种，一般用于写比较复杂的属性
常用控件或属性
2.Visibility属相：表示控件是否可见，但是枚举类型，Collapsed不可见，Visible可见
3.TextWrapping属性：指定文本在到达包含框的边缘时是否换行,Wrap换行，NoWrap不换行
4.MaxLength属性：可在文本框中手动输入的最大字符数
5.密码输入框控件：PasswordBox ，读写密码的属性为：Password
6.可空数据类型：引用类型
不可空的数据类型：值类型
注意：在不可null类型后面加"?"就可以为null了，例如：
int? i = null;//编译器就不会报错
简单解析：
int 和 int? 是不同的类型，int是不可为null，int?是可为null，如果把为null的赋值给不可为null的，编译器会出错：
但可以通过类型转换,使可为null的赋值给不可为null的，但前提是，可为null的对象必须要有值
比如：CheckBox控件的属性IsChecked，返回类型为bool?：
if ((bool)checkBox1.IsChecked)
{
MessageBox.Show("选中了");
} //或者
if (checkBox1.IsChecked == true)//系统自动转换
{
MessageBox.Show("选中了");
}
7.GroupName属性：可为单选按钮等设置不同的组，这样就会避免了在一个界面中，放入多个单选按钮后只能选择其一
8.DatePicker控件：日期选择器
DateTime? dt = datePicker1.SelectedDate;
if (dt == null)
{
MessageBox.Show("没有选择日期，请选择");
}
else
{
MessageBox.Show(dt.ToString());
}
9.Image控件的Source属性，能够指定图片的位置
10.ProgressBar控件：进度条控件，常用属性有：Minimum最小值,Maximum最大值,Value初始值,IsIndeterminate不确定模式（当设置为true的时候，进度条会不断地自动循环）
常用布局
11.StackPanel堆栈布局（组件是水平或垂直的）
<Grid>
<Button Margin="0,0,456,132">
<Button.Content><!--Button控件的Content属相的值本来是只能一个的，但如果想设置多个的时候，可以使用布局-->
<StackPanel Orientation="Horizontal"><!--组件排列方向：水平-->
<Image Width="100" Height="100" Source="1.jpg"></Image>
<TextBlock VerticalAlignment="Center" Text="戒指"></TextBlock><!--垂直方向中间显示，文字为戒指-->
</StackPanel>
</Button.Content>
</Button>
</Grid>
12.Grid网格布局
“第一行第一列”，在Grid布局中为“0行0列”，放置的控件，默认放置的位置是“0行0列”
<Grid>
<Grid>
<Grid.ColumnDefinitions><!--列定义，设置了4列-->
<ColumnDefinition Width="150"></ColumnDefinition><!--指定第一列的宽度为150-->
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions><!--行定义，设置了4行-->
<RowDefinition Height="150"></RowDefinition><!--指定第一行的高度为150-->
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<!--以下是设置布局里面的子控件-->
<Button Content="测试按钮" Grid.Row="1" Grid.Column="1"></Button><!--默认位置是第0行第0列;可采用附加属性的写法，指定控件的位置-->
<TextBlock Text="keenleung" Background="Blue" Grid.Column="0" Grid.Row="0"></TextBlock>
<Image Source="1.jpg" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"></Image><!--位置为2行0列,占据2列-->
<Button Content="测试按钮2" Grid.Row="2" Grid.Column="2" Grid.RowSpan="2"></Button><!--位置为2行2列,占据2行-->
</Grid>
</Grid>
一个简单的登陆界面：
<Grid>
<Grid>
<!--一个简单的登陆界面-->
<Grid.RowDefinitions><!--行定义,以下设置了3行-->
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions><!--列定义，以下设置了2列-->
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="用户名：" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock><!--该控件水平和垂直方向上都是居中显示-->
<TextBox Grid.Column="1" Margin="15"></TextBox>
<TextBlock Text="密码：" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1"></TextBlock>
<PasswordBox Grid.Row="1" Grid.Column="1" Margin="15"></PasswordBox><!--Margin控制控件边距的大小-->
<Button Content="确定" Grid.Row="2" Margin="15"></Button>
<Button Content="取消" Grid.Column="2" Grid.Row="2" Margin="15"></Button>
</Grid>
</Grid>
结果视图：
13.通过代码往布局里面添加控件
<Grid>
<StackPanel Name="stp1" MouseDown="stp1_MouseDown" MouseEnter="stp1_MouseEnter"></StackPanel>
</Grid>
private void Window_Loaded(object sender, RoutedEventArgs e)
{
Button btn = new Button();
btn.Content = "第1个按钮";
stp1.Children.Add(btn);//往布局里通过代码添加控件
}
14.通过代码设置Grid布局的行数和列数，并且添加控件
/// <summary>
/// 通过代码设置Grid布局的行数和列数，并且添加控件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Window_Loaded(object sender, RoutedEventArgs e)
{
//先设置Grid布局为几行和几列
for (int t = ; t < ; t++)//10行10列
{
RowDefinition rd = new RowDefinition();
grid1.RowDefinitions.Add(rd); ColumnDefinition cd = new ColumnDefinition();
grid1.ColumnDefinitions.Add(cd);
}
//往布局里面放控件,假如放置的都是Button控件
for (int i = ; i < ; i++)
{
for (int j = ; j < ; j++)
{
Button btn = new Button();
btn.Content = i + "," + j; //通过代码修改Grid.Row和Grid.Column属性
Grid.SetRow(btn, i);
Grid.SetColumn(btn, j); grid1.Children.Add(btn);
}
}
}
结果视图：
15.如果想加入的是图片，以下代码做参考：
//前面的代码不变
Image img = new Image();
//代码给Source属性赋值
img.Source = new BitmapImage(new Uri("1.jpg", UriKind.Relative));
Grid.SetRow(img, i);
Grid.SetColumn(img, j);
grid1.Children.Add(img);
16.如果是随机选取图片呢？
//往布局里面放控件,假如放置的都是随机选取的图片(前面的代码不变)
Random random = new Random();
for (int i = ; i < ; i++)
{
for (int j = ; j < ; j++)
{
int imgNum = random.Next(, );//随机选取图片 Image img = new Image();
//代码给Source属性赋值
img.Source = new BitmapImage(new Uri("images/" + imgNum + ".jpg", UriKind.Relative));
//通过代码修改Grid.Row和Grid.Column属性
Grid.SetRow(img, i);
Grid.SetColumn(img, j);
grid1.Children.Add(img);
}
}
结果：
16.布局的嵌套
<Window x:Class="布局的嵌套.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="顶层布局的按钮" Grid.Row="1" Grid.Column="1"></Button>
<StackPanel><!--在Grid顶层布局里面嵌套一个StackPanel布局-->
<Button Content="内层StackPanel布局里的按钮"></Button>
<Button Content="内层StackPanel布局里的按钮"></Button>
<Button Content="内层StackPanel布局里的按钮"></Button>
</StackPanel>
<Grid Grid.Column="1"><!--在Grid顶层布局里面嵌套一个Grid布局-->
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="内层Grid里的按钮"></Button>
</Grid>
</Grid>
</Grid>
</Window>
视图：
练习
17.模拟一个简单计算器的界面(采取8行5列)
code:
<Window x:Class="一个计算器的简单布局.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="323" Width="228">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Menu HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="220" Grid.ColumnSpan="5">
<MenuItem Header="查看"></MenuItem>
<MenuItem Header="编辑"></MenuItem>
<MenuItem Header="帮助"></MenuItem>
</Menu>
<TextBox Grid.Row="1" Grid.ColumnSpan="10" Margin="5,10,5,0" IsReadOnly="True"></TextBox><!--Margin是”左上右下“这样的一个顺序-->
<Button Content="MC" Grid.Row="2" Width="34" Height="27"></Button>
<Button Content="MR" Grid.Row="2" Grid.Column="1" Width="34" Height="27"></Button>
<Button Content="MS" Grid.Row="2" Grid.Column="2" Width="34" Height="27"></Button>
<Button Content="M+" Grid.Row="2" Grid.Column="3" Width="34" Height="27"></Button>
<Button Content="M-" Grid.Row="2" Grid.Column="4" Width="34" Height="27"></Button>
<Button Grid.Row="3" Grid.Column="0" Width="34" Height="27">
<Button.Background>
<ImageBrush ImageSource="images/boult.png"></ImageBrush>
</Button.Background>
</Button>
<Button Content="CE" Grid.Row="3" Grid.Column="1" Width="34" Height="27"></Button>
<Button Content="C" Grid.Row="3" Grid.Column="2" Width="34" Height="27"></Button>
<Button Grid.Row="3" Grid.Column="3" Width="34" Height="27">
<Button.Background>
<ImageBrush ImageSource="images/+-.png"></ImageBrush>
</Button.Background>
</Button>
<Button Grid.Row="3" Grid.Column="4" Width="34" Height="27">
<Button.Background>
<ImageBrush ImageSource="images/3.png"></ImageBrush>
</Button.Background>
</Button>
<Button Content="7" Grid.Row="4" Grid.Column="0" Width="34" Height="27"></Button>
<Button Content="8" Grid.Row="4" Grid.Column="1" Width="34" Height="27"></Button>
<Button Content="9" Grid.Row="4" Grid.Column="2" Width="34" Height="27"></Button>
<Button Content="/" Grid.Row="4" Grid.Column="3" Width="34" Height="27"></Button>
<Button Content="%" Grid.Row="4" Grid.Column="4" Width="34" Height="27"></Button>
<Button Content="4" Grid.Row="5" Grid.Column="0" Width="34" Height="27"></Button>
<Button Content="5" Grid.Row="5" Grid.Column="1" Width="34" Height="27"></Button>
<Button Content="6" Grid.Row="5" Grid.Column="2" Width="34" Height="27"></Button>
<Button Content="*" Grid.Row="5" Grid.Column="3" Width="34" Height="27"></Button>
<Button Grid.Row="5" Grid.Column="4" Width="34" Height="27">
<Button.Background>
<ImageBrush ImageSource="images/4.png"></ImageBrush>
</Button.Background>
</Button>
<Button Content="1" Grid.Row="6" Grid.Column="0" Width="34" Height="27"></Button>
<Button Content="2" Grid.Row="6" Grid.Column="1" Width="34" Height="27"></Button>
<Button Content="3" Grid.Row="6" Grid.Column="2" Width="34" Height="27"></Button>
<Button Content="-" Grid.Row="6" Grid.Column="3" Width="34" Height="27"></Button>
<Button Content="=" Grid.Row="6" Grid.Column="4" Width="34" Height="59.5" Grid.RowSpan="2"></Button>
<Button Content="0" Grid.Row="7" Grid.Column="0" Width="78" Height="27" Grid.ColumnSpan="2"></Button>
<Button Content="." Grid.Row="7" Grid.Column="2" Width="34" Height="27"></Button>
<Button Content="+" Grid.Row="7" Grid.Column="3" Width="34" Height="27"></Button>
</Grid>
</Grid>
</Window>
