Custom Control and handling images

Vidar

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

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

 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Image</SPAN> <SPAN class="attr-name token"><SPAN class="namespace token">x:</SPAN>Name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>ImgStatus<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">Grid.Column</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>1<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">Grid.Row</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>0<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">Width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>32<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">Height</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>32<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">Source</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>pack://application:,,,/[your name space];component/[folder name if you put your image into the folder]/[your image name].png<SPAN class="punctuation token">"</SPAN></SPAN>  <SPAN class="attr-name token">VerticalAlignment</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>Top<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>Image</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

In cs file

 <SPAN class="keyword token">private</SPAN> <SPAN class="keyword token">void</SPAN> <SPAN class="token function">SetStatus</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>ImgStatus<SPAN class="punctuation token">.</SPAN>Source <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">BuildImage</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>Your desire image name<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>


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

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.