WPF布局-面板类(二)

简介:

DockPanel,停靠模板,DockPanel默认的停靠方式是水平,并且最后一个放入的元素,默认是填充模式。 在WinForm中,是通过设置Dock属性,停靠控件的,不过这个属性要优先于控件的Height和Width属性,即设置Dock后,会改变Height和Width的值。但在WPF中,标签没有了Dock属性,如果标签放在DockPanel中,这个标签就中增加一个属性“DockPanel.Dock”,它是控制标签本身在DockPanel中的呈现方式,有四个值“Top,Bootom,Left,Right”不过这个属性设置后,不会更改标签的Height和Width的值。

<DockPanel Margin="12,94,65,49" Background="Green" >

<Rectangle DockPanel.Dock="Top" Height="52" Name="rectangle1" Fill="#FFD13E3E"/>

<Rectangle DockPanel.Dock="Left" Fill="#FF22D53E" Name="rectangle2" ;88" />

<Rectangle Fill="#FFD5AC22" Name="rectangle3" />

</DockPanel>

效果如下:

红色向顶端对齐,所以DockPanel.Dock=”Top”,绿色居左DockPanel.Dock=”Left”,黄色是填充,所以不用设置这个属性,所以Width和Height都是Auto,Auto是默认值。

StackPanel,是一个放置横平坚直标签的面板,可以通过设置面板的Orientation属性来设置StackPanel子标签的放置,Vertical为纵向,Horizontal为横向。

例如:

<StackPanel Orientation="Horizontal" Height="82" VerticalAlignment="Top" Margin="20,12,334,0">

<Rectangle ;20" Name="rectangle4" Fill="#FFD13E3E"/>

<Rectangle ;20" Fill="#FF22D53E" Name="rectangle5" />

<Rectangle ;20" Fill="#FFD5AC22" Name="rectangle6" />

</StackPanel>

<StackPanel Margin="20,100,334,119" Orientation="Vertical">

<Rectangle Height="20" Name="rectangle1" Fill="#FFD13E3E"/>

<Rectangle Height="20" Fill="#FF22D53E" Name="rectangle2" />

<Rectangle Height="20" Fill="#FFD5AC22" Name="rectangle3" />

</StackPanel>

WrapPanel是默认从左到右顺序排放控件的面板,回在超到面板宽度后自动排放到下一行。

<WrapPanel Margin="0,0,266,133" Orientation="Horizontal" FlowDirection="LeftToRight">

<Rectangle Height="50" ;50" Name="rectangle1" Fill="#FFD13E3E"/>

<Rectangle Height="50" ;50" Fill="#FF22D53E" Name="rectangle2" />

<Rectangle Height="50" ;50" Fill="#FFD5AC22" Name="rectangle3" />

<Rectangle Height="50" ;50" Name="rectangle4" Fill="#FF011570"/>

<Rectangle Height="50" ;50" Fill="#FFD022D5" Name="rectangle5" />

<Rectangle Height="50" ;50" Fill="#FFB0D522" Name="rectangle6" />

</WrapPanel>

如下图

VirtualizingStackPanel是一个比较特别的面板,MSDN是这样撒描术的“标准布局系统可以创建项容器并为每个与列表控件关联的项计算布局。“虚拟化”是指一种技术,通过该技术,可根据屏幕上所显示的项来从大量数据项中生成用户界面 (UI) 元素的子集。”似乎很难懂,意思就是在给一些列表控件加载子项时,VirtualizingStackPanel 布局子项。例如:

ListBox一般情况下是垂直的,我们可以通过修改VirtualizingStackPanel的Orientation=”Horizontal”可改变排布,代码如下:

<ListBox Height="167" Name="personList" ;120">

<ListBox.ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel Orientation="Horizontal">

</VirtualizingStackPanel>

</ItemsPanelTemplate>

</ListBox.ItemsPanel>

<ListBox.ItemTemplate>

<DataTemplate>

<Label Content="{Binding Path=control}"></Label>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

<Label Height="30" Name="Count_Lab" Background="#FFCCF8F8" />

