ShareAppBarButtonStyle for XAML

28 Jun

The StandardStyles.xaml in a standard Windows 8 Metro XAML project contains about 30 different AppBar button styles. In a standard JS project there is about 150 different styles. Adam Kinney have enumerated and visualized them in a post here.

Tim Heuer have written a post about AppBar button styles for XAML here – it’s really worth a close look! In the end of the post, Tim refers to an updated StandardStyles.zip with all the 150 icons defined in XAML. Thanks!

All I’m missing from the updated styles is a ShareAppBarButtonStyle. Well, with Metro Studio 2 from Syncfusion installed I easily can generate the Path that I need.

<Style x:Key="ShareAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="ShareAppBarButton" />
    <Setter Property="AutomationProperties.Name" Value="Share" />
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Viewbox Margin="11">
                        <Path Stretch="Uniform" Fill="#FFFFFFFF" Width="26" Height="26" Margin="0,0,0,0" Data="F1M1753.16,1373.61C1751.09,1373.61,1749.19,1372.94,1747.62,1371.82L1729.47,1381.27 1747.42,1390.61C1749.02,1389.4 1750.99,1388.65 1753.16,1388.65 1758.45,1388.65 1762.73,1392.94 1762.73,1398.22 1762.73,1403.51 1758.45,1407.8 1753.16,1407.8 1747.87,1407.8 1743.59,1403.51 1743.59,1398.22 1743.59,1398.11 1743.62,1398 1743.62,1397.88L1725.63,1388.52C1724.03,1389.73 1722.05,1390.47 1719.89,1390.47 1714.6,1390.47 1710.31,1386.19 1710.31,1380.9 1710.31,1375.61 1714.6,1371.33 1719.89,1371.33 1722.3,1371.33 1724.49,1372.26 1726.17,1373.73L1743.65,1364.64C1743.64,1364.44 1743.59,1364.24 1743.59,1364.04 1743.59,1358.75 1747.87,1354.46 1753.16,1354.46 1758.45,1354.46 1762.73,1358.75 1762.73,1364.04 1762.73,1369.32 1758.45,1373.61 1753.16,1373.61z">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <TransformGroup.Children>
                                        <RotateTransform Angle="0" />
                                        <ScaleTransform ScaleX="1" ScaleY="1" />
                                    </TransformGroup.Children>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Viewbox>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

The style is based on AppBarButtonStyle and define the share icon a Path contained in a ViewBox. You can get the style here.

// xamlgeek

One Response to “ShareAppBarButtonStyle for XAML”

  1. xyzzer June 28, 2012 at 15:50 #

    The WinRT XAML Toolkit (http://winrtxamltoolkit.codeplex.com/) also includes a StylesBrowser app that makes it easy to see what styles are available and copy the names of the styles into your xaml – that includes all 150 styles Tim Heuer blogged about.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: