xamlgeek

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

Tags: AppBarButtonStyle, ShareAppBarButtonStyle