DropShadowPanel адаптируется к стилю шаблона кнопки
Я использую 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>
И результат:
Так что я ожидаю что-то вроде:
Есть ли у вас идеи или приводит к подобному результату?
Заранее спасибо за помощь,
С уважением
2 ответа
Решение
Вероятно, уже немного поздно, но вот Button стиль, который дает вам округлую тень. Как я объяснил в этом ответе, вам нужно будет использовать 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>
... и вот так это выглядит.:)
Я не знаю, как работает панель, но я бы попробовал поместить панель внутри шаблона кнопки, только вокруг границы, которая имеет фактические закругленные углы. В противном случае - я бы просто использовал NineGrid реализовать тень.