DropShadowPanel адаптируется к стилю шаблона кнопки

Question

Я использую DropShadowPanel инструментария UWP Toolkit для применения эффекта тени к элементу управления 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, вам нужно будет использовать Rectangle внутри ControlTemplate, чтобы получить маску для тени.

Примечание. Я должен был создать свой собственный фокус и отключить систему, потому что последняя не поддерживает закругленные углы.

<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 для реализации тени.