WPF WrapPanel與Grid布局

標籤：

在設計用戶端介面時，一些布局元素經常用到.Grid StackPanel Canvas WrapPanel等

下面我們舉個案例說明下Grid與WrapPanel一起使用的情境。

1、如上這種布局，在子項目數量未知的情況下，我們應該使用WrapPanel來布局，子項目會自己換行。

2、然後每一行的元素中，第一個要居左，第二個要置中，第三個要居要。這個應該通過Grid來布局，添加三列，然後對應的元素在每列中設定水平方向。

下面是代碼：

1、介面：

<Window x:Class="MainWindow"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="MainWindow" Height="250" Width="500" Loaded="MainWindow_OnLoaded" WindowStartupLocation="CenterScreen">    <Window.Resources>    </Window.Resources>    <Grid>        <ScrollViewer>            <WrapPanel x:Name="MyWrapPanel" Margin="10,0">            </WrapPanel>        </ScrollViewer>    </Grid></Window>

2、後台（語言是VB，其實VB和C#差不多的）

Class MainWindow    Private Sub MainWindow_OnLoaded(sender As Object, e As RoutedEventArgs)        Dim grid As Grid        Dim index = 0        For i As Integer = 0 To 10            If index Mod 3 = 0 Then                grid = New Grid()                grid.Width = 440                grid.Margin = New Thickness(0, 20, 0, 20)                grid.ColumnDefinitions.Add(New ColumnDefinition())                grid.ColumnDefinitions.Add(New ColumnDefinition())                grid.ColumnDefinitions.Add(New ColumnDefinition())                MyWrapPanel.Children.Add(grid)            End If            Dim checkBox = New CheckBox()            Dim value = index Mod 3            If value = 0 Then                checkBox.HorizontalAlignment = HorizontalAlignment.Left            ElseIf value = 1 Then                checkBox.HorizontalAlignment = HorizontalAlignment.Center            ElseIf value = 2 Then                checkBox.HorizontalAlignment = HorizontalAlignment.Right            End If            Controls.Grid.SetColumn(checkBox, value)            grid.Children.Add(checkBox)            index += 1        Next    End SubEnd Class

 

WPF WrapPanel與Grid布局