February 17, 2015 at 12:32Using AppBarButton on Windows 8.1
- Transfer
In a previous post, I wrote about how you can get rid of the connection with StandardStyles.xaml in your Windows 8.1 projects. In particular, I pointed out that one of the most popular uses of this auxiliary file was AppBarButton styles, as well as 200 different characters used for AppBar buttons. I decided to briefly dive a little deeper into these styles, as I received a certain number of letters with questions.
The AppBarButton class is a new class in Windows 8.1 and is primarily intended to use the CommandBar script , providing the UI, behavior, and accessibility needed for the control.
Note : CommandBar is something new in Windows 8.1 and is intended to be a control for standard command buttons only. It provides a built-in ability to automatically resize (which means that the commands will disappear if the window becomes smaller) and better keyboard support for navigating commands inside the AppBar. If you use the AppBar and you only have standard UI buttons, then you better use the CommandBar instead in your Windows 8.1 application
This will allow you to quickly create a UI with just two attributes Label and Icon. For example, like this:
The result will be:
And that’s it! By functionality, the button remains the same, and the API frames the type. This gives you the ability to quickly set the button text and visual display. Caring for all visual states pressed / hover / etc. taken from you. We also promoted the idea that the Label property becomes the value of the AutomationProperties.Name button for you, giving it the default accessibility. This Icon property method is an abridged version of the following more verbose method:
As you can see, the built-in property for ButtonBase is where the Icon property “lives”. Since we have this Icon property, we can use other methods. We also provide the IsCompact property for the AppBarButtons types, which will reduce indentation and delete the description text automatically for you, thereby reducing the area occupied by the button. This is what the CommandBar sets when the window size becomes too small for the elements.
If none of the 190 included icons fits your needs, then you can use AppBarButton with your own icons. I highly recommend using the font approach as it provides excellent scalability for your icons and is also mainstream for most web applications. Whereas you can make your own font , there are also many other features that you can use.
Note: I am not a lawyer and you should consult with the party providing the font for a license, rules / rights / prohibitions on the use of fonts that are embedded in your application. Do not think that each font is available for use only because it is TTF / OTF - for complete certainty, consult about the license if you are not the author of the font yourself.
Suppose I want to add some social media commands to my application. I can use the popular Modern UI Icons library , which also provides a font for loading social icons. After unpacking the archive, I included the TTF file in my project (I could use OTF, but since there is TTF, I use it - also notice that I renamed the file in my Visual Studio project) and then use it in my application:
which results in:
Pretty cool! Now, when I use fonts, it is sometimes quite difficult to determine the correct value, which should be after the # symbol in the FontFamily value. The trick I use on Windows is to open a TTF / OTF file and it will show the font preview just like the font name. This will be the same value that you need to specify after the path to the file. The meaning of the character of the character you want to display depends on the font you are using. Most authors use Unicode values for characters, but I saw one that simply took and typed “B”. This is what it is advisable to consult with the font author for comparisons (Modern UI icons provide a nice web page with a preview of all the symbol values next to the icons). It should also be noted that some information in different fonts may differ and you will need to make some adjustments. In my case, I moved the Modern UI icons 2 pixels down to my taste, but at the same time increased the size by 2 pixels.
There are two more icon options you can use. I recommend that you use the default character mode first, as you can almost always find what you need among a set of 190 icons. Secondly, I would recommend using the search for icons in the font. The other two methods require special explanations, which are not as simple as “choose a control and drag it onto the layout” and depend on what graphics are provided to them.
PathIcon- This method is for providing vector data using the XAML data format. This is vector data, which means it will scale well. However, you need to provide data already in the size of 40px so that the size fits the template. This may seem difficult for some. Using tools like Inkscape or Snycfusion Metro Studio can help.
BitmapIcon- works if you need to display a PNG image. Please note that in this case there is NO automatic scaling. You will have to provide for different scaling factors different images (100,140,180) for each picture provided here. This can be quite a tedious task and if it is not done, then it will not look very good on high-resolution displays. In addition, BitmapIcon is not particularly accurate for non-rectangular elements.
Visual Studio 2013 provides some great tools for this area that give you the ability to choose the look for your AppBar buttons. On the designer’s properties panel, you can see various properties that you can set:
There are also tools for changing other types of icons that we mentioned earlier.
We wanted to make some things easier, reduce the code provided by the templates, and increase the usability / availability of applications. While these things look simple, they are easy to use and help you focus on the core of your application, rather than on individual elements. If you use some other button styles and some standard icons, then I recommend that you switch to AppBarButton with the types of icons provided by the default framework. Be sure to check out the examples from the AppBar Windows SDK Sample in order to play with the concepts that were voiced in this post.
Hope this helps someone!
Typical scenario - Icons with symbols
The AppBarButton class is a new class in Windows 8.1 and is primarily intended to use the CommandBar script , providing the UI, behavior, and accessibility needed for the control.
Note : CommandBar is something new in Windows 8.1 and is intended to be a control for standard command buttons only. It provides a built-in ability to automatically resize (which means that the commands will disappear if the window becomes smaller) and better keyboard support for navigating commands inside the AppBar. If you use the AppBar and you only have standard UI buttons, then you better use the CommandBar instead in your Windows 8.1 application
This will allow you to quickly create a UI with just two attributes Label and Icon. For example, like this:
The result will be:
And that’s it! By functionality, the button remains the same, and the API frames the type. This gives you the ability to quickly set the button text and visual display. Caring for all visual states pressed / hover / etc. taken from you. We also promoted the idea that the Label property becomes the value of the AutomationProperties.Name button for you, giving it the default accessibility. This Icon property method is an abridged version of the following more verbose method:
As you can see, the built-in property for ButtonBase is where the Icon property “lives”. Since we have this Icon property, we can use other methods. We also provide the IsCompact property for the AppBarButtons types, which will reduce indentation and delete the description text automatically for you, thereby reducing the area occupied by the button. This is what the CommandBar sets when the window size becomes too small for the elements.
We use other fonts as an icon.
If none of the 190 included icons fits your needs, then you can use AppBarButton with your own icons. I highly recommend using the font approach as it provides excellent scalability for your icons and is also mainstream for most web applications. Whereas you can make your own font , there are also many other features that you can use.
Note: I am not a lawyer and you should consult with the party providing the font for a license, rules / rights / prohibitions on the use of fonts that are embedded in your application. Do not think that each font is available for use only because it is TTF / OTF - for complete certainty, consult about the license if you are not the author of the font yourself.
Suppose I want to add some social media commands to my application. I can use the popular Modern UI Icons library , which also provides a font for loading social icons. After unpacking the archive, I included the TTF file in my project (I could use OTF, but since there is TTF, I use it - also notice that I renamed the file in my Visual Studio project) and then use it in my application:
which results in:
Pretty cool! Now, when I use fonts, it is sometimes quite difficult to determine the correct value, which should be after the # symbol in the FontFamily value. The trick I use on Windows is to open a TTF / OTF file and it will show the font preview just like the font name. This will be the same value that you need to specify after the path to the file. The meaning of the character of the character you want to display depends on the font you are using. Most authors use Unicode values for characters, but I saw one that simply took and typed “B”. This is what it is advisable to consult with the font author for comparisons (Modern UI icons provide a nice web page with a preview of all the symbol values next to the icons). It should also be noted that some information in different fonts may differ and you will need to make some adjustments. In my case, I moved the Modern UI icons 2 pixels down to my taste, but at the same time increased the size by 2 pixels.
Other icon options
There are two more icon options you can use. I recommend that you use the default character mode first, as you can almost always find what you need among a set of 190 icons. Secondly, I would recommend using the search for icons in the font. The other two methods require special explanations, which are not as simple as “choose a control and drag it onto the layout” and depend on what graphics are provided to them.
PathIcon- This method is for providing vector data using the XAML data format. This is vector data, which means it will scale well. However, you need to provide data already in the size of 40px so that the size fits the template. This may seem difficult for some. Using tools like Inkscape or Snycfusion Metro Studio can help.
BitmapIcon- works if you need to display a PNG image. Please note that in this case there is NO automatic scaling. You will have to provide for different scaling factors different images (100,140,180) for each picture provided here. This can be quite a tedious task and if it is not done, then it will not look very good on high-resolution displays. In addition, BitmapIcon is not particularly accurate for non-rectangular elements.
Using Visual Studio
Visual Studio 2013 provides some great tools for this area that give you the ability to choose the look for your AppBar buttons. On the designer’s properties panel, you can see various properties that you can set:
There are also tools for changing other types of icons that we mentioned earlier.
Summary.
We wanted to make some things easier, reduce the code provided by the templates, and increase the usability / availability of applications. While these things look simple, they are easy to use and help you focus on the core of your application, rather than on individual elements. If you use some other button styles and some standard icons, then I recommend that you switch to AppBarButton with the types of icons provided by the default framework. Be sure to check out the examples from the AppBar Windows SDK Sample in order to play with the concepts that were voiced in this post.
Hope this helps someone!