按钮样式看起来像应用程序栏按钮

Question

是否可以通过更改样式将xaml按钮标记设置为应用栏按钮？以及如何完成。

Answer 1

希望这有助于。

<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>

<强>输出

Answer 2

检查此页面是否有可用于创建类似按钮的现有样式。

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

但是没有样式可以使按钮看起来像应用栏按钮（例如圆形而不是矩形）。您必须使用此画笔自行渲染：

PhoneChromeBrush

或这种颜色：

PhoneChromeColor

但是你应该首先查看微软风格指南，看看这是不是一个好主意。我不知道没有模仿app bar按钮的限制，但是用户可能不会期望在其他地方看到这样的按钮而不是在底部。

Answer 3

您可以在此处获取圆形按钮的即用型课程：Create a round button control for Windows Phone。