如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点)
移动先行之谁主沉浮? 带着你的Net飞奔吧! 链接======>(点)
一、布局类控件
Grid、StackPanel、Canvas、 VariableSizedWrapGrid
1.布局控件 - Grid
网格控件,网格布局;
相当于 HTML 中的 Table 标签;
但是注意 Table 更重要的是展示数据,而 Grid 则是专门为布局所生;
属性标记:
Grid.RowDefinitions:行定义,元素类型 RowDefinition,必要属性 Height
Grid.ColumnDefinitions:列定义,元素类型 ColumnDefinition,必要属性 Width
Width 和 Height属性单位为像素,有两个特殊值“*”、“auto”
常用附加属性 :
Grid.Row:定义当前元素所出现的行号
Grid.Column :定义当前元素所出现的列号
Grid.RowSpan :定义当前元素所跨的行数
Grid.ColumnSpan:定义当前元素所跨的列数
1.案例:定义一个3行2列的表格,在其中放元素
效果:
2.综合案例:计算器页面模仿
创建一个基本页(WP统一样式)
生成的页面,代码放在下面grid里面
布局分析:(对空格和=来说,实现的话就要合并单元格)
定义部分(上面的样式先忽略,和css有点相似,不会用的话在每个控件后面打属性值就可以了,后面会讲)
下面是ui部分:(注意:row从0开始,column也是从0开始)
<!--输出框-->
<TextBox x:Name="RLog" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Stretch" Grid.ColumnSpan="5" Margin="0,0,0,20"></TextBox>
<!--第1行按键-->
<Button Grid.Row="2" Click="Button_Click">MC</Button>
<Button Grid.Row="2" Grid.Column="1" Click="Button_Click">MR</Button>
<Button Grid.Row="2" Grid.Column="2" Click="Button_Click">MS</Button>
<Button Grid.Row="2" Grid.Column="3" Click="Button_Click">M+</Button>
<Button Grid.Row="2" Grid.Column="4" Click="Button_Click">M-</Button>
<!--第2行按键-->
<Button Grid.Row="3" Click="Button_Click">←</Button>
<Button Grid.Row="3" Grid.Column="1" Click="Button_Click">CE</Button>
<Button Grid.Row="3" Grid.Column="2" Click="Button_Click">C</Button>
<Button Grid.Row="3" Grid.Column="3" Click="Button_Click">♫</Button>
<Button Grid.Row="3" Grid.Column="4" Click="Button_Click">√</Button>
<!--第3行按键-->
<Button Grid.Row="4" Click="Button_Click">7</Button>
<Button Grid.Row="4" Grid.Column="1" Click="Button_Click">8</Button>
<Button Grid.Row="4" Grid.Column="2" Click="Button_Click">9</Button>
<Button Grid.Row="4" Grid.Column="3" Click="Button_Click">/</Button>
<Button Grid.Row="4" Grid.Column="4" Click="Button_Click">%</Button>
<!--第4行按键-->
<Button Grid.Row="5" Click="Button_Click">4</Button>
<Button Grid.Row="5" Grid.Column="1" Click="Button_Click">5</Button>
<Button Grid.Row="5" Grid.Column="2" Click="Button_Click">6</Button>
<Button Grid.Row="5" Grid.Column="3" Click="Button_Click">*</Button>
<Button Grid.Row="5" Grid.Column="4" Click="Button_Click">1/x</Button>
<!--第5行按键-->
<Button Grid.Row="6" Click="Button_Click">1</Button>
<Button Grid.Row="6" Grid.Column="1" Click="Button_Click">2</Button>
<Button Grid.Row="6" Grid.Column="2" Click="Button_Click">3</Button>
<Button Grid.Row="6" Grid.Column="3" Click="Button_Click">-</Button>
<Button Grid.Row="6" Grid.Column="4" Grid.RowSpan="2" VerticalAlignment="Stretch" Click="Button_Click">=</Button>
<!--第6行按键-->
<Button Grid.Row="7" Grid.ColumnSpan="2" VerticalAlignment="Stretch" Click="Button_Click"></Button>
<Button Grid.Row="7" Grid.Column="2" Click="Button_Click">.</Button>
<Button Grid.Row="7" Grid.Column="3" Click="Button_Click">+</Button>
<!--TODO: 应将内容放入以下网格-->
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
<!-- 设置样式 -->
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="2,0,2,0"/>
<Setter Property="MinWidth" Value="0"/>
</Style>
</Grid.Resources>
<!--在grid里面自定义8行-->
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<!--在grid里面自定义5列-->
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--输出框-->
<TextBox x:Name="RLog" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Stretch" Grid.ColumnSpan="5" Margin="0,0,0,20"></TextBox>
<!--第1行按键-->
<Button Grid.Row="2" Click="Button_Click">MC</Button>
<Button Grid.Row="2" Grid.Column="1" Click="Button_Click">MR</Button>
<Button Grid.Row="2" Grid.Column="2" Click="Button_Click">MS</Button>
<Button Grid.Row="2" Grid.Column="3" Click="Button_Click">M+</Button>
<Button Grid.Row="2" Grid.Column="4" Click="Button_Click">M-</Button>
<!--第2行按键-->
<Button Grid.Row="3" Click="Button_Click">←</Button>
<Button Grid.Row="3" Grid.Column="1" Click="Button_Click">CE</Button>
<Button Grid.Row="3" Grid.Column="2" Click="Button_Click">C</Button>
<Button Grid.Row="3" Grid.Column="3" Click="Button_Click">♫</Button>
<Button Grid.Row="3" Grid.Column="4" Click="Button_Click">√</Button>
<!--第3行按键-->
<Button Grid.Row="4" Click="Button_Click">7</Button>
<Button Grid.Row="4" Grid.Column="1" Click="Button_Click">8</Button>
<Button Grid.Row="4" Grid.Column="2" Click="Button_Click">9</Button>
<Button Grid.Row="4" Grid.Column="3" Click="Button_Click">/</Button>
<Button Grid.Row="4" Grid.Column="4" Click="Button_Click">%</Button>
<!--第4行按键-->
<Button Grid.Row="5" Click="Button_Click">4</Button>
<Button Grid.Row="5" Grid.Column="1" Click="Button_Click">5</Button>
<Button Grid.Row="5" Grid.Column="2" Click="Button_Click">6</Button>
<Button Grid.Row="5" Grid.Column="3" Click="Button_Click">*</Button>
<Button Grid.Row="5" Grid.Column="4" Click="Button_Click">1/x</Button>
<!--第5行按键-->
<Button Grid.Row="6" Click="Button_Click">1</Button>
<Button Grid.Row="6" Grid.Column="1" Click="Button_Click">2</Button>
<Button Grid.Row="6" Grid.Column="2" Click="Button_Click">3</Button>
<Button Grid.Row="6" Grid.Column="3" Click="Button_Click">-</Button>
<Button Grid.Row="6" Grid.Column="4" Grid.RowSpan="2" VerticalAlignment="Stretch" Click="Button_Click">=</Button>
<!--第6行按键-->
<Button Grid.Row="7" Grid.ColumnSpan="2" VerticalAlignment="Stretch" Click="Button_Click"></Button>
<Button Grid.Row="7" Grid.Column="2" Click="Button_Click">.</Button>
<Button Grid.Row="7" Grid.Column="3" Click="Button_Click">+</Button>
</Grid>