Buttons styled to look like app bar buttons

Question

Is it possible to style a xaml button tag to look like an application bar button by changing the style? and how can it be done.

Answer 1

Hope this Helps.

<Page.Resources>
    <Style x:Key="RoundedButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="30"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Ellipse Name="Ellipse" Grid.Row="0" StrokeThickness="1" Fill="{TemplateBinding Background}" Height="40" Width="40"  Stroke="White"></Ellipse>
                        <ContentPresenter Name="Content" Grid.Row="0" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
                        <TextBlock Text="{TemplateBinding Tag}" Grid.Row="1" Margin="0,-2,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="12" Foreground="White" FontFamily="Segoe Ui"></TextBlock>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Ellipse">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0.8"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Ellipse">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="&#xE107;" Style="{StaticResource RoundedButton}" FontSize="19" FontFamily="Segoe Ui Symbol" Tag="Delete" Background="RoyalBlue" />
<Button Content="&#xE119;" Margin="10,0,0,0" Style="{StaticResource RoundedButton}" FontSize="16" FontFamily="Segoe Ui Symbol" Tag="Mail" Background="ForestGreen" />
<Button Content="&#xE112;" Margin="10,0,0,0" Style="{StaticResource RoundedButton}" FontSize="17" FontFamily="Segoe Ui Symbol" Tag="Back" Background="Red" />
</StackPanel>

Output

Answer 2

Check this page for existing styles which you can reuse to create a similar button.

http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx

But there is no style that renders a button to look like an app bar button (e.g. a circle instead of a rectangle). You will have to render this on your own using this brush:

PhoneChromeBrush

or this color:

PhoneChromeColor

But you should first check the Microsoft style guidelines whether this is a good idea or not. I am not aware of a limitation to not mimic app bar buttons, but the user would probably not expect to see such buttons somewhere else than on the bottom.

Answer 3

You can get the ready to use class for round button here: Create a round button control for Windows Phone.