WPF: Layouts (P5)

StackPanel: Sắp xếp các controls từ trên xuống dưới, hoặc từ trái qua phải tùy thuộc vào thuộc tính orientation của panel

<StackPanel Orientation="Horizontal">

        <Button>Button1</Button>

        <Button>Button2</Button>

        <StackPanel Orientation="Vertical">

            <Button>Button3</Button>

            <Button>Button4</Button>

        </StackPanel>

    </StackPanel>

Đặc điểm:

- Size của các control fit với nội dung của nó

- Không tự động sử dụng hết khoảng trống

- Có thể lồng giữa nhiều StackPanel với nhau hoặc với các layouts khác

Grid: Sắp xếp các controls theo các hàng và cột một cách cố định giống như là HTML

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition />

        <RowDefinition />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition />

        <ColumnDefinition />

        <ColumnDefinition />

    </Grid.ColumnDefinitions>

    <Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">A</Button>

    <Button Grid.Row="0" Grid.Column="2">C</Button>

    <Button Grid.Row="1" Grid.Column="0" Grid.RowSpan="2">D</Button>

    <Button Grid.Row="1" Grid.Column="1">E</Button>

    <Button Grid.Row="1" Grid.Column="2">F</Button>

    <Button Grid.Row="2" Grid.Column="1">H</Button>

    <Button Grid.Row="2" Grid.Column="2">I</Button>

</Grid>

Đặc điểm

- Các items sẽ phải chỉ ra nó đặt trong cell nào của Grid

- Các item được đặt vừa trong cell

- Có thể sử dụng nhiều hàng, hoặc cột để chứa nội dung. (Sử dụng RowSpan, ColumnSpan)

WrapPanel: Sắp xếp các items theo Line cho đến khi gặp Border (Không đủ khoảng trống để chứa control) sau đó sẽ chuyển sang Line tiếp theo

<WrapPanel Background="Beige">

        <Button>One</Button>

        <Button>Two</Button>

        <Button>Three</Button>

        <Button>Four</Button>

        <Button>Five</Button>

        <Button>Six</Button>

        <Button>Seven</Button>

        <Button>Eight</Button>

</WrapPanel>

Đặc điểm:

- Tự động sắp xếp các item sao cho phù hợp với nội dụng (độ dài và rộng) của nó

DockPanel: Sắp xếp các controls theo 5 vị trí tương ứng: đỉnh (top), đáy (bottom), trái (left), phải (right) và trung tâm (center)

<DockPanel>

        <Button DockPanel.Dock="Top">Top</Button>

        <Button DockPanel.Dock="Bottom">Bottom</Button>

        <Button DockPanel.Dock="Left">Left</Button>

        <Button DockPanel.Dock="Right">Right</Button>

        <Button>Fill</Button>

</DockPanel>

Đặc điểm:

- Các items cần phải xác định đặt trong DockPanel nào.

- Có thể đặt nhiều control trong một vùng

- Item tự động fit phù hợp với content của nó

Canvas: Sắp xếp các item giựa theo vị trí (position) và kích cỡ (size) của nó.

<Canvas Background="Yellow" Width="150" Height="100">

        <TextBlock Canvas.Left="10" Canvas.Top="20">Hello</TextBlock>

        <TextBlock Canvas.Right="10" Canvas.Bottom="20">world!</TextBlock>

</Canvas>

Đặc điểm:

- Không tự động sắp xếp lại control khi size của Canvas thay đổi.

UniformGrid: Sắp xếp các item trong một lưới với cùng số hàng và số cột giống nhau về kích thước

<UniformGrid TextBlock.TextAlignment="Center">

        <TextBlock Text="X" />

        <TextBlock Text="O"/>

        <TextBlock Text="X"/>

        <TextBlock Text="X"/>

        <TextBlock Text="X"/>

        <TextBlock Text="O"/>

        <TextBlock Text="O"/>

        <TextBlock Text="O"/>

        <TextBlock Text="X"/>

</UniformGrid>

Đặc điểm:

- số cell được tự động xác định thông qua số item