Как создать стиль плоской кнопки

Question

В соответствии с текущей философией дизайна, я хотел бы иметь возможность создавать плоский стиль кнопки, чтобы я мог применять любой цвет акцента телефона. По сути, мне хотелось бы, чтобы это выглядело как плитка, с плоской темой и значком в качестве содержимого кнопки. Как я могу это сделать? Мне не нужно использовать HubTile или какую-либо вторичную плитку в моем приложении, это просто для использования в качестве кнопки, чтобы быть таким образом. Он просто перемещает пользователя в другую часть приложения. Я не уверен, как изменить шаблон стиля по умолчанию для кнопки управления, чтобы создать такой эффект? Мой конечный результат состоял бы в том, чтобы четыре из этих стилизованных кнопок в нижней части экрана, каждый с другим значком, как содержимое, которое было бы интуитивно понятным для пользователя относительно того, что будет делать событие нажатия кнопки.

EDIT

стекла Кнопка Стиль, который я хотел бы изменить в Flat Button Style

<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 границы в нижней части стиля одного цвета (предпочтительно темный (возможно, с непрозрачностью .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> 

И результат:

Edit: Используется TemplateBinding для Border Margin свойство для удаления предопределенного интервала