articles

Home / DeveloperSection / Articles / Image control in WPF

Image control in WPF

Anonymous User35006 28-Mar-2011

Image control in WPF provides a facility to display images. We have certain properties through which we can manage display style of image control. In this demonstration I will show you how to use image control in WPF.

Some common properties related with WPF
  •   Name—Name properties used to set a unique identifier to your image control.
  •  Width—Width property is used to set width of your image control.
  •  Height—Height property is used to set height of your image control.
  •  Source—Source property is used to provide path of your image.
  •  Stretch—Stretch property is used to set display behavior of image control. Four possible values of Stretch property is Fill, None, Uniform, UniformToFill. Default value of Stretch property is Fill.
  •  StretchDirection—StretchDirection property is used to set direction of stretch of your image. Three possible values are UpOnly, DownOnly and Both.
Code snippet for image control
<Grid>
        <Image Height="201" HorizontalAlignment="Left" Margin="64,41,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top"
          Width="381" Source="/ImageControlDemo;component/Images/Penguins.jpg" StretchDirection="Both" SnapsToDevicePixels="False" OverridesDefaultStyle="False" />
</Grid>
Output of this code snippet is

Image control in WPF

Adding Images Dynamically to Image Control

Code snippet for UI of demonstration

<Grid Height="365">
        <Image Height="201" HorizontalAlignment="Left" Margin="64,30,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="381" StretchDirection="Both"  />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="64,256,0,0" x:Name="txtBrowseFile" VerticalAlignment="Top" Width="239" />
        <Button Content="Browse Image" Height="23" HorizontalAlignment="Left" Margin="320,256,0,0" x:Name="btnBrowse" VerticalAlignment="Top" Width="125" Click="btnBrowse_Click" />
        <Button Content="Upload Image" Height="23" HorizontalAlignment="Left" Margin="126,297,0,0" x:Name="btnUpload" VerticalAlignment="Top" Width="236" Click="btnUpload_Click" />
</Grid>

 

Business logic of the above demonstration.
/// <summary>
        /// Here we create an object of OpenFileDialog class. For using any DialogBox in
        /// WPF you need Microsoft.Win32 namespace. Firstly use this space. In this method
        /// I open the open file dialog box for choosing file which I needs to ve open and
        /// then store file path in text box control. This event is fired on the click event
        /// of Browse Button.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
 
        private void btnBrowse_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog ofd = new OpenFileDialog();
            Nullable<bool> result = ofd.ShowDialog();
            if (result == true)
            {
                txtBrowseFile.Text = ofd.FileName;
            }
        }
 
        /// <summary>
        /// On the click event of Upload button we store the image in Image control.
        /// Here for providing Source of the image control you need to create an
        /// object of the BitmapImage class and provide all the functionality.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
 
        private void btnUpload_Click(object sender, RoutedEventArgs e)
        {
            if (txtBrowseFile.Text.Trim().Length != 0)
            {
                BitmapImage src = new BitmapImage();
                src.BeginInit();
                src.UriSource = new Uri(txtBrowseFile.Text.Trim(), UriKind.Relative);
                src.CacheOption = BitmapCacheOption.OnLoad;
                src.EndInit();
                image1.Source = src;
            }
        }

 

Output of  the above demo

Image control in WPF

This one is first screen. When user click on Browse Image button then a dialog box is open where user can select Image which he wants to open

Image control in WPF

When user selects any image and then click on Open button then path of the image is stored in textbox. And when user click on Upload Image button then image is shown in Image Control.

Screenshot

Image control in WPF

 


Updated 07-Sep-2019
I am a content writter !

Leave Comment

Comments

Liked By