TOC

This article is currently in the process of being translated into Vietnamese (~79% done).

Các control cơ bản:

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

The Source property

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>

It can be a bit hard to tell, but all four Image controls display the same image, but with different values for the Stretch property. Here's how the various modes work:

  • Uniform: This is the default mode. The image will be automatically scaled so that it fits within the Image area. The Aspect ratio of the image will be preserved.
  • UniformToFill: The image will be scaled so that it completely fills the Image area. The Aspect ratio of the image will be preserved.
  • Fill: The image will be scaled to fit the area of the Image control. Aspect ratio might NOT be preserved, because the height and width of the image are scaled independently.
  • None: If the image is smaller than the Image control, nothing is done. If it's bigger than the Image control, the image will simply be cropped to fit into the Image control, meaning that only part of it will be visible.

Summary

The WPF Image control makes it easy for you to display an image in your application, whether from a remote source, an embedded resource or from the local computer, as demonstrated in this article.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!