Custom Control and handling images

Vidar · ‎03-20-2020

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?

Anonymous User · ‎03-23-2020

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

Anonymous User · ‎03-23-2020