WPF界面布局的10个例子-CSDN博客

最近在学习使用WPF开发应用程序。关于WPF程序布局，有很多博客和参考书可供学习。今天试着做了10个简单的WPF界面，将xaml代码和实际展示的界面列出，仅供参考。

1、使用按钮填充父容器，类似于Winform中将按钮的Dock设置为Fill

XAML代码如下：

<Window x:Class="WpfLayoutDemo.Window01"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="按钮填充整个工作区" Height="300" Width="300">
    <Grid Name="BaseGrid">
        <Button Content="Button" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" 
                Width="{Binding Path=ActualWidth,ElementName=BaseGrid}"
                Height="{Binding Path=ActualHeight,ElementName=BaseGrid}"/>
    </Grid>
</Window>

2、使用DockPanel进行布局，容器分上、下、左、右、中央五个部分

XAML代码如下：

<Window x:Class="WpfLayoutDemo.Window02"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel布局测试" Height="300" Width="300">
    <DockPanel>
        <Button Content="Button" DockPanel.Dock="Top" Height="80"/>
        <Button Content="Button" DockPanel.Dock="Bottom" Height="80"/>
        <Button Content="Button" DockPanel.Dock="Left"/>
        <Button Content="Button" DockPanel.Dock="Right"/>
        <Button Content="Button" />
    </DockPanel>
</Window>

3、使用DockPanel进行布局，调整Dock声明的先后顺序可调整DockPanel内元素的结构

XAML代码如下：

<Window x:Class="WpfLayoutDemo.Window03"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel布局测试" Height="300" Width="300">
    <DockPanel>
        <Button Content="Button" DockPanel.Dock="Left"/>
        <Button Content="Button" DockPanel.Dock="Right"/>
        <Button Content="Button" DockPanel.Dock="Top" Height="100"/>
        <Button Content="Button" DockPanel.Dock="Bottom" Height="100"/>
        <Button Content="Button" />
    </DockPanel>
</Window>

4、使用DockPanel进行布局，调整Dock声明的先后顺序可调整DockPanel内元素的结构

XAML代码如下：

<Window x:Class="WpfLayoutDemo.Window04"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel布局测试" Height="300" Width="300">
    <DockPanel>
        <Button Content="Button" DockPanel.Dock="Left"/>
        <Button Content="Button" DockPanel.Dock="Top" Height="80"/>
        <Button Content="Button" DockPanel.Dock="Bottom" Height="80"/>
        <Button Content="Button" DockPanel.Dock="Right"/>
        <Button Content="Button" />
    </DockPanel>
</Window>

5、使用DockPanel进行布局，每一部分可继续嵌套其他布局

XAML代码如下：

<Window x:Class="WpfLayoutDemo.Window05"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel嵌套测试" Height="300" Width="300">
    <DockPanel>
        <Button Content="Button" DockPanel.Dock="Top" Height="80"/>
        <Button Content="Button" DockPanel.Dock="Bottom" Height="80"/>
        <Button Content="Button" DockPanel.Dock="Left"/>
        <Button Content="Button" DockPanel.Dock="Right"/>
        <DockPanel>
            <Button Content="Button" DockPanel.Dock="Top" Height="20"/>
            <Button Content="Button" DockPanel.Dock="Bottom" Height="20"/>
            <Button Content="Button" DockPanel.Dock="Left"/>
            <Button Content="Button" DockPanel.Dock="Right"/>
            <Button Content="Button"/>
        </DockPanel>
    </DockPanel>
</Window>

6、在Canvas上绘制控件，以左上角为坐标原点设置各控件位置

XAML代码如下：

<Window x:Class="WpfLayoutDemo.Window06"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas上绘制控件" Height="300" Width="300">
    <Canvas HorizontalAlignment="Left" Height="270" VerticalAlignment="Top" Width="292">
        <Button Content="Button" Canvas.Left="20" Canvas.Top="30" Width="75"/>
        <Button Content="Button" Canvas.Left="20" Canvas.Top="70" Width="75"/>
        <Button Content="Button" Canvas.Left="20" Canvas.Top="110" Width="75"/>
    </Canvas>
</Window>

7、Grid容器，以网格形式放置元素

XAML代码如下：

<Window x:Class="WpfLayoutDemo.Window07"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid网格排列" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="135" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button Margin="0,0,0,0" Grid.Row="0" Grid.Column="0">左上</Button>
        <Button Margin="0,0,0,0" Grid.Row="0" Grid.Column="1">右上</Button>
        <Button Margin="0,0,0,0" Grid.Row="1" Grid.Column="0">左下</Button>
        <Button Margin="0,0,0,0" Grid.Row="1" Grid.Column="1">右下</Button>
    </Grid>
</Window>

8、StackPanel容器，自上到下或自左到右显示元素

XAML代码如下：

<Window x:Class="WpfLayoutDemo.Window08"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel测试" Height="300" Width="300">
    <StackPanel>
        <Button Content="Button" Height="30"/>
        <Button Content="Button" Height="40"/>
        <Button Content="Button" Height="50"/>
        <Button Content="Button" Height="60"/>
        <Button Content="Button" Height="70"/>
    </StackPanel>
</Window>

9、StackPanel容器，添加滚动条以显示更多的元素

XAML代码如下：

<Window x:Class="WpfLayoutDemo.Window09"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="含滚动条的StackPanel" Height="300" Width="300">
    <ScrollViewer x:Name="scrolls" VerticalScrollBarVisibility="Auto">
        <ScrollViewer.Content>
            <StackPanel>
                <Button Content="Button" Height="30"/>
                <Button Content="Button" Height="40"/>
                <Button Content="Button" Height="50"/>
                <Button Content="Button" Height="60"/>
                <Button Content="Button" Height="70"/>
                <Button Content="Button" Height="80"/>
            </StackPanel>
        </ScrollViewer.Content>
    </ScrollViewer>
</Window>

10、WrapPanel容器，自左到右自上到下显示元素

XAML代码如下：

<Window x:Class="WpfLayoutDemo.Window10"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel测试" Height="300" Width="300">
    <WrapPanel HorizontalAlignment="Left" Height="270" VerticalAlignment="Top" Width="292">
        <Button Content="Button" Width="75" Height="50"/>
        <Button Content="Button" Width="75" Height="75"/>
        <Button Content="Button" Width="75" Height="100"/>
        <Button Content="Button" Width="75" Height="100"/>
        <Button Content="Button" Width="75" Height="75"/>
        <Button Content="Button" Width="75" Height="50"/>
    </WrapPanel>
</Window>

END

转载于:https://my.oschina.net/Tsybius2014/blog/888530