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來實現投影。