Using AppBarButton in Windows 8.1
In the last 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 symbols used for AppBar buttons. I decided to briefly plunge 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 required for the control.
Note : CommandBar is something new in Windows 8.1 and is designed to be a control for standard command buttons only. It provides a built-in ability to automatically resize (which means the commands will disappear if the window becomes smaller) and better keyboard support for navigating the commands inside the AppBar. If you are using AppBar and you only have standard UI buttons, then you should use CommandBar instead of it in your Windows 8.1 application.
This allows you to quickly create a UI only by specifying two attributes Label and Icon. For example:
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 button text and visual display. Taking care of all visual states of pressed / hover / etc. removed from you. We also advanced the idea so that the Label property becomes the value of the AutomationProperties.Name button for you, giving it the ability to access by default. This method of property Icon is an abbreviated 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 AppBarButtons types, which will reduce indents and delete the description text automatically for you, thereby reducing the area occupied by the button. This is what the CommandBar sets in when the window size is too small for the elements.
')
If none of the 190 included icons fit your needs, then you can use the AppBarButton with your own icons. I highly recommend using the font approach as it provides an excellent scalability for your icons and is also mainstream for most web applications. Taking into account that you can make your own font , there are also many other possibilities that you can use.
Note : I am not a lawyer and you should consult with the font provider on the license, rules / rights / restrictions 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 - consult with full confidence for a license if you are not the author of the font.
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 downloading social icons . After unpacking the archive, I included the TTF file in my project (I could use OTF, but since there is a 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 must be after the # character 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 file path. The meaning of the character of the character you want to display depends on the font you use. Most authors use Unicode values ​​for characters, but I have seen such that it was enough just to take and type the character “B”. This is something that it is advisable to consult with the author of the font for comparisons (Modern UI icons provide a nice web page with a preview of all the character values ​​next to the icons). It should also be noted that some of the information in different fonts may differ and you will need to make some adjustments. In my case, I moved the Modern UI icons down 2 pixels to my taste, but at the same time I increased the size by 2 pixels.
There are two more options for icons that you can use. I recommend that you use the default character method in the first place, since you can almost always find what you need among a set of 190 icons. In the second place, I would recommend using the search path 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 the graphics provided to them.
PathIcon is a way to provide vector data using the XAML data format. This is vector data, which means they will scale well. However, you need to provide data already in the amount of 40px in order for the size to fit the template. To some, this may seem difficult. 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 different images for different zoom factors (100,140,180) for each image provided here. This can be quite a tedious task and if not done, it will not look good on high resolution displays. In addition, BitmapIcon does not have special accuracy for non-rectangular elements.
Visual Studio 2013 provides some great tools for this area that give you the ability to choose the look and feel of your AppBar buttons. On the designer properties panel, you can see various properties that you can set:
There are also tools to change other types of icons we mentioned earlier.
We wanted to make things simpler, reduce the VS code provided by the templates and increase the usability / availability of applications. As long as 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 icon types 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 announced in this post.
I hope that this will help 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 required for the control.
Note : CommandBar is something new in Windows 8.1 and is designed to be a control for standard command buttons only. It provides a built-in ability to automatically resize (which means the commands will disappear if the window becomes smaller) and better keyboard support for navigating the commands inside the AppBar. If you are using AppBar and you only have standard UI buttons, then you should use CommandBar instead of it in your Windows 8.1 application.
This allows you to quickly create a UI only by specifying two attributes Label and Icon. For example:
<AppBarButton Label="Reply via Email" Icon="MailReply" /> 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 button text and visual display. Taking care of all visual states of pressed / hover / etc. removed from you. We also advanced the idea so that the Label property becomes the value of the AutomationProperties.Name button for you, giving it the ability to access by default. This method of property Icon is an abbreviated version of the following more verbose method:
<AppBarButton Label="Reply via Email"> <AppBarButton.Icon> <SymbolIcon Symbol="MailReply" /> </AppBarButton.Icon> </AppBarButton> 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 AppBarButtons types, which will reduce indents and delete the description text automatically for you, thereby reducing the area occupied by the button. This is what the CommandBar sets in when the window size is too small for the elements.
')
Use other fonts as icon icons
If none of the 190 included icons fit your needs, then you can use the AppBarButton with your own icons. I highly recommend using the font approach as it provides an excellent scalability for your icons and is also mainstream for most web applications. Taking into account that you can make your own font , there are also many other possibilities that you can use.
Note : I am not a lawyer and you should consult with the font provider on the license, rules / rights / restrictions 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 - consult with full confidence for a license if you are not the author of the font.
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 downloading social icons . After unpacking the archive, I included the TTF file in my project (I could use OTF, but since there is a TTF, I use it - also notice that I renamed the file in my Visual Studio project) and then use it in my application:
<AppBarButton Label="Tweet This"> <AppBarButton.Icon> <FontIcon FontFamily="ms-appx:///modernuiicons.ttf#Modern-UI-Icons---Social" Margin="0,2,0,0" Glyph="&# xe045;" FontSize="37.333" /> </AppBarButton.Icon> </AppBarButton> <AppBarButton Label="Review on Yelp"> <AppBarButton.Icon> <FontIcon FontFamily="ms-appx:///modernuiicons.ttf#Modern-UI-Icons---Social" Margin="0,2,0,0" Glyph="&# xe04f;" FontSize="37.333" /> </AppBarButton.Icon> </AppBarButton> which results in:
Pretty cool! Now, when I use fonts, it is sometimes quite difficult to determine the correct value, which must be after the # character 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 file path. The meaning of the character of the character you want to display depends on the font you use. Most authors use Unicode values ​​for characters, but I have seen such that it was enough just to take and type the character “B”. This is something that it is advisable to consult with the author of the font for comparisons (Modern UI icons provide a nice web page with a preview of all the character values ​​next to the icons). It should also be noted that some of the information in different fonts may differ and you will need to make some adjustments. In my case, I moved the Modern UI icons down 2 pixels to my taste, but at the same time I increased the size by 2 pixels.
Other icon options
There are two more options for icons that you can use. I recommend that you use the default character method in the first place, since you can almost always find what you need among a set of 190 icons. In the second place, I would recommend using the search path 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 the graphics provided to them.
PathIcon is a way to provide vector data using the XAML data format. This is vector data, which means they will scale well. However, you need to provide data already in the amount of 40px in order for the size to fit the template. To some, this may seem difficult. 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 different images for different zoom factors (100,140,180) for each image provided here. This can be quite a tedious task and if not done, it will not look good on high resolution displays. In addition, BitmapIcon does not have special accuracy 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 and feel of your AppBar buttons. On the designer properties panel, you can see various properties that you can set:
There are also tools to change other types of icons we mentioned earlier.
Summary.
We wanted to make things simpler, reduce the VS code provided by the templates and increase the usability / availability of applications. As long as 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 icon types 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 announced in this post.
I hope that this will help someone!
Source: https://habr.com/ru/post/250665/
All Articles