ListBox kèm hình ảnh.

Hôm nay tôi xin giới thiệu cách tạo một ListBox kèm hình ảnh trong WPF.
Đầu tiên, các bạn thêm các hình ảnh cần thiết vào project bằng cách click phải vào project | Add Existing File | Chọn file ảnh cần sử dụng.
Xong, các bạn mở file XAML và gõ mã sau vào:

<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 do uong" Height="345" Width="231">
    <ListBox Margin="10,10,0,13" Height="280" Name="Th_Do_uong" HorizontalAlignment="Left" VerticalAlignment="Top">
        <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>
</Window>


Như vậy, qua ví dụ trên ta thấy điểm chính để thêm text, hình ảnh,… vào mỗi chỉ mục của danh sách là việc kết hợp các phần tử UI riêng lẻ tương ứng vào cùng một phần tử Panel. Trong ví dụ trên, với mỗi <ListBoxItem> ta thêm vào một <StackPanel Orientation="Horizontal"> theo chiều ngang trong đó chứa 1 phần tử <Image> và một <TextBlock>. Nguồn dữ liệu của ảnh được xác định qua Source="địa chỉ dữ liệu".
Kết quả của ví dụ trên:

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