CODEWITHSUNDEEP
xamlwindows-8winrt-xamlwindows-8.1
krisdyson
krisdyson

Reputation: 3255

Custom button in Windows 8.1 app

I have a requirement to create a button in a Windows 8.1 app which has an icon and a text label. The icon will be a symbol from Segoe UI Symbols and the text label will be Segoe UI Semibold at a smaller text size.

I want to be able to reuse the button in different places within the app, using different icons and text labels.

How show I go about this? I could create a button and then edit the ContentPresenter to have a horizontally oriented stack panel with two TextBlocks, but then how could I reuse this? And how could I change the text in the two different text blocks?

Should I create a separate custom control with separate dependency properties for each of the textblock strings? I'm interested in hearing what you would do.

thanks

Upvotes: 2

Views: 4098

Answers (2)

Tim Heuer
Tim Heuer

Reputation: 4301

Are you desiring to create something like for an AppBar? Take a look at AppBarButton and the style/types it supports. In Windows 8.1 we added some things around SymbolIcon specifically. Since you basically want two pieces of 'content' for your style you'll have to re-purpose one property (unless you create a custom control which doesn't sound needed for this scenario). Using AutiomationProperties.Name for the visible label is a good idea because it will also help with accessibility by default for those users.

Investigate the style for AppBarButton to get you started.

Upvotes: 2

Nate Diamond
Nate Diamond

Reputation: 5575

Create a simple Style. To make it easy, I would base it off the standardized AppBarButton style. You can format it to whatever size you want (I have done something similar to make a larger button or one with text on the side).

Have the main icon simply be a ContentPresenter which binds to the Content using a TemplateBinding. Make sure to set the FontFamily to Segoe UI Symbol. Have the text label pull from AutomationProperties.Name, similar to how the AppBarButton style does.

Then, whenever you want to use this just do:

<Button Style="{StaticResource MyCustomButtonStyle}"
        Content="&#xe000;" // Where "000" is replaced by the number of the icon you wish to use.
        AutomationProperties.Name="Text Label"/>

This should be extensible and easily reproducible to whatever location you need. When copying over the AppBarButton style, I suggest removing the artificial size limits (specifically the width of the main content Grid). I do suggest either giving the Text Label a fixed size or having it pull its size from the specified parent Width, so that it will Wrap correctly.

Hope this helps and happy coding!

Upvotes: 5

Related Questions