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.

Create your own style with Expression Blend. http://stackoverflow.com/questions/3476963/windows-phone-7-wp7-change-a-buttons-background-color-on-click http://blogs.msdn.com/b/mingfeis_code_block/archive/2010/10/03/windows-phone-7-style-it-using-expression-blend.aspx?Redirected=true refer inks — Jaihind, Apr 15 '14 at 14:39

score 6 · Accepted Answer · answered Apr 15 '14 at 18:53

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

enter image description here

Press windows key + R to get charmap this http://prntscr.com/3agyh5 In charmap search for fontfamily Segoe Ui symbol http://prntscr.com/3agz79 — Heena, Apr 16 '14 at 09:15
Hi @HeenaKishorPatil, for me it worked fine but for more consistency i like to make the `StrokeThickness="2"` — Dirk Jan, Apr 20 '16 at 08:52

score 0 · Answer 2 · answered Apr 15 '14 at 14:35

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.

score 0 · Answer 3 · answered Apr 16 '14 at 03:23

0

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

answered Apr 16 '14 at 03:23

crea7or

4,421
2
26
37

Buttons styled to look like app bar buttons

3 Answers3

Linked