WPF几种常用布局面板

已于 2024-01-09 18:02:59 修改
阅读量1.5k 收藏 22
点赞数 20
分类专栏： .Net wpf windows 文章标签： wpf
于 2024-01-09 00:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010784529/article/details/135453797
版权
windows 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
.Net
4 篇文章 0 订阅
订阅专栏
wpf
3 篇文章 0 订阅
订阅专栏

StackPanel 堆叠面板

  • StackPanel 是一种常用的布局控件，可以水平或垂直排列其子元素,但不会换行。当子元素添加到 StackPanel 中时，它们将按照添加的顺序依次排列。默认情况下，StackPanel 的排列方向是垂直的，也就是说子元素将从上到下依次排列。可以使用 Orientation 属性更改排列方向。可以设置两种排列方式：横排（Horizontal）和竖排（Vertical，默认）。水平排列时，每个元素都与面板一样高；垂直排列时，每个元素都与面板一样宽。
Orientation 属性
// StackPanel 里添加了4个按钮，默认布局，Orientation 默认垂直排列
<Window x:Class="WpfFirstApp.StackPanelWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfFirstApp"
        mc:Ignorable="d"
        Title="StackPanelWindow" Height="450" Width="800">
    <StackPanel>
        <Button Content="按钮1"></Button>
        <Button Content="按钮2"></Button>
        <Button Content="按钮3"></Button>
        <Button Content="按钮4"></Button>
    </StackPanel>
</Window>

xaml
默认竖排效果

  • 然后设置StackPanel的Orientation为横向(Horizontal)排列
// 设置 Orientation 属性(Horizontal)
<Window x:Class="WpfFirstApp.StackPanelWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfFirstApp"
        mc:Ignorable="d"
        Title="StackPanelWindow" Height="450" Width="800">
    <StackPanel Orientation="Horizontal">
        <Button Content="按钮1"></Button>
        <Button Content="按钮2"></Button>
        <Button Content="按钮3"></Button>
        <Button Content="按钮4"></Button>
    </StackPanel>
</Window>

设置Orientation

横排效果

  • 如果不在XAML里添加控件，也可以直接在c#代码里实现上面的效果
// 使用C# 代码直接实现
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfFirstApp
{
    /// <summary>
    /// StackPanelWindow.xaml 的交互逻辑
    /// </summary>
    public partial class StackPanelWindow : Window
    {
        public StackPanelWindow()
        {
            InitializeComponent();
            this.Title = "StackPanel面板";
            // StackPanel 默认排列
            StackPanel stackPanel = new StackPanel();
            this.Content = stackPanel;
            stackPanel.Children.Add(new Button()
            {
                Content="按钮1"
            });
            stackPanel.Children.Add(new Button()
            {
                Content = "按钮2"
            });
            stackPanel.Children.Add(new Button()
            {
                Content = "按钮3"
            });
            stackPanel.Children.Add(new Button()
            {
                Content = "按钮4"
            });
        }
    }
}

xam只包含根元素l
c#里实现

  • C# 代码里设置 stackPanel.Orientation=Orientation.Horizontal;
    c#代码里设置
    c#代码里设置效果
Margin属性
  • 用于在子元素周围添加空白空间。Margin是System.Windows.Thickness结构的属性，可以设置上、下、左、右四个方向的外边距。通过调整Margin属性，可以控制子元素之间的间隔以及子元素与StackPanel边缘之间的距离。这对于调整布局的外观和组织元素非常有用。
  • 例如设置StackPanel外边距上下左右都为30
// xaml中直接设置属性Margin="30"  当值设置一个值时，wpf 会默认填充上下左右边距为30
// 或 Margin="30 30 30 30 "  设置 左 上 右 下边距都为30 
<Window x:Class="WpfFirstApp.StackPanelWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfFirstApp"
        mc:Ignorable="d"
        Title="StackPanelWindow" Height="450" Width="800">
    <StackPanel Orientation="Vertical" Margin="30">
        <Button Content="按钮1"></Button>
        <Button Content="按钮2"></Button>
        <Button Content="按钮3"></Button>
        <Button Content="按钮4"></Button>
    </StackPanel>
