Buttons resembling application panel buttons

Question

Can the xaml button tag style look like an application bar button by changing the style? and how can this 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 that 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 displays a button that resembles an application panel button (for example, a circle instead of a rectangle). You will have to do it yourself using this brush:

PhoneChromeBrush

:

PhoneChromeColor

Microsoft, . , , , , - , .

Answer 3

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