<Button Height="23" Name="Fill_But" ;75" Click="Fill_But_Click">填充</Button>

后台代码:

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

private void Fill_But_Click(object sender, RoutedEventArgs e)

{

List<PanelConstrols> cons = new List<PanelConstrols>();

DateTime dt1 = DateTime.Now;

for (int i = 0; i < 5; i++)

{

Label label = new Label();

label.Content = "Label"+i.ToString ();

label.Height =30;

PanelConstrols pc = new PanelConstrols();

pc.control = label;

cons.Add(pc);

}

this.personList.ItemsSource =cons;

DateTime dt2 = DateTime.Now;

TimeSpan ts = dt2 - dt1;

Count_Lab.Content ="用时"+ ts.Milliseconds+"毫秒";

}

}

class PanelConstrols

{

public Control control

{

get;

set;

}

}

会发现,ListBox中的控件会横向显示。可能有人想,不用VirtualizingStackPanel也能达到目的呀,是的,这都是通用的,但VirtualizingStackPanel提供了一种虚拟技术,来快加载显示的列表子项,数据量大时,效果更明显,下面来做个测试:

在xaml中, &lt;ItemsPanelTemplate>中如果是VirtualizingStackPanel时,点击按钮,会计算出用时,几次平均值为45ms左右,如果把VirtualizingStackPanel换成StackPanel,平均时间为135ms左右,可以见用VirtualizingStackPanel在性能上提升了很多。


















本文转自桂素伟51CTO博客,原文链接: http://blog.51cto.com/axzxs/414348,如需转载请自行联系原作者




相关文章
|
开发框架 .NET C#
2000条你应知的WPF小姿势 基础篇<63-68 Triggers和WPF类逻辑结构>
2000条你应知的WPF小姿势 基础篇<63-68 Triggers和WPF类逻辑结构>
95 0
|
11月前
|
C# UED 开发者
WPF与性能优化:掌握这些核心技巧,让你的应用从卡顿到丝滑,彻底告别延迟,实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法,详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈,如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着,通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画,从而有效提升应用性能。通过这些优化措施,WPF应用将更加流畅,用户体验也将得到显著改善。
929 1
|
11月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(8) -- 使用Converter类实现内容的转义处理
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(8) -- 使用Converter类实现内容的转义处理
|
11月前
|
开发者 C# Windows
WPF布局大揭秘:掌握布局技巧,轻松创建响应式用户界面,让你的应用程序更上一层楼!
【8月更文挑战第31天】在现代软件开发中,响应式用户界面至关重要。WPF(Windows Presentation Foundation)作为.NET框架的一部分,提供了丰富的布局控件和机制,便于创建可自动调整的UI。本文介绍WPF布局的基础概念与实现方法,包括`StackPanel`、`DockPanel`、`Grid`等控件的使用,并通过示例代码展示如何构建响应式布局。了解这些技巧有助于开发者优化用户体验,适应不同设备和屏幕尺寸。
369 0
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
382 1
|
前端开发 C# 索引
浅谈WPF之UI布局
一个成功的软件,离不开人性化的UI设计,如何抓住用户第一视觉,让用户产生依赖感,合适优雅的布局必不可少。本文以一些简单的小例子,简述WPF中布局 面板 控件的使用,仅供学习分享使用,如有不足之处,还请指正。
232 1
|
前端开发 C# 容器
WPF技术之控件布局
WPF提供了多种布局控件和技术,可以帮助开发人员轻松创建灵活的用户界面。
239 0
WPF技术之控件布局
WPF-布局样式练习-Day01
WPF-布局样式练习-Day01
192 0
|
前端开发 C# 开发者
WPF MVVM 架构 Step By Step(3)(把后台代码移到一个类中)
原文:WPF MVVM 架构 Step By Step(3)(把后台代码移到一个类中)   我觉得大部分开发者应该已经知道怎么去解决这个问题。一般都是把后台代码(GLUE code)移动到一个类库。这个类库用来代表UI的属性和行为。
1091 0