basquang™ on clouds

July 13, 2009

WPF: Layouts (P5)

Filed under: WPF — basquang @ 3:38 AM

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

image

<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

image

<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

image

<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)

image

<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ó.

image

<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

image

<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

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: