The Image control

Hình ảnh trong wpf cho phép bạn hiển thị hình ảnh trong ứng dụng. Đây là control có tính đa dụng cao, có thể sử dụng trong nhiều trường hợp khác nhau. Trước hết, hãy xem một ví dụ cơ bản để hiển thị hình ảnh trên cửa sổ.

<Image Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />

Kết quả sẽ như thế này

Thuộc tính Source được sử dụng trong ví dụ trên dùng để chỉ định hình ảnh được hiển thị, là thuộc tính quan trọng nhất của control này.Vì vậy hãy bắt đầu tìm hiểu về nó.

Một số thuộc tính thường dùng

Như bạn có thể thấy từ ví dụ đầu tiên, thuộc tính Source làm nó trở nên dễ dàng hơn để xác định hình ảnh sẽ được hiển thị bên trong Image control - trong ví dụ này, chúng tôi sử dụng một ảnh chứa ở nơi khác, mà Image control sẽ tự động tìm nạp và hiển thị ngay khi nó hiển thị. Đó là một ví dụ điển hình cho việc điều khiển hình ảnh linh hoạt như thế nào, nhưng trong nhiều tình huống khác, bạn có thể muốn gói hình ảnh với ứng dụng của mình, thay vì tải nó từ một nguồn từ xa. Điều này có thể thực hiện một cách dễ dàng.

Thông thường, bạn có thể thêm các tệp tài nguyên vào chương trình của bạn, những tài nguyên này có sẵn và có thể được tìm thấy trong tab Solution Explorer như các tệp khác liên quan đến WPF (Windows, User Controls, v.v.). Một ví dụ điển hình về tệp tài nguyên là hình ảnh, bạn có thể chỉ cần sao chép 1 tệp từ thư mục chỉ định vào trong chương trình. Tệp hình ảnh này sẽ được biên dịch vào trong ứng dụng của bạn (trừ việc bạn thiết lập VS không thực hiện) và những file này sẽ được định dạng theo URL. Chính vì thế, nếu bạn có 1 tệp hình ảnh với tên gọi "google.png" đặt ở thư mục "Images", cú pháp để gọi ra sẽ như sau:

<Image Source="/WpfTutorialSamples;component/Images/google.png" />

Các URI này, thường được gọi là "Pack URI's" (Gói URI), là một chủ đề hơi khó hiểu với nhiều chi tiết nữa, nhưng giờ, bạn chỉ cần nhớ là cơ bản của nó thì gồm có hai phần:

• Phần đầu tiên (/WpfTutorialSamples;component), nơi có đoạn mã có tên (assembly name) (WpfTutorialSamples trong ứng dụng) thì được kết hợp với từ "component"
• Phần thứ hai, nơi đường dẫn tương đối của tài nguyên được chỉ định: /Images/google.png

Sử dụng cú pháp này, bạn có thể dễ dàng tham chiếu các tài nguyên có trong ứng dụng của mình. Để đơn giản hóa mọi thứ, WPF cũng sẽ chấp nhận một URL tương đối đơn giản - điều này sẽ được chấp thuận trong hầu hết các trường hợp, trừ khi bạn đang làm gì đó phức tạp hơn trong ứng dụng của mình, liên quan đến tài nguyên. Sử dụng một URL tương đối đơn giản, nó sẽ trông như thế này:

<Image Source="/Images/google.png" />

Loading hình ảnh động (sử dụng Code)

Việc chỉ định Nguồn hình ảnh trực tiếp trong XAML của bạn sẽ giải quyết được rất nhiều trường hợp, nhưng đôi khi bạn cần tải một hình ảnh động, ví dụ: dựa trên sự lựa chọn của người dùng Điều này có thể làm từ Code-behind. Đây là cách bạn có thể tải hình ảnh được tìm thấy trên máy tính của người dùng, dựa trên lựa chọn của họ từ OpenFileDialog:

private void BtnLoadFromFile_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog openFileDialog = new OpenFileDialog();
    if(openFileDialog.ShowDialog() == true)
    {
    Uri fileUri = new Uri(openFileDialog.FileName);
    imgDynamic.Source = new BitmapImage(fileUri);
    }
}

Hãy chú ý cách tạo ra một đối tượng BitmapImage, thông qua Uri object trước đó, dựa trên đường dẫn được chọn từ dialog. Chúng ta có thể sử dụng cùng kỹ thuật để tải một ảnh nằm trong ứng dụng như một tài nguyên

private void BtnLoadFromResource_Click(object sender, RoutedEventArgs e)
{
    Uri resourceUri = new Uri("/Images/white_bengal_tiger.jpg", UriKind.Relative);
    imgDynamic.Source = new BitmapImage(resourceUri);        
}

