如何创建平面按钮样式

Question

在遵循当前设计理念的情况下，我希望能够创建可以应用任何电话口音颜色的平面按钮样式。基本上，我希望这看起来有点像平铺，平面主题和图标作为按钮的内容。我该如何做到这一点？我不需要在我的应用程序中使用HubTile或任何类型的辅助磁贴，这只是用作以这种方式为主题的按钮。它将简单地将用户导航到应用程序的另一部分。我不知道如何更改按钮控件的默认样式模板以创建这样的效果？我最终的结果是在屏幕底部有四个这样的风格化按钮，每个按钮都有一个不同的内容图标，用户可以直观地了解该按钮的点击事件将会如何进行。

编辑

玻璃按钮样式，我想修改到扁平按钮样式

<Style x:Key="GlassButton" TargetType="Button"> 
    <Setter Property="Background" Value="#FF1F3B53"/> 
    <Setter Property="Foreground" Value="#FF000000"/> 
    <Setter Property="Padding" Value="3"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="BorderBrush"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FFA3AEB9" Offset="0"/> 
       <GradientStop Color="#FF8399A9" Offset="0.375"/> 
       <GradientStop Color="#FF718597" Offset="0.375"/> 
       <GradientStop Color="#FF617584" Offset="1"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Grid> 
        <vsm:VisualStateManager.VisualStateGroups> 
         <vsm:VisualStateGroup x:Name="CommonStates"> 
          <vsm:VisualState x:Name="Normal"/> 

          <vsm:VisualState x:Name="MouseOver"> 
          </vsm:VisualState> 

          <vsm:VisualState x:Name="Pressed"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                    Storyboard.TargetName="glow" 
                    Storyboard.TargetProperty="(UIElement.Opacity)"> 
             <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" 
                   Value="1"/> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </vsm:VisualState> 

          <vsm:VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity"> 
             <SplineDoubleKeyFrame KeyTime="0" Value=".55"/> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </vsm:VisualState> 
         </vsm:VisualStateGroup> 
         <vsm:VisualStateGroup x:Name="FocusStates"> 
          <vsm:VisualState x:Name="Focused"> 
          </vsm:VisualState> 
          <vsm:VisualState x:Name="Unfocused"/> 
         </vsm:VisualStateGroup> 
        </vsm:VisualStateManager.VisualStateGroups> 

        <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4"> 
         <Border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4"> 
          <Grid> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="0.507*"/> 
            <RowDefinition Height="0.493*"/> 
           </Grid.RowDefinitions> 
           <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4"> 
            <Border.Background> 
             <RadialGradientBrush> 
              <RadialGradientBrush.RelativeTransform> 
               <TransformGroup> 
                <ScaleTransform ScaleX="1.702" ScaleY="2.243"/> 
                <SkewTransform AngleX="0" AngleY="0"/> 
                <RotateTransform Angle="0"/> 
                <TranslateTransform X="-0.368" Y="-0.152"/> 
               </TransformGroup> 
              </RadialGradientBrush.RelativeTransform> 
              <GradientStop Color="#B28DBDFF" Offset="0"/> 
              <GradientStop Color="#008DBDFF" Offset="1"/> 
             </RadialGradientBrush> 
            </Border.Background> 
           </Border> 
           <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/> 
           <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0"> 
            <Border.Background> 
             <LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028"> 
              <GradientStop Color="#99FFFFFF" Offset="0"/> 
              <GradientStop Color="#33FFFFFF" Offset="1"/> 
             </LinearGradientBrush> 
            </Border.Background> 
           </Border> 
          </Grid> 
         </Border> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

我试图在风格的底部修改shine边境以单一颜色（最好一个黑暗（可能具有0.7的不透明度）灰色，可以很好地匹配黑暗的主题），但我仍然看到玻璃按钮样式的效果，即按钮的上半部分比底部更轻。我相信我想要做的其他更改可以管理，例如删除按钮样式的角半径，以便按钮可以是方形的，也可以是按钮周围的边框。无论哪种方式，任何建议，提示或建议将大大帮助！

Answer 1

如何：

<Style x:Key="FlatButtonStyle" 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 PhoneFontSizeMedium}"/> 
    <Setter Property="Padding" Value="10,5,10,6"/> 
    <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="Foreground" Storyboard.TargetName="ContentContainer"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
             <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="{StaticResource PhoneDisabledBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{TemplateBinding Margin}"> 
         <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

使用方法如下：

<Button Grid.Row="1" Grid.Column="0" 
     Background="{StaticResource PhoneAccentBrush}" 
     Height="80" Width="300" Margin="12,0" 
     Style="{StaticResource FlatButtonStyle}"> 
    <Button.Content> 
     <Image Source="/Assets/ApplicationIcon.png" /> 
    </Button.Content> 
</Button> 

，结果是这样的：

编辑：用于TemplateBinding为边境保证金属性删除预定义的间距