Styling Controls [Metro Apps]

Visual Basic tutorials for UWP apps.
3 posts Page 1 of 1
Contributors
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

Styling Controls [Metro Apps]
smashapps
Hello,

Here is another tutorial for metro apps on styling controls. Each time you create a Windows Store project or whatever you want to call it, in the solution explorer you have a folder called Common and in this folder is a file called StandardStyles.xaml

Here are some of the different buttons from that StandardStyles file, if you want to see them all link is here: http://msdn.microsoft.com/en-us/library ... 41127.aspx

Image

Let's say we want the "Yes" button from those styles. The image I've shown you is the first group of buttons out of 10 groups of buttons and it is the 12th button in the image, so we need to find the 12th style in the StandardStyles.xaml file

It is on line 466 so copy the this code:
Code: Select all
<Style x:Key="YesAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
        <Setter Property="AutomationProperties.AutomationId" Value="YesAppBarButton"/>
        <Setter Property="AutomationProperties.Name" Value="Yes"/>
        <Setter Property="Content" Value="&#xE10B;"/>
    </Style>
and place that outside of the commented block. All of the styles are commented (for a reason). Now we have the style we want we need to create the control. Drag a button from the toolbox to your page or double click and go to the button's Style property in the properties pane on the right side of the screen (by default).

Click the little box shown next to Style

Image

Click Local Resources... and then YesAppBarButtonStyle and then remove the text from the Content property

If you have a round button with no image or text make sure you actually remove Content="" from the xaml code.

Result:

Image

You can apply styles the same way to any other control. If you need any help feel free to ask :)
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
User avatar
benji_19994
VIP - Donator
VIP - Donator
Posts: 156
Joined: Mon Apr 16, 2012 3:13 pm

this should be the same for C#? Right
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

Re: Styling Controls [Metro Apps]
smashapps
Yes and JavaScript etc.
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
3 posts Page 1 of 1
Return to “Visual Basic”