Custom Control and handling images

458
2
Jump to solution
03-20-2020 11:06 AM
Vidar
by
Occasional Contributor II

I want to put an image 16/32 pixel size on a custom control and change that image during runtime depending on what the user is doing. For example, if the user is valid I want the an image on the control to show they are valid - say like a green person image - equally I want that image to change to a red person if they are not valid.  The reasons for validity are not important - changing the image is.

I can see how that is done partly with a standard button control - but it's not so obvious how this is all wired up with a custom control.

Can anyone help?

Do you have to put an image control in the xaml for the custom control? - if so how is this wired up to images that you have stored in the Images folder of your project? 

0 Kudos
1 Solution

Accepted Solutions
ThanHtetAung_EsriAu
Esri Regular Contributor

Hi Simon Earnshaw‌,

Firstly all the image you want to dynamically switch from user control should be with that property 

1. Build Action : Resource

2. Copy to output directory : Do not copy.

And following is the sample code to switch

Let say in xaml

 <Image x:Name="ImgStatus" Grid.Column="1" Grid.Row="0" Width="32" Height="32" Source="pack://application:,,,/[your name space];component/[folder name if you put your image into the folder]/[your image name].png"  VerticalAlignment="Top"></Image>

In cs file

 private void SetStatus()
        {
            this.ImgStatus.Source = this.BuildImage([Your desire image name]);
        }


/// <summary>
        /// Create bitmap image source
        /// </summary>
        /// <param name="imageName"></param>
        /// <returns></returns>
        private ImageSource BuildImage(string imageName)
        {
            return new BitmapImage(PackUriForResource(imageName));
        }
        /// <summary>
        /// Create wpf uri, make sure the image type is assembly resource
        /// </summary>
        /// <param name="resourceName"></param>
        /// <returns></returns>
        private Uri PackUriForResource(string resourceName)
        {
            string asm = System.IO.Path.GetFileNameWithoutExtension(
                System.Reflection.Assembly.GetExecutingAssembly().CodeBase);
            return new Uri(string.Format("pack://application:,,,/{0};component/[Your image folder path]/{1}", asm, resourceName), UriKind.Absolute);
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Make sure you replace those variable with [] properly from the sample code.  and try it.

If you used mvvm, data context, you shall need to use ImageSource data type to bind and use BuildImage method to change the image with image name.

Hope it will help you.

Let me know the status.

View solution in original post

0 Kudos
2 Replies
ThanHtetAung_EsriAu
Esri Regular Contributor

Hi Simon Earnshaw‌,

Firstly all the image you want to dynamically switch from user control should be with that property 

1. Build Action : Resource

2. Copy to output directory : Do not copy.

And following is the sample code to switch

Let say in xaml

 <Image x:Name="ImgStatus" Grid.Column="1" Grid.Row="0" Width="32" Height="32" Source="pack://application:,,,/[your name space];component/[folder name if you put your image into the folder]/[your image name].png"  VerticalAlignment="Top"></Image>

In cs file

 private void SetStatus()
        {
            this.ImgStatus.Source = this.BuildImage([Your desire image name]);
        }


/// <summary>
        /// Create bitmap image source
        /// </summary>
        /// <param name="imageName"></param>
        /// <returns></returns>
        private ImageSource BuildImage(string imageName)
        {
            return new BitmapImage(PackUriForResource(imageName));
        }
        /// <summary>
        /// Create wpf uri, make sure the image type is assembly resource
        /// </summary>
        /// <param name="resourceName"></param>
        /// <returns></returns>
        private Uri PackUriForResource(string resourceName)
        {
            string asm = System.IO.Path.GetFileNameWithoutExtension(
                System.Reflection.Assembly.GetExecutingAssembly().CodeBase);
            return new Uri(string.Format("pack://application:,,,/{0};component/[Your image folder path]/{1}", asm, resourceName), UriKind.Absolute);
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Make sure you replace those variable with [] properly from the sample code.  and try it.

If you used mvvm, data context, you shall need to use ImageSource data type to bind and use BuildImage method to change the image with image name.

Hope it will help you.

Let me know the status.

0 Kudos
Vidar
by
Occasional Contributor II

Many thanks for your help  Than!

0 Kudos