</Window>


// 使用c# 代码实现设置外边距 30 ,stackPanel.Margin = new Thickness(30)
// 或 stackPanel.Margin = new Thickness(30,30,30,30); 左上右下 设置为30
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfFirstApp
{
    /// <summary>
    /// StackPanelWindow.xaml 的交互逻辑
    /// </summary>
    public partial class StackPanelWindow : Window
    {
        public StackPanelWindow()
        {
            InitializeComponent();
            this.Title = "StackPanel面板";
            StackPanel stackPanel = new StackPanel();
            this.Content = stackPanel;
            // 设置为横排
            stackPanel.Orientation = Orientation.Vertical;
			 // 设置外边距 30
			 stackPanel.Margin = new Thickness(30);
			 //或 设置外边距
			 //stackPanel.Margin = new Thickness(30,30,30,30);

            stackPanel.Children.Add(new Button()
            {
                Content = "按钮1"
            });
            stackPanel.Children.Add(new Button()
            {
                Content = "按钮2"
            });
            stackPanel.Children.Add(new Button()
            {
                Content = "按钮3"
            });
            stackPanel.Children.Add(new Button()
            {
                Content = "按钮4"
            });
        }
    }
}

设置外边距

Width和Height 属性
  • 用来设置控件的宽度和高度，当指定宽度和高度时则会取消自动的宽度和高度。
HorizontalAlignment和VerticalAlignment 属性
  • 于设置元素在容器中的水平和垂直对齐方式。对齐方式值有 Left, Right, Center, 和 Stretch，当容器的尺寸改变时，Stretch 值将使元素扩展以填充可用空间，而其他值将使元素保持其原始大小并在指定的对齐边缘进行定位。
  • 例如设置StackPanel的内容垂直排列并居中
	// 设置Orientation="Vertical"  VerticalAlignment="Center" 
	<Window x:Class="WpfFirstApp.StackPanelWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfFirstApp"
        mc:Ignorable="d"
        Title="StackPanelWindow" Height="450" Width="800">
    <StackPanel Orientation="Vertical"  VerticalAlignment="Center">
        <Button Content="按钮1"></Button>
        <Button Content="按钮2"></Button>
        <Button Content="按钮3"></Button>
        <Button Content="按钮4"></Button>
    </StackPanel>

</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfFirstApp
{
    /// <summary>
    /// StackPanelWindow.xaml 的交互逻辑
    /// </summary>
    public partial class StackPanelWindow : Window
    {
        public StackPanelWindow()
        {
            InitializeComponent();
            this.Title = "StackPanel面板";
            StackPanel stackPanel = new StackPanel();
            this.Content = stackPanel;
            // 设置为竖排
            stackPanel.Orientation = Orientation.Vertical;
            stackPanel.VerticalAlignment = VerticalAlignment.Center;

            stackPanel.Children.Add(new Button()
            {
                Content = "按钮1"
            });
            stackPanel.Children.Add(new Button()
            {
                Content = "按钮2"
            });
            stackPanel.Children.Add(new Button()
            {
                Content = "按钮3"
            });
            stackPanel.Children.Add(new Button()
            {
                Content = "按钮4"
            });
        }
    }
}

垂直居中效果

WrapPanel 面板

  • 用于将子元素排列在一行或一列中，当没有足够的空间时，它会将元素移动到下一行或列。与 StackPanel 不同，WrapPanel 会自动处理元素的对齐和换行。它也可以使用 Orientation 属性更改排列方向。Orientation 属性和StackPanel 一样，唯一的区别就是 排列 默认不同,WrapPanel 排列方式 横排（Horizontal，默认）和竖排（Vertical）

  • 例如: 横排（Horizontal，默认）

