DropShadowPanel适应按钮模板样式

Question

我正在使用UWP工具包的DropShadowPanel在Button控件上应用阴影效果。

这里的文档：DropShadowPanel XAML Control

事实是我编辑的按钮样式的模板圆形边框，但DropShadowPanel不遵循新的模板：

<controls:DropShadowPanel BlurRadius="4.0" 
           ShadowOpacity="0.70" 
           OffsetX="5.0" 
           OffsetY="5.0" 
           Color="Black" 
           HorizontalAlignment="Left" 
           Margin="91,90,0,0" 
           VerticalAlignment="Top"> 
     <Button x:Name="button" 
       Content="Button" 
       Style="{StaticResource ButtonStyle1}" /> 
    </controls:DropShadowPanel> 

而结果：

所以我期待像这样的东西：

您有任何想法或导致类似的结果吗？

预先感谢您的帮助，

问候

Answer 1

它可能有点晚，但这里是一个Button风格，给你一个圆润的阴影。正如我在this answer中所解释的那样，您需要在ControlTemplate内部使用Rectangle以获得用于阴影的alpha蒙版。

注意我必须创建自己的焦点视觉并关闭系统，因为后者不支持圆角。

<Style x:Key="ShadowButtonStyle" 
     TargetType="Button"> 
    <Setter Property="Background" 
      Value="#FF399C94" /> 
    <Setter Property="Foreground" 
      Value="White" /> 
    <Setter Property="BorderBrush" 
      Value="{ThemeResource SystemControlForegroundTransparentBrush}" /> 
    <Setter Property="BorderThickness" 
      Value="{ThemeResource ButtonBorderThemeThickness}" /> 
    <Setter Property="Padding" 
      Value="24,8" /> 
    <Setter Property="HorizontalAlignment" 
      Value="Left" /> 
    <Setter Property="VerticalAlignment" 
      Value="Center" /> 
    <Setter Property="FontFamily" 
      Value="{ThemeResource ContentControlThemeFontFamily}" /> 
    <Setter Property="FontWeight" 
      Value="Normal" /> 
    <Setter Property="FontSize" 
      Value="{ThemeResource ControlContentThemeFontSize}" /> 
    <Setter Property="UseSystemFocusVisuals" 
      Value="False" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Grid x:Name="RootGrid" 
         Background="Transparent"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="PointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                    Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" 
                   Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual" 
                    Storyboard.TargetProperty="Fill"> 
             <DiscreteObjectKeyFrame KeyTime="0" 
                   Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                    Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" 
                   Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual" 
                    Storyboard.TargetProperty="Fill"> 
             <DiscreteObjectKeyFrame KeyTime="0" 
                   Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                    Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" 
                   Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 

         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" 
                To="1" 
                Storyboard.TargetProperty="(UIElement.Opacity)" 
                Storyboard.TargetName="FocusVisual" 
                d:IsOptimized="True" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unfocused" /> 
          <VisualState x:Name="PointerFocused"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" 
                To="1" 
                Storyboard.TargetProperty="(UIElement.Opacity)" 
                Storyboard.TargetName="FocusVisual" 
                d:IsOptimized="True" /> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <Rectangle x:Name="FocusVisual" 
           Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" 
           StrokeThickness="2" 
           RadiusX="12" 
           RadiusY="12" 
           Margin="-2" 
           Opacity="0" /> 
        <controls:DropShadowPanel HorizontalContentAlignment="Stretch" 
               Color="Black" 
               ShadowOpacity="0.8" 
               OffsetY="4"> 
         <Rectangle x:Name="BackgroundVisual" 
            RadiusX="12" 
            RadiusY="12" 
            Fill="{TemplateBinding Background}" /> 
        </controls:DropShadowPanel> 
        <ContentPresenter x:Name="ContentPresenter" 
             Padding="{TemplateBinding Padding}" 
             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
             VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
             AutomationProperties.AccessibilityView="Raw" 
             Content="{TemplateBinding Content}" 
             ContentTemplate="{TemplateBinding ContentTemplate}" 
             ContentTransitions="{TemplateBinding ContentTransitions}" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

---

...，这是它的样子。 :)

Answer 2

我不知道该怎么面板工作，但我会尝试把面板按钮模板内，就在有边界实际的圆角。否则 - 我只是使用NineGrid来实现投影。