Intersoft Community - ClientUI - Metro style issue with UXNavigationButton icon

Metro style issue with UXNavigationButton icon

yudi — Tue, 13 Aug 2013 08:23:58 GMT

Try to set the FontFamily property of UXNavigationButton with the desired font family as shown in the following snippet code.

<Intersoft:UXNavigationButton Content="Home" NavigateUri="/Home" IsDefaultNavigationSource="True" Tag=""
                                FontFamily="Wingdings" />

This should helps.

Metro style issue with UXNavigationButton icon

zen8019 — Wed, 07 Aug 2013 09:39:56 GMT

Thanks. That works..however what would I do if wanted a different icon (not one from the Segoe font)?

Metro style issue with UXNavigationButton icon

yudi — Mon, 05 Aug 2013 23:02:01 GMT

In the MainPage.xaml page, the UXNavigationButton is wrapped inside UXItemsControl. The ItemContainerStyle property of UXItemsControl – is set to {StaticResource AppButtonStyle} – plays an important role in providing the effect of Metro style. *you can try to remove the ItemContainerStyle property and watch that the Metro style effect will no longer available.

Instead of using image for the icon UXNavigationButton, it uses Segoe UI Symbol font which is defined in the Tag property.

I enclosed the font file as attachment. Please have the font file installed in your development PC.

The step-by-step below shows how to modify the “icon-like” on the navigation button control.

Install the Segoe UI Symbol font;
Open the project in VS 2012;
Open MainPage.xaml page;

Select “About” UXNavigationButton;

<Intersoft:UXNavigationButton Content="About" NavigateUri="/About" Tag="" />

For Windows 7 user, from the start menu click: start > All Programs > Accessories > System Tools > Character Map. For Windows 8 user, type “charmap” in the run command;
In the Character Map window, set the font to Segoe UI Symbol;
Select a character to copy. For example, select the “thumbs up” character;
Press “Select” button and then click “Copy” button;
Now back to MainPage.xaml in VS 2012. Select the “About” button and set the content of “Tag” property by pasting the copied character in step #8;
Save the changes and watch that the “icon” of navigation button is now changed.

Hope this helps.

Metro style issue with UXNavigationButton icon

zen8019 — Mon, 05 Aug 2013 07:37:04 GMT

I can't seem to be able to change the icon on MainPage.xaml for

This is waht I have done bit no image is showing.

<Intersoft:UXNavigationButton Content="Borrowers" NavigateUri="/Borrowers" Icon="/Abraca;component/Assets/Images/Wizardshat.png"  />

I notice the use of the Tag property and this is somehow related to the image that is displayed in the Metro template.

                            <Intersoft:UXNavigationButton Content="Borrowers" NavigateUri="/Borrowers" Icon="/Abraca;component/Assets/Images/Wizardshat.png"  />

Can you please advise?