// 默认排列方式
<Window x:Class="WpfFirstApp.WrapPanelWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfFirstApp"
        mc:Ignorable="d"
        Title="WrapPanelWindow" Height="450" Width="800">
    <WrapPanel>
        <Button Content="按钮1" Height="80" Width="90"></Button>
        <Button Content="按钮2" Height="80" Width="90"></Button>
        <Button Content="按钮3" Height="80" Width="90"></Button>
        <Button Content="按钮4" Height="80" Width="90"></Button>
        <Button Content="按钮5" Height="80" Width="90"></Button>
        <Button Content="按钮6" Height="80" Width="90"></Button>
        <Button Content="按钮7" Height="80" Width="90"></Button>
        <Button Content="按钮8" Height="80" Width="90"></Button>
        <Button Content="按钮9" Height="80" Width="90"></Button>
        <Button Content="按钮10" Height="80" Width="90"></Button>
    </WrapPanel>
</Window>

横排

  • 设置 Orientation 属性为Vertical，垂直排列方式
// 设置  Orientation="Vertical" 属性
<Window x:Class="WpfFirstApp.WrapPanelWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfFirstApp"
        mc:Ignorable="d"
        Title="WrapPanelWindow" Height="450" Width="800">
    <WrapPanel Orientation="Vertical">
        <Button Content="按钮1" Height="80" Width="90"></Button>
        <Button Content="按钮2" Height="80" Width="90"></Button>
        <Button Content="按钮3" Height="80" Width="90"></Button>
        <Button Content="按钮4" Height="80" Width="90"></Button>
        <Button Content="按钮5" Height="80" Width="90"></Button>
        <Button Content="按钮6" Height="80" Width="90"></Button>
        <Button Content="按钮7" Height="80" Width="90"></Button>
        <Button Content="按钮8" Height="80" Width="90"></Button>
        <Button Content="按钮9" Height="80" Width="90"></Button>
        <Button Content="按钮10" Height="80" Width="90"></Button>
    </WrapPanel>
</Window>

竖排xaml

竖排

DockPanel 停靠面板

  • 用来控制UI元素在视窗中的位置就是停靠。DockPanel定义了一个Dock附加属性，其类型为Dock，是枚举类型，可取Left、Right、Top和Bottom四个值。注意Dock并没有一个Fi或Center的值，当LastChildFill属性设为True时，DockPanel用最后一个加入的UI元素填充所有剩下的地方。
// 当只有个按钮时,不控制宽高度时，默认填充所有的地方
// 增加一个按钮,第一个默认高度，并设置宽度为70，第二个高度会填充满然后看效果
// 可以依次添加停靠位置，并查看对应的效果
<Window x:Class="WpfFirstApp.DockPanelWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfFirstApp"
        mc:Ignorable="d"
        Title="DockPanel停靠面板" Height="450" Width="800">
    <DockPanel>
         <!--设置宽度为70，停靠方向为上-->
		 <Button Content="按钮靠上" Width="70"  DockPanel.Dock="Top"></Button>
		 <!--增加一个按钮设置宽度为70，停靠方向为上，并设置右对齐-->
		 <Button Content="按钮靠上右" Width="70" HorizontalAlignment="Right" DockPanel.Dock="Top"></Button>
		
		 <!--第三个按钮设置停靠上，并设置外边距10-->
		 <Button Content="按钮靠上" Margin="10" DockPanel.Dock="Top"></Button>
		
		 <!--第四个按钮设置靠左-->
		 <Button  Content="按钮靠左" DockPanel.Dock="Left" ></Button>
		 
		 <!--第五个按钮设置靠右-->
		 <Button Content="按钮靠右" DockPanel.Dock="Right"></Button>
		
		 <!--第六个按钮设置靠下-->
		 <Button Content="按钮靠下" DockPanel.Dock="Bottom"></Button>
		 <!--第七个按钮默认未设置停靠-->
		 <Button Content="默认未设置停靠"></Button>
    </DockPanel>
</Window>

只有一个按钮
两个按钮停靠
三个按钮
所有按钮停靠

