플랫 버튼 스타일을 만드는 방법

현재 디자인 철학을 따르면 다음과 같이 평평한 버튼 스타일을 만들 수있어 전화 강조 색상을 적용 할 수 있습니다. 필자는 기본적으로 플랫 테마와 아이콘을 버튼의 콘텐츠로 사용하여 타일과 비슷하게 보이기를 바랍니다. 내가 어떻게 이럴 수 있니? 내 응용 프로그램에서 HubTile 또는 다른 종류의 보조 타일을 사용할 필요가 없습니다.이 방법으로 테마로 단추로 사용하기위한 것입니다. 단순히 사용자를 응용 프로그램의 다른 부분으로 이동합니다. 단추 컨트롤에 대한 기본 스타일 템플릿을 변경하여 이러한 효과를 만드는 방법을 모르겠습니다. 나의 최종 결과는 화면의 하단에 4 개의 스타일 화 된 버튼이 있고 각각은 버튼의 클릭 이벤트가 진행될 때 사용자에게 직관적 인 컨텐츠와 다른 아이콘을 갖게되는 것입니다.플랫 버튼 스타일을 만드는 방법

나는 하나의 색으로 스타일의 하단에있는 shine 국경을 수정하려고 노력

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

내가 바람직하게는 (플랫 버튼 스타일을 수정하고 싶다고 편집

유리 단추의 스타일, 어둠 (어둡게 주제와 잘 어울리는 회색의 불투명도가 0.7 인 회색)이 있지만 여전히 유리 단추 스타일의 효과, 즉 단추의 위쪽 절반이 아래쪽보다 가볍습니다. 단추 모양이 사각형이되도록 버튼 반경과 경계선을 제거하는 등 모퉁이 반지름을 제거하는 등 내가 할 수있는 다른 변화가 있다고 생각합니다. 어느 쪽이든, 모든 권장 사항, 팁 또는 조언은 크게 도움이 될 것입니다!

출처

2013-12-08 Matthew

단추가되어야하는 특별한 이유, 왜 안쪽의 이미지가있는 경계선만으로도 이벤트를 처리하고 반응을 보일 수 있습니다 ...? Windows Phone toolkit의 기울이기 효과를 추가하여 완벽한 Windows Phone 환경을 경험하십시오. :) –

좋은 지적입니다. 내 주된 이유는 '플랫'버튼을위한 기존의 '글래스'버튼에서 가지고있는 버튼을 선택할 때 스타일을 사용하는 것이 었습니다. 이 같은 것이 국경에서 사용될 수 있을까요? 위의 스타일을 추가했습니다 (방금 언급 한 다른 질문과 동일). '유리'효과를 없애고 표준 Windows Phone 디자인과 더 잘 어울리는 평면, 사각형, 단추 (또는 테두리)를 사용하는 것을 선호합니다. – Matthew

내 대답보기, 도움이 되길 바랍니다. –

이 방법에 대해 :

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

을 그리고 그 결과가 이것이다 :

Result - flat button

편집 : 테두리 여백에 대한 TemplateBinding 사용 미리 정의 된 간격을 제거하는 속성

출처

2013-12-08 20:25:10

잘 작동하는 것 같습니다. 내 유일한 질문은 그리드에 배치하면 단추 끝과 그리드 가장자리 사이에 간격이 있다는 것입니다. 버튼을 그리드의 가장자리까지 늘리려면 간격을 제거하기 위해 어떤 속성을 변경해야합니까? ''로 여백을 설정했는데, 이는 버튼의 가장자리와 그리드 사이의 간격을 제거하는 문제를 처리하는 것으로 보입니다. 이것이 올바른/최선의 방법입니까? – Matthew

@Matthew 마진 제거 = "{StaticResource PhoneTouchTargetOverhang}"을 스타일의 테두리에서 제거하고 대신 여백 = "{TemplateBinding Margin}"을 추가하십시오. 그런 다음 버튼의 Margin 속성을 사용하여 원하는 여백을 설정하면됩니다. 편집 : 나는 당신을 위해 위의 코드에서 그것을했다. –

버튼을 누를 때 배경을 변경할 수있는 스타일이 하나 더 표시되지만 단추를 눌렀을 때 콘텐츠 이미지의 전경 (아이콘)을 어떻게 바꿀 수 있습니까? – Matthew

플랫 버튼 스타일을 만드는 방법

답변

관련 문제