WPF界面布局的10个例子
WPF界面布局的10个例子
北风其凉 发表于8个月前
WPF界面布局的10个例子
  • 发表于 8个月前
  • 阅读 84
  • 收藏 0
  • 点赞 1
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: WPF界面布局的10个例子

最近在学习使用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

标签: WPF 容器 布局
共有 人打赏支持
北风其凉
粉丝 112
博文 486
码字总数 458677
作品 4
×
北风其凉
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: