格式
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 = 0; t < 10; t++)//10行10列 { RowDefinition rd = new RowDefinition(); grid1.RowDefinitions.Add(rd); ColumnDefinition cd = new ColumnDefinition(); grid1.ColumnDefinitions.Add(cd); } //往布局里面放控件,假如放置的都是Button控件 for (int i = 0; i < 10; i++) { for (int j = 0; j < 10; 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 = 0; i < 10; i++) { for (int j = 0; j < 10; j++) { int imgNum = random.Next(1, 10);//随机选取图片 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:
1 <Window x:Class="一个计算器的简单布局.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 Title="MainWindow" Height="323" Width="228"> 5 <Grid> 6 <Grid> 7 <Grid.RowDefinitions> 8 <RowDefinition Height="20"></RowDefinition> 9 <RowDefinition Height="60"></RowDefinition> 10 <RowDefinition></RowDefinition> 11 <RowDefinition></RowDefinition> 12 <RowDefinition></RowDefinition> 13 <RowDefinition></RowDefinition> 14 <RowDefinition></RowDefinition> 15 <RowDefinition></RowDefinition> 16 </Grid.RowDefinitions> 17 <Grid.ColumnDefinitions> 18 <ColumnDefinition></ColumnDefinition> 19 <ColumnDefinition></ColumnDefinition> 20 <ColumnDefinition></ColumnDefinition> 21 <ColumnDefinition></ColumnDefinition> 22 <ColumnDefinition></ColumnDefinition> 23 </Grid.ColumnDefinitions> 24 <Menu HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="220" Grid.ColumnSpan="5"> 25 <MenuItem Header="查看"></MenuItem> 26 <MenuItem Header="编辑"></MenuItem> 27 <MenuItem Header="帮助"></MenuItem> 28 </Menu> 29 <TextBox Grid.Row="1" Grid.ColumnSpan="10" Margin="5,10,5,0" IsReadOnly="True"></TextBox><!--Margin是”左上右下“这样的一个顺序--> 30 <Button Content="MC" Grid.Row="2" Width="34" Height="27"></Button> 31 <Button Content="MR" Grid.Row="2" Grid.Column="1" Width="34" Height="27"></Button> 32 <Button Content="MS" Grid.Row="2" Grid.Column="2" Width="34" Height="27"></Button> 33 <Button Content="M+" Grid.Row="2" Grid.Column="3" Width="34" Height="27"></Button> 34 <Button Content="M-" Grid.Row="2" Grid.Column="4" Width="34" Height="27"></Button> 35 <Button Grid.Row="3" Grid.Column="0" Width="34" Height="27"> 36 <Button.Background> 37 <ImageBrush ImageSource="images/boult.png"></ImageBrush> 38 </Button.Background> 39 </Button> 40 <Button Content="CE" Grid.Row="3" Grid.Column="1" Width="34" Height="27"></Button> 41 <Button Content="C" Grid.Row="3" Grid.Column="2" Width="34" Height="27"></Button> 42 <Button Grid.Row="3" Grid.Column="3" Width="34" Height="27"> 43 <Button.Background> 44 <ImageBrush ImageSource="images/+-.png"></ImageBrush> 45 </Button.Background> 46 </Button> 47 <Button Grid.Row="3" Grid.Column="4" Width="34" Height="27"> 48 <Button.Background> 49 <ImageBrush ImageSource="images/3.png"></ImageBrush> 50 </Button.Background> 51 </Button> 52 <Button Content="7" Grid.Row="4" Grid.Column="0" Width="34" Height="27"></Button> 53 <Button Content="8" Grid.Row="4" Grid.Column="1" Width="34" Height="27"></Button> 54 <Button Content="9" Grid.Row="4" Grid.Column="2" Width="34" Height="27"></Button> 55 <Button Content="/" Grid.Row="4" Grid.Column="3" Width="34" Height="27"></Button> 56 <Button Content="%" Grid.Row="4" Grid.Column="4" Width="34" Height="27"></Button> 57 <Button Content="4" Grid.Row="5" Grid.Column="0" Width="34" Height="27"></Button> 58 <Button Content="5" Grid.Row="5" Grid.Column="1" Width="34" Height="27"></Button> 59 <Button Content="6" Grid.Row="5" Grid.Column="2" Width="34" Height="27"></Button> 60 <Button Content="*" Grid.Row="5" Grid.Column="3" Width="34" Height="27"></Button> 61 <Button Grid.Row="5" Grid.Column="4" Width="34" Height="27"> 62 <Button.Background> 63 <ImageBrush ImageSource="images/4.png"></ImageBrush> 64 </Button.Background> 65 </Button> 66 <Button Content="1" Grid.Row="6" Grid.Column="0" Width="34" Height="27"></Button> 67 <Button Content="2" Grid.Row="6" Grid.Column="1" Width="34" Height="27"></Button> 68 <Button Content="3" Grid.Row="6" Grid.Column="2" Width="34" Height="27"></Button> 69 <Button Content="-" Grid.Row="6" Grid.Column="3" Width="34" Height="27"></Button> 70 <Button Content="=" Grid.Row="6" Grid.Column="4" Width="34" Height="59.5" Grid.RowSpan="2"></Button> 71 <Button Content="0" Grid.Row="7" Grid.Column="0" Width="78" Height="27" Grid.ColumnSpan="2"></Button> 72 <Button Content="." Grid.Row="7" Grid.Column="2" Width="34" Height="27"></Button> 73 <Button Content="+" Grid.Row="7" Grid.Column="3" Width="34" Height="27"></Button> 74 </Grid> 75 </Grid> 76 </Window>