Grid 控制面板

  • Grid控制面板是WPP中最常用的控制面板，以表格形式布局元素，可以创建复杂的二维布局。Grid的子控件被放置在一个个预先定义好的小格子中，这些格子称为单元格。每个单元格都有一个行和列的标识符，用于确定控件在该网格中的位置。当用Visual Studio创建WPF程序时Visual Studio会自动在XAML中添加标记。Grid排版和HTML表格排版是一样的，类似于 HTML 中的 table td 中的 row
    span 和 colspan 。
  • WPF 中的 Grid 的每一个单元格中可以放置多个控件，但控件可能会层叠在一起， 支持单元格的合并。
  • Grid 中的行和列可以自定义高度（Height）和宽度（Width），设置高度和宽度时可以采用两种写法：
  1. Height=”60”：不加“星号”表示固定的高度
  2. Height=”60*”：加“星号”表示“加权”的高度，在调整窗体大小时，高度或宽度会按窗体大小改变的比例进行缩
// Grid定义两行两列布局
<Window x:Class="WpfFirstApp.GridWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfFirstApp"
        mc:Ignorable="d"
        Title="Grid 面板" Height="450" Width="800">
    <Grid>
        <!--定义两行,两列-->
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition Height="200*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
         <!--设置第一行第一列，并设置为上对齐，为了看效果设置为高度的一半30-->
        <Button Grid.Column="0" Grid.Row="0" Height="30" Content="第一行第一列上对齐" VerticalAlignment="Top"></Button>
        <!--设置第一行第二列，并设置为下对齐，为了看效果设置为高度的一半30-->
        <Button Grid.Column="1" Grid.Row="0" Height="30" Content="第一行第二列下对齐" VerticalAlignment="Bottom"></Button>

         <!--演示Grid内容为层叠,再增加一个按钮,会盖住上一个第二列按钮-->
        <Button Grid.Column="1" Grid.Row="0" Content="第一行第二列不设置高度和对齐"></Button>

        <!--设置第二行-->
        <Button Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Content="第二行并合并两列"></Button>
    </Grid>
</Window>

graid布局

  • 用 GridSplit 控件结合 Grid 控件实现类似于 Windows 应用程序中 SplitContai
    ner 的功能,实现可以左右拖动，改变宽度，以上下拖动，改变高度
// 定义 3*3 的表格，其中放置分割线的列和行的宽度和高度设置为 Auto

<Window x:Class="WpfFirstApp.GridSplitWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfFirstApp"
        mc:Ignorable="d"
        Title="GridSplit 分割" Height="450" Width="800">
    <Grid>
        <!--定义三行三列-->
        <Grid.RowDefinitions>
            <RowDefinition Height="90*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="190*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="170*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <!--这里可以增加Grid列内容，不添加Button,则只会显示GridSplitter分割线-->
        <!--第一列三行左边，并设置外边距3-->
        <Button Content="第一列三行左边" Margin="3" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" />

        <Button Content="第一行第二列上边" Margin="3" Grid.Row="0" Grid.Column="2"  />

        <Button Content="第三行第二列下边" Margin="3" Grid.Row="2" Grid.Column="2"  />

        <!--添加GridSplitter 分割-->
        <!--设置在水平和垂直方向上都拉伸以填充整个空间，设置为第一列。并三行合并-->
        <GridSplitter Width="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Grid.Row="0" Grid.Column="1" Grid.RowSpan="3"></GridSplitter>

        <!--设置在水平和垂直方向上都拉伸以填充整个空间，设置为第二行，为两列-->
        <GridSplitter Height="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Grid.Row="1" Grid.Column="2"></GridSplitter>
        
    </Grid>
</Window>

分割
grid内容填充

UniformGrid 控制面板

  • 用于简化的网格布局。当控件添加到 UniformGrid 时，它们会排列在一个网格模式中，该网格模式会自动调整以使控件之间的距离保持均匀。单元格的数目将进行调整，以适应控件的数目。UniformGrid总是把行数和列数设为相等，每个单元只含有一个子元素。
