Inverse color of image

[Yang]

Hi,

See the attached image. I placed a RadImageButton on top of a RadListPicker. The image is white, I want it to be displayed in black. It this possible without changing the image?

<telerikPrimitives:RadImageButton RestStateImageSource="/Images/appbar.edit.rest.png" />

Thanks.
Yang

[Lancelot]

Hi Yang,

  If the image you added to the RadButton is a white image, then it will always be white. The control uses the image you supplied to be displayed while it's rest state.

  If you are looking for the RadButton to display the edit icon in black, then you'll need to replace the white icon with a black one. It does appear that you are using the appbar.edit.rest.png file that is built into the Windows Phone SDK. This icon is a specially built image that can respond to light/dark theme on the phone while in the appbar.

  I recommend you save a copy of the image and then edit it in Paint. You can do a fill with black and get the look you want. Another tip I can recommend is you use the original edit icon for the pressed state. That way the pencil turns white when the user presses on it. In essence the RadButton is switching your custom black icon with the original white icon for the pressed state.

Good Luck,
Lancelot

[Yang]

Thanks for your reply Lancelot.

Yes, I'm using the icons built into the Windows Phone SDK.

I just tried the icons for both dark theme and light theme, but I got wired results. No matter what icon I use (white/black), the icon for the rest state is always displayed in white, and the icon for pressed state is always in black.

It seems RadImageButton has the feature to inverse black/white, but in my case, this feature is used the wrong way.

The following 4 RadImageButton look exactly the same.

<telerikPrimitives:RadImageButton PressedStateImageSource="/Images/light/appbar.edit.rest.png"
                    RestStateImageSource="/Images/light/appbar.edit.rest.png" />

<telerikPrimitives:RadImageButton PressedStateImageSource="/Images/dark/appbar.edit.rest.png"
                     RestStateImageSource="/Images/dark/appbar.edit.rest.png" />

<telerikPrimitives:RadImageButton PressedStateImageSource="/Images/light/appbar.edit.rest.png"
                     RestStateImageSource="/Images/dark/appbar.edit.rest.png" />

<telerikPrimitives:RadImageButton PressedStateImageSource="/Images/dark/appbar.edit.rest.png"
                     RestStateImageSource="/Images/light/appbar.edit.rest.png" />

The icons display correctly in Image:

<Image Source="/Images/light/appbar.edit.rest.png" />

<Image Source="/Images/dark/appbar.edit.rest.png" />

I also tried icons created from scratch, but got same result.

I've created a sample project to illustrate the issue:
http://dl.dropbox.com/u/46508238/telerik.com/RadImageButton-issue.zip

[Lancelot]

You're getting unexpected results because those icons are actually paths specifically designed for their ability to change. That why I recommended that you make a copy of the icon and open it in Paint, color it in with a black fill and save it as a new .png. It will lose it's transparency and stay the color you make it.

The key thing is that the new image you make has no transparency, that is why you're seeing the opposite of the background.

Lancelot

[Lancelot]

Hi Yang,

Attached is an icon your can use for the button. It will not turn white when placed in a RadImageButton. You can download the file directly and use it in your project.

Lancelot

[Yang]

Thanks Lancelot,

I tried your icon on my test project, but unfortunately it didn't work. The icon is either completely white or completely black when in dark/light theme.

I tried to follow your instructions to create my own icons, but didn't success (I don't have much programming experiences).

I captured a short video to illustrate the issue:
http://dl.dropbox.com/u/46508238/telerik.com/RadImageButton-issue.mp4

[Lancelot]

Hi Yang, 

I think I may know what your problem is. Looking at your video you don't have the button shape set to "Image". This needs to be set in order for the button not to act as an opacity mask button (which has been behaving the way you've been seeing.

Do this to get the behavior you want ButtonShape="Image"

Another important thing to know that when building Windows phone apps, you need to set the image's build action to "Content". By default when you add an image to a project it is set to  "Resource". The image you get with the SDK is an opacity mask, I've attached another image that removes this 

Here's how to change the build action:

1. Select the image in the solution Explorer.
2. Go down to the properties panel and notice the "Build Action" property
3. Drop down the box and select "Content"

This should fix your problem,
Good Luck

Lancelot

[Yang]

Lancelot, thanks for your detailed answer. I added ButtonShape="Image" and it fixed the issue perfectly.

Cheers,
Yang

[Todor]

Hello Yang,

I just wanted to note something else about the ButtonShape property. As Lance explained, when it is set to Image, the Image will be used as it is and all the colors will be preserved. However, when the ButtonShape is Rectangle or Ellipse, you will get the relevant shape as a button and the image that you provide will be used as an opacity mask. The image that you were using in the beginning is suitable for such a mask and here's how it works: What is transparent in the image is filled with the Background brush of RadImageButton and what is not transparent in the image is filled with the Foreground brush of RadImageButton. Now if you want to use a single image (which has a transparent background) and make it use a different brush than the default PhoneForegroundBrush, you can simply change the Foreground and Background properties of RadImageButton:

<telerik:RadImageButton PressedStateImageSource="/Images/dark/appbar.edit.rest.png" RestStateImageSource="/Images/light/appbar.edit.rest.png" Foreground="Blue" Background="Yellow"/>

I hope this information helps to get the most of RadImageButton.

Kind regards,
Todor
the Telerik team

[Yang]

Hi Todor, thanks for your detailed reply. That's very interesting. I've taken a note of your post for future reference.

Cheers,
Yang

[Washington]

Holy Mother of God. After all this time a so very useful post.

The opacity is exactly what I was looking for.