グリッドのStackPanel DockPanel WrapPanelアプリケーションレイアウトC＃プログラミング

この章では、第1の3次元デザインは良い助けを持っているの後、パネルのレイアウトのいくつかの基本的な知識を説明します。

StackPanel
DockPanel
WrapPanel

まず、Gird行（行）とカラム（列）、次のコードを見て話を見てみましょう。

       <Grid.RowDefinitions>
            <RowDefinition高さ= " 30 " />
            <RowDefinition高さ= " オート" />
        </Grid.RowDefinitions>

ライン1 = 30行の高さが設定され、2つのエフェクトの自動行の高さ：

修正がある場合 <高RowDefinition = 「* 」 /> 残りの領域の影響を満たします。

したがってまた、カラム（列）プロパティを設けていることがわかります

      <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

残りの領域を埋めるために同じ3つの方法で、実際のパラメータ値が、「オート」の適応塗りつぶし、「*」の幅を変更します。

            <ColumnDefinition幅= " 180 " />
            <ColumnDefinition幅= " オート" />
            <ColumnDefinition幅= " * " />

だから我々はそれを達成する方法を、行の複数の列をマージしたい場合は？ここでは、スパン属性パラメータを使用する必要があります Grid.ColumnSpan = 「N 」 N代表的な（合成）の列を横切って、例えば、第一カラムから第二カラムに合流し始めます。

Grid.Column = " 1 " Grid.ColumnSpan = " 2 "

効果：

第3列の最初の列から合成： Grid.Column = 「1 」 Grid.ColumnSpan = 「3 」

効果：

同じ原理が、操作はラインにも当てはまります。

= Grid.RowSpan 「N 」行数のNを表すがマージ。

それでは、我々はそれを処理する方法を、一箇所に複数のコントロールを置きたい？ここでは、のStackPanelを使用する必要があります。

        <StackPanelのGrid.Row = " 5 " Grid.Column = " 0 " >
            .....
        </ StackPanelの>

容器は、レイアウトを制御するように設定することができ、例えば垂直に配置されたコントロールのために、垂直方向又は水平方向です。

        <StackPanelのGrid.Row = " 5 " Grid.Column = " 0 " >
            <StackPanelのオリエンテーション= " 垂直" VerticalAlignmentを= " センター" >
                <ラベルの内容= " stackPanel1 "フォアグラウンド= " ホワイト" />
                <ラベルの内容= " stackPanel2 "フォアグラウンド= " ホワイト" />
            </ StackPanelの>
        </ StackPanelの>

同様に水平位置制御：

        </ StackPanelの>
        <のStackPanel Grid.Row = " 5 " Grid.Column = " 1 " >
            <StackPanelの向き= " 横"たHorizontalAlignment = " ストレッチ" >
                <ラベルの内容= " stackPanel3 "フォアグラウンド= " ホワイト" />
                <ラベルの内容= " stackPanel4 "フォアグラウンド= " ホワイト" />
            </ StackPanelの>
        </ StackPanelの>

効果：

さらにソートされたレイアウト設定することがあります。オリエンテーション= 「横」たHorizontalAlignment = 「左」流れ方向= 「LeftToRight 」

その後、我々はについて話 DockPanel 、以下のルーチンを見て、コンテナ適応ウィンドウレイアウトをドッキング：

 1         <DockPanel Grid.Column="2" Grid.Row="5">
 2             <StackPanel DockPanel.Dock="Right" Orientation="Vertical">
 3                 <GroupBox Header="Title1" Foreground="White" Height="auto">
 4                     <StackPanel Orientation="Vertical" FlowDirection="RightToLeft">
 5                         <Label Content="dockPanel1" Foreground="White"/>
 6                         <Label Content="dockPanel2" Foreground="White"/>
 7                     </StackPanel>
 8                 </GroupBox>
 9                 <GroupBox Header="Tile2" Foreground="White" Height="auto">
10                     <StackPanel Orientation="Vertical" FlowDirection="LeftToRight">
11                         <Label Content="dockPanel3" Foreground="White"/>
12                         <Label Content="dockPanel4" Foreground="White"/>
13                     </StackPanel>
14                 </GroupBox>
15             </StackPanel>
16         </DockPanel>

效果：

在第二列，第五行添加一个容器，该容器内列表装入两个组盒器，并在组盒器内添加控件。由例子可以看出 DockPanel 容器适合整体布局。

最后我们说一下具有自动换行功能的WrapPanel容器：

       <Grid Grid.Row="5" Grid.Column="3">
            <WrapPanel Orientation="Horizontal">
                <Label Content="wrapPanel1" Foreground="White"/>
                <Label Content="wrapPanel2" Foreground="White"/>
            </WrapPanel>
        </Grid>

效果：

End.

谢谢.

グリッドのStackPanel DockPanel WrapPanelアプリケーションレイアウトC＃プログラミング

おすすめ