//  UniformGrid添加7个按钮它会自动排列
<Window x:Class="WpfFirstApp.UniformGridWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfFirstApp"
        mc:Ignorable="d"
        Title="UniformGridWindow" Height="450" Width="800">
    <UniformGrid>
        <Button Content="按钮1"></Button>
        <Button Content="按钮2"></Button>
        <Button Content="按钮3"></Button>
        <Button Content="按钮4"></Button>
        <Button Content="按钮5"></Button>
        <Button Content="按钮6"></Button>
        <Button Content="按钮7"></Button>
    </UniformGrid>
</Window>

UniformGrid 排版

公众号“点滴分享技术猿”


关注

搬砖的工人
关注
  • 20
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
StackPanel：栈式面板基础简述
m0_57759387的博客
09-28 1749
StackPanel就是将控件按照行或列来顺序排列，但不会换行。
WPF教程二：布局之StackPanel面板
weixin_30297281的博客
01-12 1097
应用程序界面设计中，合理的元素布局至关重要，它可以方便用户使用，并将信息清晰合理地展现给用户。WPF提供了一套功能强大的工具-面板(Panel)，来控制用户界面的布局。你可以使用这些面板控件来排布元素。如果内置布局控件不能满足需要的话，还可以创建自定义的布局元素。 面板（Panel）WPF用于布局的面板主要有6个，StackPanel(栈面板)、WrapPanel（环绕面板）。DockPanel...
C# WPF入门学习主线篇（十三）—— StackPanel布局容器
最新发布
weixin_56595425的博客
06-09 1725
在《C# WPF入门学习主线篇（十三）—— StackPanel布局容器》这篇文章中，我们详细介绍了WPF中的 `StackPanel` 布局容器。本文涵盖了 `StackPanel` 的基本概念、常见属性及使用方法，并通过具体的示例代码展示了如何垂直和水平排列控件。此外，还讨论了 `StackPanel` 布局容器的优缺点，帮助读者在实际开发中做出更好的布局选择。
WPF布局控件之StackPanel布局
qq_36819973的博客
11-12 4470
在实际工作中，我们可以使用Orientation、HorizontalAlignment、VerticalAlignment 这三个属性组合各种排列和对齐方式。
【WPF应用10】基本控件-StackPanel：布局原理与实际应用
qq_35320456的博客
03-24 3004
WPF基本控件-StackPanel：布局原理与实际应用
WPF 控件专题 StackPanel控件详解
^@^lemon tea^@^
06-20 6030
WPF 控件专题 StackPanel控件详解
WPF_常用的五种布局方式
weixin_44564948的博客
04-29 1934
WPF_常用的五种布局方式 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Visual Studio 2015 * SQL Server 作者：叶 撰写时间：2019年01月01日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
WPF 的几个常用触发器
weixin_44538156的博客
09-17 380
数据触发器 DataTrigger 当TextBlock的值为“进行中”时，字体颜色为红色 <TextBlock Text="{Binding Status}" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock.Style> <Style>
WPF自定义VirtualizingPanel，实现界面动态布局
10-31
总的来说，自定义 `VirtualizingPanel` 是一种强大的技术，可以满足各种复杂界面布局的需求，同时也充分利用了 WPF 的数据虚拟化优势，提高了性能。通过结合 `ListBox` 控件，可以轻松地实现动态布局和数据绑定，...
WPF模拟工业面板上的旋钮开关
09-10
WPF允许开发者使用XAML（Extensible Application Markup Language）来描述UI元素，这是一种声明式的XML语言，可以非常直观地定义界面布局和控件属性。 要创建一个圆形旋钮开关，我们需要以下几个步骤： 1. **定义...
WPF中的高级自定义TreeView布局
04-08
在Windows Presentation Foundation (WPF) 中，`TreeView`控件是一种强大的工具，用于展示层次结构数据。本主题将深入探讨如何实现高级自定义的`TreeView`布局，这涉及到利用XAML语言、C#编程以及WPF框架提供的强大...
wpf.rar_WPF_c＃ wpf
09-19
5. **布局系统**：WPF提供五种布局面板（StackPanel、Grid、DockPanel、Canvas、WrapPanel），帮助开发者轻松组织和定位控件。 6. **资源字典**：资源字典用于存储可重用的样式、模板和颜色等资源，提高了代码的...
WPF学习示例程序.zip
12-25
6. **布局系统**：WPF的布局系统包括网格、堆栈面板、 dock面板等多种布局容器，可以方便地组织和调整控件的位置。学习如何利用这些布局容器，可以创建出灵活多变的界面。 7. **事件处理**：WPF控件支持多种事件，...
Grid和StackPanel不同的特点和区别
m0_59115955的博客
12-25 924
Grid适合于复杂的网格布局，可以精确控制控件的位置和大小；而StackPanel适合于简单的线性布局，按照水平或垂直方向堆叠控件。
WPF布局控件之StackPanel
就这样吧
02-27 1225
WPF布局控件之StackPanel
不得不懂的WPF布局
dust__的博客
05-31 3730
WPF用不同的容器(container)安排布局。每个容器有各自的布局逻辑一有些容器以堆栈方式布置元素，另一-些容器在网格中不可见的单元格中排列元素，等等。在WPF中非常抵制基于坐标的布局，而是注重创建更灵活的布局，使布局能够适应内容的变化、不同的语言以及各种窗口尺寸。迁移到WPF的许多开发人员会觉得新布局系统令自己倍感惊奇一这 也是开发人员面临的第一一个真正挑战。本博客介绍了常用的WPF布局，更好的有利于开发和提高效率
wpf之StackPanel布局
10-26 2486
注意两个参数： Orientation ：控制排列是水平方向，还是垂直方向（Horizontal 水平方向 Vertical垂直方向） FlowDirection：控制控件排序是从右往左还是从左往右，写两个简单的demo如下： <Window x:Class="StackPanel_One.MainWindow" xmlns="http://schemas.mic...
WPF 项目开发入门（二） WPF 页面布局
zhtbs的博客
07-18 6185
WPF布局与排版功能介绍
WPF控件自动排列布局
06-09
WPF中提供了多种控件自动排列布局的方式，以下是其中几种常用的方式： 1. WrapPanel WrapPanel是一个自动换行的面板，可以让子元素自动排列，并在需要时自动换行。当子元素宽度超过容器宽度时，WrapPanel会将子元素放到下一行。 示例代码如下： ```xaml <WrapPanel> <Button Content="Button 1" /> <Button Content="Button 2" /> <Button Content="Button 3" /> <Button Content="Button 4" /> <Button Content="Button 5" /> <Button Content="Button 6" /> <Button Content="Button 7" /> <Button Content="Button 8" /> </WrapPanel> ``` 2. UniformGrid UniformGrid是一个均匀排列子元素的面板，可以将子元素均匀分布在多行多列的网格中。 示例代码如下： ```xaml <UniformGrid Rows="2" Columns="4"> <Button Content="Button 1" /> <Button Content="Button 2" /> <Button Content="Button 3" /> <Button Content="Button 4" /> <Button Content="Button 5" /> <Button Content="Button 6" /> <Button Content="Button 7" /> <Button Content="Button 8" /> </UniformGrid> ``` 3. DockPanel DockPanel是一个将子元素停靠在容器边缘的面板，可以将子元素停靠在顶部、底部、左侧或右侧。 示例代码如下： ```xaml <DockPanel> <Button Content="Top" DockPanel.Dock="Top" /> <Button Content="Bottom" DockPanel.Dock="Bottom" /> <Button Content="Left" DockPanel.Dock="Left" /> <Button Content="Right" DockPanel.Dock="Right" /> <Button Content="Center" /> </DockPanel> ``` 这些自动排列布局方式都可以方便地实现控件的自动排列布局，具体使用哪种方式取决于您的布局需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

搬砖的工人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值