WPF - Image

A control that displays an image, you can use either the Image object or the ImageBrush object. An Image object display an image, while an ImageBrush object paints another object with an image. The image source is specified by referring to an image file using several supported formats. It can display the following formats −
Bitmap (BMP)
Tagged Image File Format (TIFF)
Icons (ICO)
Joint Photographic Experts Group (JPEG)
Graphics Interchange Format (GIF)
Portable Network Graphics (PNG)
JPEG XR
The hierarchical inheritance of Image class is as follows
CanDrag
Gets or sets a value that indicates whether the element can be dragged as data in a drag-and-drop operation. (Inherited from UIElement)
Height
Gets or sets the suggested height of a FrameworkElement. (Inherited from FrameworkElement)
HorizontalAlignment
Gets or sets the horizontal alignment characteristics that are applied to a FrameworkElement when it is composed in a layout parent, such as a panel or items control. (Inherited from FrameworkElement)
Margin
Gets or sets the outer margin of a FrameworkElement. (Inherited from FrameworkElement)
Name
Gets or sets the identifying name of the object. When a XAML processor creates the object tree from XAML markup, run-time code can refer to the XAML-declared object by this name. (Inherited from FrameworkElement)
Opacity
Gets or sets the degree of the object's opacity. (Inherited from UIElement)
PlayToSource
Gets the information that is transmitted if the Image is used for a Play To scenario.
Resources
Gets the locally defined resource dictionary. In XAML, you can establish resource items as child object elements of a frameworkElement.Resources property element, through XAML implicit collection syntax. (Inherited from FrameworkElement)
SourceProperty
Identifies the Source dependency property.
Stretch
Gets or sets a value that describes how an Image should be stretched to fill the destination rectangle.
StretchProperty
Identifies the Stretch dependency property.
Style
Gets or sets an instance Style that is applied for this object during layout and rendering. (Inherited from FrameworkElement)
VerticalAlignment
Gets or sets the vertical alignment characteristics that are applied to a FrameworkElement when it is composed in a parent object such as a panel or items control. (Inherited from FrameworkElement)
Width
Gets or sets the width of a FrameworkElement. (Inherited from FrameworkElement)
wSource
Gets or sets the source for the image.
DataContextChanged
Occurs when the value of the FrameworkElement.DataContext property changes. (Inherited from FrameworkElement)
DragEnter
Occurs when the input system reports an underlying drag event with this element as the target. (Inherited from UIElement)
DragLeave
Occurs when the input system reports an underlying drag event with this element as the origin. (Inherited from UIElement)
DragOver
Occurs when the input system reports an underlying drag event with this element as the potential drop target. (Inherited from UIElement)
DragStarting
Occurs when a drag operation is initiated. (Inherited from UIElement)
Drop
Occurs when the input system reports an underlying drop event with this element as the drop target. (Inherited from UIElement)
DropCompleted
Occurs when a drag-and-drop operation is ended. (Inherited from UIElement)
GotFocus
Occurs when a UIElement receives focus. (Inherited from UIElement)
ImageFailed
Occurs when there is an error associated with image retrieval or format.
ImageOpened
Occurs when the image source is downloaded and decoded with no failure. You can use this event to determine the natural size of the image source.
KeyDown
Occurs when a keyboard key is pressed while the UIElement has focus. (Inherited from UIElement)
KeyUp
Occurs when a keyboard key is released while the UIElement has focus. (Inherited from UIElement)
SizeChanged
Occurs when either the ActualHeight or the ActualWidth property changes value on a FrameworkElement. (Inherited from FrameworkElement)
Let’s create a new WPF project with the name WPFImageControl.
Let’s create a new WPF project with the name WPFImageControl.
First divide the screen into two rows by using Grid.RowDefinition.
First divide the screen into two rows by using Grid.RowDefinition.
Drag three Image controls from the Toolbox.
Drag three Image controls from the Toolbox.
The following example shows three images. The first one is a simple image; in the second image, opacity property is set; and in the third image, one Eclipse is painted with an ImageBrush.
The following example shows three images. The first one is a simple image; in the second image, opacity property is set; and in the third image, one Eclipse is painted with an ImageBrush.
The XAML code is as follows −
The XAML code is as follows −
<Window x:Class = "WPFImageControl.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "500" Width = "604">
	
   <Grid> 
      <Grid.RowDefinitions> 
         <RowDefinition Height = "1*"/> 
         <RowDefinition Height = "1*"/> 
      </Grid.RowDefinitions>
		
      <StackPanel Orientation = "Horizontal"> 
         <Image Width = "200" Source = "Images\red_rock_01.jpg"  
            VerticalAlignment = "Top" Margin = "30"/> 
         <Image Width = "200" Source = "Images\red_rock_01.jpg" VerticalAlignment = "Top"
            Margin = "30" Opacity = "0.5"/>             
      </StackPanel> 
		
      <StackPanel Grid.Row = "1"> 
         <Ellipse Height = "100" Width = "200" HorizontalAlignment = "Center" Margin = "30"> 
            <Ellipse.Fill> 
               <ImageBrush ImageSource = "Images\tahoe_01.jpg" /> 
            </Ellipse.Fill> 
         </Ellipse> 
      </StackPanel> 
		
   </Grid> 
	
</Window>
When you compile and execute the above code, it will produce the following window −
We recommend that you execute the above example code and try the other properties and events of the Image class.

    31 Lectures 
     2.5 hours 

 Anadi Sharma

    30 Lectures 
     2.5 hours 

 Taurius Litvinavicius
 Print
 Add Notes
 Bookmark this page