Can't get ImageToggleButton to display anything

Jan 16, 2014 at 9:03 PM
I have a Windows 8.1 Windows Store App project with WinRTXAMLToolkit. I have an ImageToggleButton on a test page. No matter what I do I can't see the image displayed on the button and there are no design time or run-time errors displayed. From the full Sample solution I copied over the /Assets/Images/*png files into my project preserving the directory structure, to make sure the paths were correct. And I copied over the XAML below to instantiate the control (although I had to change "controls" to "Controls" to make it compile):
<controls:ImageToggleButton
                HorizontalAlignment="Center"
                NormalStateImageSource="/Assets/Images/RedButton_Idle.png"
                HoverStateImageSource="/Assets/Images/RedButton_Hover.png"
                PressedStateImageSource="/Assets/Images/RedButton_Pressed.png"
                DisabledStateImageSource="/Assets/Images/RedButton_Disabled.png"
                CheckedStateImageSource="/Assets/Images/GreenButton_Idle.png"
                CheckedHoverStateImageSource="/Assets/Images/GreenButton_Hover.png"
                CheckedPressedStateImageSource="/Assets/Images/GreenButton_Pressed.png"
                CheckedDisabledStateImageSource="/Assets/Images/GreenButton_Disabled.png"
                IsEnabled="{Binding IsChecked, ElementName=cbIsEnabled}"/>
But still no luck.

Note, when I load the WinRTXamlToolkit All solution I get 88 warnings and 1 error. This is the error I get:

Error 64 App manifest validation failed. File contains unrecognized XML element '/Package/Applications/Application/m2:VisualElements'. C:\Users\Robert\Documents\Visual Studio 2012\Projects\Windows Store\Tookit Sources\WinRT XAML Tookit\WinRTXamlToolkit.StylesBrowser 8.0..\WinRTXamlToolkit.StylesBrowser\Package.appxmanifest 18 6 WinRTXamlToolkit.StylesBrowser 8.0

-- roschler
Coordinator
Jan 16, 2014 at 10:21 PM
Sorry, I don't have the time right now to look into that, but you could try defining full Uris. Are you using the toolkit through NuGet or? Have you checked how it is done in the samples?
Jan 16, 2014 at 10:24 PM
I'm using the toolkit through NuGet in my app. I'll try full URIs and see what happens.
Coordinator
Jan 16, 2014 at 10:30 PM
One more thing - make sure to specify the width/height of the control.
Jan 16, 2014 at 10:41 PM
The ImageToggleButton control does have valid values for the Height and Width. As a test I just created a standard Image control using the relative URI assigned to the ImageToggleButton's NormalStateImageSource property as the Image control's source property. The bitmap shows up fine in the designer in the Image control. This is the URL I used:

/Assets/Images/RedButton_Hover.png

Note I did try the pack & ms-appx absolute URL syntaxes with the ImageToggleButton but that didn't work.
Jan 17, 2014 at 12:40 AM
xyzzer wrote:
Sorry, I don't have the time right now to look into that, but you could try defining full Uris. Are you using the toolkit through NuGet or? Have you checked how it is done in the samples?
I'm beginning to think this is a URL issue. Although I can't see the ImageToggleButton image at design-time, it works perfectly at run-time showing the different states. I did some digging and came across this Stack Overflow post:

http://stackoverflow.com/questions/3821313/difference-between-image-uri-behaviour-in-code-and-in-xaml

But the accepted answer indicates that the run-time URI resolution should be the problem and that design-time should work better due to the converter available to the Source property code in the XAML parser. But as I said, I tried both pack and ms-appx URI formats to no avail. Why does the exact same URL and file directory structure not work at design time in my app, when it does work in the WinRTXamlToolkit 8.1 sample?
Coordinator
Jan 17, 2014 at 12:45 AM
Oh, you never said it doesn't show up at design time. I don't typically use designer view for XAML, so a lot of the code in the toolkit might not work well in the designer. I feel the design view takes too much time to load, crashes too much and for most tasks it's just a lot faster to type in the XAML than click through it in the design view.
Jan 17, 2014 at 1:11 AM
I wish I had your skill Filip. Without the UI designer I have no clue how things are going to look. If you get any more ideas on how I can get the design-time working I'd appreciate it. As I said, it works fine in your sample.

I have the control working at run-time now with 3 images, one for Normal, Pressed, and Hover. Looks great. Is there a way to have the Hover image disabled temporarily when the button is clicked (i.e. pressed or un-pressed), and then re-enabled when the mouse moves away from the control canvas? Right now it looks weird because after you press the button, instead of seeing the Pressed image you see the Hover image until you move the mouse off of the control canvas.

Is there any easy way for me to do that?