Chúng ta sử dụng cùng một đường dẫn tương tự như chúng ta đã làm ở một trong những ví dụ trước - chỉ cần chắc chắn là chuyển vào giá trịUriKind.Relative khi bạn tạo đối tượng Uri (Uri instance), vì vậy máy có thể hiểu rằng đường dẫn được cung cấp không phải là một đường dẫn tuyệt đối. Đây là XAML source cũng như ảnh chụp màn hình của mẫu Code-behind:

<Window x:Class="WpfTutorialSamples.Basic_controls.ImageControlCodeBehindSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Basic_controls"
    mc:Ignorable="d"
    Title="ImageControlCodeBehindSample" Height="300" Width="400">
    <StackPanel>
    <WrapPanel Margin="10" HorizontalAlignment="Center">
        <Button Name="btnLoadFromFile" Margin="0,0,20,0" Click="BtnLoadFromFile_Click">Load from File...</Button>
        <Button Name="btnLoadFromResource" Click="BtnLoadFromResource_Click">Load from Resource</Button>
    </WrapPanel>
    <Image Name="imgDynamic" Margin="10"  />
    </StackPanel>
</Window>

Thuộc tính Stretch

Sau thuộc tính Source, thuộc tính quan trọng với những lý do rõ ràng, tôi nghĩ rằng thuộc tính thú vị thứ hai của Image control là thuộc tính Stretch. Thuộc tính này kiểm soát những gì xảy ra khi kích thước hình ảnh được tải không hoàn toàn trùng khớp với kích thước trong Image control. Vấn đề này xảy ra mọi lúc, khi mà kích thước cửa sổ của bạn có thể được điều chỉnh bởi người dùng (user) và trừ khi bạn dùng bố cục tĩnh, điều này có nghĩa là kích thước của Image control sẽ luôn thay đổi.

Bạn có thể xem ví dụ sau đây, thuộc tính Stretch có thể tạo ra một chút khác biệt trong cách hiển thị hình ảnh:

<Window x:Class="WpfTutorialSamples.Basic_controls.ImageControlStretchSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Basic_controls"
    mc:Ignorable="d"
    Title="ImageControlStretchSample" Height="450" Width="600">
    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Grid.Column="0" HorizontalAlignment="Center" FontWeight="Bold">Uniform</Label>
    <Label Grid.Column="1" HorizontalAlignment="Center" FontWeight="Bold">UniformToFill</Label>
    <Label Grid.Column="2" HorizontalAlignment="Center" FontWeight="Bold">Fill</Label>
    <Label Grid.Column="3" HorizontalAlignment="Center" FontWeight="Bold">None</Label>
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="Uniform" Grid.Column="0" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="UniformToFill" Grid.Column="1" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="Fill" Grid.Column="2" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="None" Grid.Column="3" Grid.Row="1" Margin="5" />
    </Grid>
</Window>

Có thể mình không thể miêu tả dễ dàng để cho bạn hiểu được, nhưng với việc sửa đổi thuộc tính Stretch, ta có được 4 cách trang trí / biểu diễn của cùng 1 hình trong control Image. Đây là miêu tả cho từng chế độ:

• Uniform: Đây là chế độ mặc định. Hình ảnh sẽ được căn chỉnh để nó vừa với cái Size của control Image. Tỉ lệ của hình ảnh (dài : rộng) vẫn được đảm bảo giữ nguyên để hình đạt chất lượng tốt nhất. Xem thêm tại đây.
• UniformToFill: Hình ảnh sẽ được full đầy nguyên Control mà vẫn giữ nguyên tỉ lệ Dài : Rộng để đảm bảo chất lượng hình ảnh nên có thể không nhìn thấy hết hình (Nói chung là miêu tả hơi khó, các bạn xem ở hình trên).
• Fill: Hình ảnh có thể sẽ bị biến dạng vì nó sẽ dãn ra và thu nhỏ lại theo thông số Dài : Rộng của control Image. Nó giúp bạn xem được toàn bộ hình và full control, nhưng đổi lại hình hơi khó coi (Xem hình trên).
• None: Nếu hình ảnh nhỏ hơn kích thước của control Image, thì không có gì xảy ra với hình ảnh cả, hình ảnh vẫn hiển thị bình thường. Nhưng nếu nó lớn hơn, hình ảnh sẽ bị cắt đi một phần, chỉ có phần còn lại được hiển thị.

Tổng kết

Control Image giúp bạn dễ dàng hơn trong việc hiển thị hình ảnh trong ứng dụng của bạn, bất kể nó từ đâu, là ở web hay ở trong máy tính. Hi vọng các hướng dẫn trong bài viết này giúp ích cho bạn.