Hộp mở rộng (Expander).

Expander là một trong những điều khiển UI mới được giới thiệu trong WPF như một điều khiển cơ bản. Expander cho phép thu gọn hoặc mở rộng một nội dung nào đó chứa trong nó, tương tự một node trong TreeView, bằng việc click vào biễu tượng mũi tên.
Ví dụ một ứng dụng của Expander:

Dưới đây là mã XAML của ví dụ trên:

<Window x:Class="FirstWPFApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Danh muc cac mon" Height="372" Width="269">
    <StackPanel>
        <Expander FontFamily="Times New Roman" FontSize="18" FontStyle="Oblique" Header="Đồ uống" Background="Azure">
            <ListBox Margin="10,10,0,13">
                <ListBoxItem Background="Beige">
                    <StackPanel Orientation="Horizontal">
                        <Image Width="50" Height="50" Source="nuoc_ep.jpg" />
                        <TextBlock Margin="5" VerticalAlignment="center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Nước ép trái cây</TextBlock>
                    </StackPanel>
                </ListBoxItem>
       
                <ListBoxItem Background="Beige">
                    <StackPanel Orientation="Horizontal">
                        <Image Width="50" Height="50" Source="nuoc_ep_1.jpg" />
                        <TextBlock Margin="5" VerticalAlignment="center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Nước cà chua ép</TextBlock>
                    </StackPanel>
                </ListBoxItem>
       
                <ListBoxItem Background="Beige">
                    <StackPanel Orientation="Horizontal">
                        <Image Width="50" Height="50" Source="nuoc_cam.jpg" />
                        <TextBlock Margin="5" VerticalAlignment="center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Nước cam ép</TextBlock>
                    </StackPanel>
                </ListBoxItem>

                <ListBoxItem Background="Beige">
                    <StackPanel Orientation="Horizontal">
                        <Image Width="50" Height="50" Source="nuoc_carot.jpg" />
                        <TextBlock Margin="5" VerticalAlignment="center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Nước ép cà rốt</TextBlock>
                    </StackPanel>
                </ListBoxItem>
       
                <ListBoxItem Background="Beige">
                    <StackPanel Orientation="Horizontal">
                        <Image Width="50" Height="50" Source="Nuoc oi ep.jpg" />
                        <TextBlock Margin="5" VerticalAlignment="center" FontFamily="Times New Roman" FontStyle="Italic" FontSize="18">Nước ổi ép</TextBlock>
                    </StackPanel>
                </ListBoxItem>
       
            </ListBox>
        </Expander>
        <Expander FontFamily="Times New Roman" FontSize="18" FontStyle="Oblique" Header="Đồ ăn" Background="BlanchedAlmond">
            <ListBox>
                <ListBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="banhxeo.jpg" Width="50" Height="50" />
                        <TextBlock VerticalAlignment="Center">Bánh xèo</TextBlock>
                    </StackPanel>
                </ListBoxItem>
               
                <ListBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="comchien.jpg" Width="50" Height="50" />
                        <TextBlock VerticalAlignment="Center">Cơm chiên Dương Châu</TextBlock>
                    </StackPanel>
                </ListBoxItem>
               
                <ListBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="bunbohue.jpg" Width="50" Height="50" />
                        <TextBlock VerticalAlignment="Center">Bún bò Huế</TextBlock>
                    </StackPanel>
                </ListBoxItem>
               
                <ListBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="photai.jpg" Width="50" Height="50" />
                        <TextBlock VerticalAlignment="Center">Phở tái</TextBlock>
                    </StackPanel>
                </ListBoxItem>
               
            </ListBox>
        </Expander>
    </StackPanel>
</Window>


Các bạn thấy đấy, việc sử dụng Expander trong WPF cũng khá đơn giản với cùng nguyên tắc như các điều khiển UI cơ bản khác.
Chúc các bạn thành công.

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