且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

WPF布局-面板类(二)

更新时间:2022-09-18 23:17:18

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,如需转载请自行联系原作者