06-WrapPanel面板的使用和计算器界面设计

单单靠StackPanel还是不能实现一些强大的布局的

我们需要结合其他的布局面板

WrapPanel-包裹面板 –让控件 在一行一列里面排序

我们添加一个新的windows的xaml

我们之间在Windows下面添加WrapPanel

<WrapPanel HorizontalAlignment="Left" Height="100" Margin="131,126,0,0" VerticalAlignment="Top" Width="100"/>Code language: HTML, XML (xml)

WrapPanel的高度和宽度 自动根据里面的控件最高的控件

<WrapPanel HorizontalAlignment="Left" Height="100" Margin="44,138,-126,0" VerticalAlignment="Top" Width="374" Orientation="Vertical" >
    <Button x:Name="button" Content="FoxDevelop.com1111111" Height="50" Width="20"/>
    <Button x:Name="button1" Content="But"/>
    <Button x:Name="button2" Content="Button"/>
</WrapPanel>Code language: HTML, XML (xml)

WrapPanel用于一个接一个的排列子控件，以水平或者垂直方向，当空间不足时就会自动切换到下一行。适合于需要水平或者垂直排列控件且能自动换行的情况。

里面的子控件 除非我们之间指定它的高度 否则他的高度会自动根据Wrap的高度 变化

另外wrap的高度 也是默认根据最大的控件来决定

WrapPanel的其他理解

第一行放不下的时候，自动了切换到第二行。

如果你改变窗口大小，譬如缩小窗口，面板立马自动调整以适应新的尺寸

下面是一个计算器的例子

<WrapPanel  Orientation="Horizontal" Width="300" >
    <TextBox x:Name="textBox" Height="41" Text="TextBox" Width="300"/>
    <Button x:Name="button1" Content="1" Width="100"/>
    <Button x:Name="button2" Width="100" Content="2">
    </Button>
    <Button x:Name="button3" Content="3" Width="100"  Height="50"/>
    <Button x:Name="button4" Content="4" Width="100"/>
    <Button x:Name="button5" Content="5" Width="100"/>
    <Button x:Name="button6" Content="6" Width="100"  Height="50"/>
    <Button x:Name="button7" Content="7" Width="100"/>
    <Button x:Name="button8" Content="8" Width="100"/>
    <Button x:Name="button9" Content="9" Width="100"  Height="50"/>
    <Button x:Name="button" Content="0" Width="200" Height="50"/>
    <Button x:Name="button32" Content="+" Width="100"/>
    <Button x:Name="button34" Content="-" Width="100"  Height="50"/>
    <Button x:Name="button45" Content="X" Width="100"/>
    <Button x:Name="button78" Content="÷" Width="100"/>
</WrapPanel>Code language: HTML, XML (xml)