Xây dựng Control ImageListBox thật đơn giản với WPF

Xây dựng Control ImageListBox thật đơn giản với WPF

Ngoài những Control cơ bản như Button, TextBox, ComboBox, … của Windows Form, WPF còn cho phép người lập trình tạo những Control phức hợp giao diện tuyệt vời 1 cách dễ dàng.

Để cho dễ hiểu, đây là ví dụ 1 Image ListBox

clip_image002

Cách xây dựng 1 Image ListBox: ta tạo 1 ListBox, mỗi ListBoxItem thường gồm phần hình (Image) và phần chữ (Text). Nhưng ListBoxItem chỉ có thể gồm 1 control con, tức là chỉ có thể là hình hoặc chữ. Ta giải quyết bằng cách dùng Panel để chứa hình và chữ, sau đó mới chuyển thành ListBoxItem.

Hướng dẫn ví dụ trên:

Tạo 1 ứng dụng WPF. Sau đó tạo 1 ListBox (có thể kéo thả trên toolbox hoặc coding). Ta được như sau:

clip_image004

Code XAML tương ứng:

<Window x:Class=”WpfApplication3.Window1″

    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

    Title=”Window1″ Height=”300″ Width=”300″>

    <Grid>

        <ListBox Margin=”18,14,105,91″ Name=”listBox1″ FontSize=”18″/>

    </Grid>

</Window>

 

Để có thể thêm các ListBoxItem vào, ta tách đoạn

<ListBox Margin=”18,14,105,91″ Name=”listBox1″ FontSize=”18″/>

 

Ra thành:

<ListBox Margin=”18,14,105,91″ Name=”listBox1″ FontSize=”18″>

</ListBox>

 

Ta bắt đầu thêm 1 ListBoxItem vào ListBox trên bằng cách gõ code XAML ,thẻ <ListBoxItem>

<ListBox Margin=”18,14,105,91″ Name=”listBox1″ FontSize=”18″>

<ListBoxItem>

</ListBoxItem>

</ListBox>

 

Sau đó, để chứa hình và chữ, ta dùng 1 loại Panel, ví dụ như StackPanel:

<ListBoxItem>

            <StackPanel>

            </StackPanel>

      </ListBoxItem>

Môi trường Visual Studio hỗ trợ rất tốt việc code XAML, khi ta để dấu nháy vào thẻ Control nào thì thanh Properties sẽ hiển thị các Properties của Control đó. Vì vậy, ta có thể dễ dàng thay đổi các thuộc tính trên Properties.

 Ví dụ, trong đây muốn StackPanel của ta chứa các phần tử được xếp hàng ngang thì ta sẽ đổi thuộc tính Orientation thành Horizontal.

<StackPanel Orientation=”Horizontal”>

</StackPanel>

 

Sau đó, ta sẽ thêm hình (thẻ <Image>) và chữ (thẻ <TextBlock> vào trong StackPanel. Đoạn code sau là phần code cho phần tử USB.

           <ListBoxItem>

                <StackPanel Orientation=”Horizontal”>

                    <Image Source=”usbkingston.jpg” Width=”60″ Height=”60″ Stretch=”Fill”></Image>

                    <TextBlock VerticalAlignment=”Center”>USB</TextBlock>

                </StackPanel>

            </ListBoxItem>

 

Hình usbkingston.jpg thì trước đó mình đã add vào project. Cách add file vào project giống như làm việc trên Windows Form. Thuộc tính Stretch của Image bên WPF tương đương với SizeMode bên Windows Form.

Vậy là xong 1 ListBoxItem, làm tương tự với các ListBoxItem còn lại.

Toàn bộ XAML code:

<Window x:Class=”WpfApplication3.Window1″

    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

    Title=”Window1″ Height=”300″ Width=”300″>

    <Grid>

        <ListBox Margin=”18,14,105,91″ Name=”listBox1″ FontSize=”18″>

               

           <ListBoxItem>

                <StackPanel Orientation=”Horizontal”>

                    <Image Source=”usbkingston.jpg” Width=”60″ Height=”60″ Stretch=”Fill”></Image>

                    <TextBlock VerticalAlignment=”Center”>USB</TextBlock>

                </StackPanel>

            </ListBoxItem>

 

            <ListBoxItem>

                <StackPanel Orientation=”Horizontal”>

                    <Image Source=”/WpfApplication3;component/xbox.jpg” Width=”60″ Height=”60″ Stretch=”Fill”></Image>

                    <TextBlock VerticalAlignment=”Center”>XBox</TextBlock>

                </StackPanel>

            </ListBoxItem>

               

            <ListBoxItem>

                <StackPanel Orientation=”Horizontal”>

                    <Image Source=”/WpfApplication3;component/n97.jpg” Width=”60″ Height=”60″ Stretch=”Fill”></Image>

                    <TextBlock VerticalAlignment=”Center”>N97</TextBlock>

                </StackPanel>

            </ListBoxItem>

       

        </ListBox>

    </Grid>

</Window>

Xây dựng thật dễ dàng với WPF, với XAML. Vậy ta có xây dựng bằng code C# được hay không?

Câu trả lời là được. Đây là đoạn code tạo 1 ListBoxItem:

 

            //tạo hình

            Image img = new Image();

            img.Source = new BitmapImage(new Uri(“usbkingston.jpg”,UriKind.Relative));

            img.Width = 60;

            img.Height = 60;

            img.Stretch = Stretch.Fill;

 

            //tạo chữ

            TextBlock tb = new TextBlock();

            tb.Text = “USB”;

            tb.FontSize = 18;

            tb.VerticalAlignment = VerticalAlignment.Center;

 

            //tạo stackpanel

            StackPanel sp = new StackPanel();

            sp.Orientation = Orientation.Horizontal;

            sp.Children.Add(img);//thêm hình vào panel

            sp.Children.Add(tb);//thêm chữ vào panel

 

            listBox1.Items.Add(sp);//thêm stackpanel vào listbox

So với đoạn XAML tương đương:

           <ListBoxItem>

                <StackPanel Orientation=”Horizontal”>

                    <Image Source=”usbkingston.jpg” Width=”60″ Height=”60″ Stretch=”Fill”></Image>

                    <TextBlock VerticalAlignment=”Center”>USB</TextBlock>

                </StackPanel>

            </ListBoxItem>

 

Tới đây, ta thấy được tầm quan trọng của việc code trong 1 ứng dụng WPF. XAML xử lý tốt hơn về giao diện khởi động. Còn mã trình (C# hoặc VB) mặc dù từ C# 3.0 ta cũng có thể object initializer để giảm bớt lượng code nhưng vẫn có vẻ khó cảm nhận và xử lý hơn XAML. Song đó cũng cần phải biết cài đặt bằng mã trình để có thể điều khiển, cài đặt động trong ứng dụng.

Thêm 1 mẫu demo cho Image ListBox:

clip_image006

One response to “Xây dựng Control ImageListBox thật đơn giản với WPF

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s