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>

И результат:

введите здесь описание изображения

Итак, я ожидаю что-то вроде:

введите здесь описание изображения

Есть ли у вас какие-либо идеи или приводит к аналогичному результату?

Заранее спасибо за вашу помощь,

С уважением


uwp uwp-xaml windows-community-toolkit
person ArthurCPPCLI    schedule 21.11.2016    source источник
comment
Что вы использовали в своем ButtonStyle1, чтобы сделать его круглым?   -  person Thomas Schneiter    schedule 21.11.2016
comment
Я установил для свойства CornerRadius значение 10 для RootGrid, а затем для ContentPresenter.   -  person ArthurCPPCLI    schedule 21.11.2016

Ответы (2)


arrow_upward
3
arrow_downward

Возможно, это немного поздно, но вот стиль 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>

... и вот как это выглядит. :)

введите здесь описание изображения

person Justin XL    schedule 20.07.2017

arrow_upward
0
arrow_downward

Я не знаю, как работает панель, но я бы попробовал поместить панель внутри шаблона кнопки, как раз вокруг границы, которая имеет фактически закругленные углы. В противном случае я бы просто использовал NineGrid для реализации тени.

person Filip Skakun    schedule 21.11.2016
comment
Уже протестировано без ожидаемого результата. Возможно есть простое решение, буду искать дальше. Спасибо за вашу помощь. - person ArthurCPPCLI; 22.11.2016