DropShadowPanel适应按钮模板样式 [英] DropShadowPanel adapt to button template style
本文介绍了DropShadowPanel适应按钮模板样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用UWP Toolkit的DropShadowPanel在Button控件上应用阴影效果.
I'm using the UWP Toolkit's DropShadowPanel for apply a shadow effect on a Button control.
此处提供文档: DropShadowPanel XAML控件
事实是我为圆形边框编辑了按钮样式的模板，但是DropShadowPanel不遵循新的模板:
The fact is i edited the button style's Template for Round borders but the DropShadowPanel doesn't follow the new Template :
<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>
结果:
所以我希望这样:
您有任何想法或导致类似的结果吗?
Do you have any ideas or leads to a similar result ?
预先感谢您的帮助，
致谢
推荐答案
可能有点晚了，但是这里的Button样式为您提供了一个圆角的阴影.正如我在此答案中所述，您将需要使用Rectangle在ControlTemplate中获取阴影的 alpha遮罩.
It's probably a bit late but here is a Button style that gives you a rounded drop shadow. As I explained in this answer, you will need to use a Rectangle inside the ControlTemplate to get the alpha mask for the shadow.
请注意，我必须创建自己的聚焦图像并关闭系统，因为后者不支持圆角.
Note I had to create my own focus visual and turn off the system one 'cause the latter doesn't support rounded corners.
<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>
...这就是它的样子. :)
... and this is how it looks like. :)
这篇关于DropShadowPanel适应按钮模板样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
