`
wx1569582009
  • 浏览: 119542 次
文章分类
社区版块
存档分类
最新评论

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

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

分享到：
| C#：从外部强制关闭用ShowDialog方法打开的 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    16个WPF项目开发经典例子

    10. **路由事件**：路由事件是WPF中的一个高级特性，它可以跨多个元素传播。例子可能包含如何声明和使用路由事件，以及如何阻止事件的传播。 11. **自定义控件和用户控件**：WPF允许开发者创建自定义控件以满足特定...

    WPF做的一个VisualSutdio界面的例子

    综上所述，"WPF做的一个Visual Studio界面的例子"是一个学习WPF界面设计和实现的实践项目，涵盖了从基础的XAML语法到高级的MVVM模式等多个方面。通过这个例子，开发者可以深入了解如何利用WPF的强大功能来创建复杂且...

    Object_Attributes.zip_WPF 界面_wpf界面

    在标题“Object_Attributes.zip_WPF 界面_wpf界面”中，我们可以推测这是一个关于WPF界面设计的学习资料包。可能包含的对象属性（Object_Attributes）可能是讨论的重点，这可能涉及到WPF中的UI元素（如控件）的属性...

    WPF自定义用户控件一个小例子

    在我们的小例子中，我们可能会创建一个用户控件，例如一个包含按钮、文本框和标签的简单表单组件。 创建自定义用户控件通常涉及以下步骤： 1. **创建新项目**：在Visual Studio中，选择“新建项目”，然后选择...

    WPFEffects-master_WPF_WPF界面UI设计集合_

    本资源“WPFEffects-master”是一个专注于WPF界面UI设计的集合，旨在提供丰富的用户界面元素和效果，帮助开发者创建出更具吸引力和用户体验的WPF应用。** 在WPF中，UI设计的核心在于XAML（Extensible Application ...

    WPF项目demo 15个例子.rar_C#_WPF_csharp winform_winform 界面_wpf demo

    在本资源中，"WPF项目demo 15个例子.rar" 是一个包含15个Windows Presentation Foundation (WPF) 应用程序示例的压缩文件。WPF是.NET Framework和.NET Core的一部分，是一个用于构建桌面应用程序的强大工具，它允许...

    WPF 的一些例子

    6. **布局系统**: WPF的布局系统允许控件动态调整大小和位置以适应父容器的变化。主要的布局面板有Grid、StackPanel、DockPanel和Canvas，每个都有不同的排列策略。 7. **动画和效果**: WPF支持基于时间的动画，...

    WPF MVVM框架 漂亮界面风格的WPF 快速入门WPF实例 功能实用架构清晰易入门 快速入门WPF MVVM开发

    通过这个例子，学习者可以了解到如何创建窗体、布局控件、绑定数据以及处理用户交互等方面的内容。 该例子的代码结构清晰，易于理解。整个应用程序分为三个部分：视图、模型和逻辑。视图负责显示应用程序的界面，...

    WPF的hello，wpf例子

    4. **属性绑定**: 虽然这个例子没有涉及，但WPF的另一个强大特性是数据绑定，它允许UI元素与数据源直接关联，动态更新界面。例如，你可以将`TextBlock`的`Text`属性绑定到一个后台数据模型的属性上。 5. **C#后台...

    WCF+WPF例子，共有两个例子

    第一个例子"Chatters.zip"可能是一个聊天应用的示例，其中WCF服务作为后台处理消息传递，而WPF客户端则展示聊天界面并负责用户交互。在这个例子中，我们可能会学到如何定义WCF服务接口、实现服务合约、配置服务宿主...

    WPF 可视化例子

    在WPF应用中，这种文件通常包含数据库连接信息、用户界面布局参数或其他应用程序特定的设置。开发者可能会使用XML格式来存储这些配置，因为XML易于解析，且结构清晰。 综合上述内容，这个WPF示例项目旨在教你如何...

    wpf 一些小例子

    2. **控件和布局**：WPF提供了大量的内置控件，如Button、TextBox、ListBox等，它们可以组合成复杂的用户界面。布局系统包括StackPanel、Grid、Canvas和DockPanel等，用于控制控件在屏幕上的位置和排列。 3. **数据...

    wpf开发小例子

    这个压缩包中的“wpf开发小例子”展示了WPF在实际应用中的几个核心功能，包括相机操作、绘图功能以及图像处理。 1. **相机拍照功能** 在WPF中，实现相机功能通常涉及到使用MediaElement控件或利用AForge.NET等第三...

    wpf温度计自定义组件例子

    "wpf温度计自定义组件例子"是一个很好的学习资源，旨在教你如何从头构建一个温度计控件。下面将详细介绍这个主题，以及它涉及的相关知识点。 首先，我们需要理解WPF是什么。Windows Presentation Foundation是.NET ...

    wpf control template 示例

    通过理解并实践这些例子，你可以深入理解WPF的模板化系统，并能够创建出独具特色的用户界面。 1. **ControlTemplate基本概念**：ControlTemplate是WPF中定义控件外观的XAML结构。它定义了控件的视觉树，即控件在...

    WPF经典教程之Canvas、InkCanvas布局

    - **WPF体系结构**：WPF（Windows Presentation Foundation）是.NET Framework的一部分，它提供了丰富的用户界面（UI）框架，包括布局、图形、动画、媒体和数据绑定等功能。 - **WPF应用程序管理**：涉及到应用程序...

    WPF制作的tabControl例子

    在这个“WPF制作的tabControl例子”中，开发者实现了独特的TabItem布局，即将TabItem从常规的水平显示转变为垂直显示，同时文字也旋转至垂直方向，为用户界面提供了独特的视觉效果。 在WPF中，TabControl由两个主要...

    c# wpf图片左右滑动的例子

    在C# WPF（Windows Presentation Foundation）...这个过程涉及到WPF的基础知识，如布局、数据绑定、动画以及事件处理，这些都是WPF开发中不可或缺的部分。熟练掌握这些技能，能够帮助你构建出更高质量的桌面应用程序。

    一个WPF多窗口例子

    在Windows Presentation Foundation (WPF) 中，开发多窗口应用程序是一项常见的任务，尤其在设计复杂的用户界面或者需要多个独立工作空间时。本篇将深入探讨如何在WPF环境中创建和管理多个窗口，并通过提供的示例...

    WPF例子集合

    **WPF例子集合** WPF（Windows Presentation Foundation）是微软.NET Framework的一部分，它提供了一种强大的用户界面（UI）框架，用于构建具有丰富图形、多媒体和数据绑定功能的应用程序。这个压缩包包含了一系列...

Magicbox
Global site tag (gtag.js) - Google Analytics