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進数の色で不透明度を指定します。最初の2つの値は不透明度です。したがって、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>