The Image Control - The Complete WPF Tutorial

Trang chủ » Hình ảnh Trong Wpf » The Image Control - The Complete WPF Tutorial

Có thể bạn quan tâm

WPF Tutorial TOC Table of Contents

Download as PDF

PDF Download this entire tutorial as PDF, plus all the code samples, right now!

Chapter/article TOC

  1. TextBlock control
  2. TextBlock control - Định dạng nội tuyến
  3. Label
  4. TextBox control
  5. Button control
  6. CheckBox control
  7. RadioButton control
  8. PasswordBox control
  9. The Image control
    • The Source property
    • Loading images dynamically (Code-behind)
    • The Stretch property
    • Summary

About WPF

  • WPF là gì?
  • WPF vs. WinForms

Bắt đầu

  • Cài đặt Visual Studio Community
  • Hello, WPF!

XAML

  • XAML là gì?
  • XAML cơ bản
  • Events (sự kiện) trong XAML

Một ứng dụng WPF

  • Giới thiệu về 1 WPF Application
  • The Window
  • Làm việc với App.xaml
  • Tham số Command-line trong WPF
  • Resources
  • Bắt lỗi trong WPF
  • Application Culture / UICulture

Các control cơ bản

  • TextBlock control
  • TextBlock control - Định dạng nội tuyến
  • Label
  • TextBox control
  • Button control
  • CheckBox control
  • RadioButton control
  • PasswordBox control
  • The Image control

Control concepts

  • Chú giải control
  • Trang trí Text trong WPF
  • Thứ tự tab
  • Access Keys (Khóa truy cập)

Panels

  • Mở đầu cho chương WPF panels
  • Control Canvas
  • The WrapPanel control
  • StackPanel
  • Dockpanel
  • Control Grid
  • The Grid - Rows & columns
  • The Grid - Units
  • The Grid - Kéo dài một control sang một ô khác (Span)
  • GridSplitter
  • Ứng dụng grid: Tạo 1 biểu mẩu

UserControls & CustomControls

  • Introduction
  • Tạo và sử dụng một UserControl

Data binding

  • Bắt đầu phần WPF data binding
  • Mở đầu về sự ràng buộc quan hệ dữ liệu trong data binding
  • Sử dụng DataContext
  • Data binding thông qua Code-behind
  • Phương thức UpdateSourceTrigger
  • Đáp ứng các thay đổi trong data binding
  • Chuyển đổi giá trị với IValueConverter
  • Thuộc tính StringFormat
  • Debugging data bindings

Các lệnh Commands

  • Giới thiệu về các lệnh WPF
  • Sử dụng WPF commands
  • Thực hiện một WPF Command tùy chỉnh

Hộp thoại

  • The MessageBox
  • Hộp thoại mở file - OpenFileDialog
  • SaveFileDialog
  • The other dialogs
  • Tạo hộp thoại nhập tùy chỉnh

Điều khiển giao diện chung

  • Điều khiển Menu WPF
  • ContextMenu trong WPF
  • Điều khiển WPF ToolBar
  • The WPF StatusBar control
  • Thanh Ribbon

Các điều khiển Rich Text

  • Tổng quan về các điều khiển WPF Rich Text
  • Control FlowDocumentScrollViewer
  • Điều khiển FlowDocumentPageViewer
  • Điều khiển FlowDocumentReader
  • Creating a FlowDocument from Code-behind
  • Advanced FlowDocument content
  • Điều khiển RichTextBox
  • How-to: Tạo một trình biên tập Rich Text

Các điều khiển dạng khác

  • The Border control
  • The Slider control
  • The ProgressBar control
  • The WebBrowser control
  • The WindowsFormsHost control
  • The GroupBox control
  • Điều khiển Lịch
  • Điều khiển DatePicker
  • The Expander control

TabContol

  • Sử dụng WPF TabControl
  • WPF TabControl: Tab positions
  • WPF TabControl: Tạo kiểu cho TabItems

Danh sách control

  • ItemsControl
  • ListBox control
  • Điều khiển ComboBox

ListView

  • Giới thiệu về ListView
  • Một ví dụ ListView đơn giản
  • ListView, data binding and ItemTemplate
  • ListView with a GridView
  • Làm sao để: ListView hiển thị với tên cột được căn trái
  • Phân nhóm trong ListView
  • Sắp xếp trong ListView
  • Làm sao để: sắp xếp cột với ListView
  • ListView filtering

TreeView control

  • Giới thiệu về TreeView
  • Một ví dụ TreeView đơn giản
  • TreeView, data binding and multiple templates
  • TreeView - Selection/Expansion state
  • Lazy loading TreeView items

DataGrid control

  • DataGrid control
  • DataGrid columns
  • DataGrid with row details

Styles

  • Giới thiệu về WPF styles
  • Sử dụng WPF styles
  • Trigger, DataTrigger & EventTrigger
  • WPF MultiTrigger và MultiDataTrigger
  • Trigger animations

Audio & Video

  • Phát âm thanh
  • Phát video
  • Cách thực hiện: Tạo trình phát Audio / Video hoàn chỉnh
  • Tổng hợp giọng nói (làm cho WPF nói)
  • Nhận dạng giọng nói (làm cho WPF lắng nghe)

Misc.

  • DispatcherTimer
  • Đa luồng với BackgroundWorker
  • Hủy bỏ BackgroundWorker

Tạo trò chơi: SnakeWPF

  • Giới thiệu
  • Tạo khu vực trò chơi
  • Tạo và di chuyển con rắn
  • Chuyển động liên tục với DispatcherTimer
  • Thêm thức ăn cho rắn
  • Điều khiển Rắn
  • Phát hiện va chạm
  • Cải thiện SnakeWPF: Làm cho nó trông giống một trò chơi hơn
  • Cải thiện SnakeWPF: Thêm danh sách high score
  • Cải thiện SnakeWPF: Thêm âm thanh
  • Trò chơi hoàn chỉnh & Lời kết
  • WPF
  • ASP.NET MVC
  • ASP.NET WebForms
  • C#
  • CSS3
  • HTML5
  • JavaScript
  • jQuery
  • PHP5

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

If you are fluent in Vietnamese, then please help us - just point to any untranslated element (highlighted with a yellow left border - remember that images should have their titles translated as well!) inside the article and click the translation button to get started. Or have a look at the current translation status for the Vietnamese language.

If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.

Metadata

Please help us by translating the following metadata for the article/chapter, if they are not already translated.

If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!

Please login to translate metadata! Already logged in? Please try reloading the page!
  • More info...
  • Looking for the original article in English?
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ó.

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.

The PasswordBox control Previous Control ToolTips Next This article has been fully translated into the following languages:
  • Catalan
  • Chinese
  • Czech
  • Danish
  • Dutch
  • French
  • German
  • Hebrew
  • Hungarian
  • Italian
  • Japanese
  • Polish
  • Portuguese
  • Russian
  • Spanish
  • Turkish
  • Ukrainian
  • Vietnamese
Is your preferred language not on the list? Click here to help us translate this article into your language!

Từ khóa » Hình ảnh Trong Wpf