WPF 머티리얼 디자인 올린 단추 버튼 올린 된 상태

Question

머티리얼 디자인을 다시 만들려고합니다 & 버튼을 느낍니다. 초점을 맞춘 (떠 다니는) 상태의 경우 가이드 라인에 따르면 버튼 위에 12 % # 000000 음영이 표시됩니다. WPF에서 이것이 어떻게 달성 될 수 있는지 궁금합니다.

저는 12 % 불투명도와 # 000000 색상의 버튼 위에 맞지 않는 사각형을 추가하는 것이 좋습니다. 이 스타일을 스타일로 구현하고 싶지만 그 방법을 모릅니다. 내 스타일은 순간 다음과 같습니다

:

<Style x:Key="MaterialRaisedButton" TargetType="ToggleButton"> 
     <Setter Property="Padding" Value="8 0"/> 
     <Setter Property="Margin" Value="8 6 8 6"/> 
     <Setter Property="Height" Value="36"/> 
     <Setter Property="MinWidth" Value="64"/> 
     <Setter Property="Foreground" Value="Black"/> 
     <Setter Property="Background" Value="{StaticResource MaterialSecondaryColorBrush}"/> 
     <Setter Property="Effect" Value="{StaticResource z-depth2}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ToggleButton"> 
        <Grid> 
        <Rectangle RadiusX="4" RadiusY="4" Fill="#000000" Opacity="0.12"/> 
        <Border CornerRadius="4" Background="{TemplateBinding Background}"> 
         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
        </Border> 
       </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Setter Property="Background" Value="{StaticResource Material12Black}"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

이 일을 어떤 다른 방법이있는 경우에, 나는 당신이 할 수있는 사각형의 채우기의 모든뿐만 아니라 귀 :

Answer 1

해요 # 00000000과 같이 16 진수 색상의 불투명도를 지정하면 처음 두 값은 불투명도입니다. 따라서 12 %는 # 1e000000입니다.

사람이 재료와 같은 버튼에 대한 코드를 재사용하고자하는 경우

코드는 다음과 같습니다 : 마우스가 다른 현명한 불투명 위에있을 때 다음은 0.5 불투명 사각형을 보여줍니다 0이

<Rectangle.Style> 
      <Style TargetType="{x:Type Rectangle}"> 
       <Setter Property="Opacity" Value="0"/> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Opacity" Value=".5"/> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="false"> 
         <Setter Property="Opacity" Value="0"/> 
        </Trigger> 

       </Style.Triggers> 
      </Style> 
     </Rectangle.Style> 

    </Rectangle> 

Answer 2

업데이트입니다. this stackoverflower의 파급 효과와 함께 this source의 그림자를 사용했습니다. 희망이 다른 사람들이 툴킷 :

<Style x:Key="MaterialRaisedButton2" TargetType="Button"> 
     <Setter Property="Padding" Value="8 0"/> 
     <Setter Property="Margin" Value="8 6 8 6"/> 
     <Setter Property="Height" Value="36"/> 
     <Setter Property="MinWidth" Value="64"/> 
     <Setter Property="Foreground" Value="{StaticResource NormalTextBrush}"/> 
     <Setter Property="Background" Value="{StaticResource MaterialSecondaryColorBrush}"/> 
     <Setter Property="Effect" Value="{StaticResource z-depth2}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <cons:RippleEffectDecorator Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Background="{TemplateBinding Background}" HighlightBackground="#1e000000" Grid.Row="0" Grid.Column="0" Panel.ZIndex="0"> 
         <Grid> 
          <Rectangle RadiusX="4" RadiusY="4" Fill="#1e000000" Panel.ZIndex="1"> 
           <Rectangle.Style> 
            <Style TargetType="{x:Type Rectangle}"> 
             <Setter Property="Opacity" Value="0"/> 
             <Style.Triggers> 
              <Trigger Property="IsMouseOver" Value="True"> 
               <Setter Property="Opacity" Value="0.12"/> 
              </Trigger> 
              <Trigger Property="IsMouseOver" Value="false"> 
               <Setter Property="Opacity" Value="0"/> 
              </Trigger> 
             </Style.Triggers> 
            </Style> 
           </Rectangle.Style> 
          </Rectangle> 
          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
         </Grid> 
        </cons:RippleEffectDecorator> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <Trigger Property="IsEnabled" Value="false"> 
       <Setter Property="Background" Value="#1FFFFFFF"/> 
       <Setter Property="Foreground" Value="#42FFFFFF"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style>