【问题标题】:How to Style a Button like Application Bar Buttons如何为应用程序栏按钮等按钮设置样式
【发布时间】:2014-04-26 13:51:09
【问题描述】:

我创建了一种风格,它在某种程度上符合我的要求,事实上它确实有效。但是我需要更新样式,以便我可以在多个按钮上使用它,而不仅仅是一个。目前我将按钮源放置在样式本身中,并且我希望能够应用按钮实际存在于页面上的样式。这是我目前正在做的,但只适用于单个按钮。此外,此样式与默认应用程序栏样式不完全匹配,据我所知,无论是浅色还是深色主题,都会用设备强调色填充圆圈,并且按钮内部的图标保持白色,我该如何更新我的解决方案也是为了这个?

<Style x:Key="ButtonStyle1" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Padding" Value="10,3,10,5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="circleBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="rectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="circleBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="rectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <Grid >
                                <Rectangle x:Name="rectangle" Fill="{StaticResource PhoneForegroundBrush}">
                                    <Rectangle.OpacityMask>
                                        <ImageBrush ImageSource="/Assets/Map/appbar.location.round.png"/>
                                    </Rectangle.OpacityMask>
                                </Rectangle>
                                <Ellipse x:Name="circleBorder" Stroke="{StaticResource PhoneForegroundBrush}"  StrokeThickness="3"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

...

<Button x:Name="MimicAppBarButton" Width="76" Height="76" 
                                 HorizontalAlignment="Center" VerticalAlignment="Center" 
                                Style="{StaticResource ButtonStyle1}" BorderBrush="Transparent"  
                                toolkit:TiltEffect.IsTiltEnabled="True" Click="MimicAppBarButton_Click">

【问题讨论】:

    标签: xaml button windows-phone-8 styles


    【解决方案1】:

    您好,您可以使用coding4Fun toolkit。它具有控制圆形按钮,类似于应用栏按钮。

    【讨论】:

    • 谢谢,如何更改 RoundButton 控件中的图像?它默认为复选标记。设置“ImageSource”属性不会使我使用的图标图像保持在周围椭圆的范围内,就像在默认应用栏按钮中一样。
    猜你喜欢
    • 1970-01-01
    • 2014-05-29
    • 2019-11-09
    • 2018-06-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-22
    • 2012-08-24
    相关资源
    最近更新 更多