Как создать DropShadow для SplitView.Pane, как в Edge

В настоящее время я пытаюсь создать SplitView.Pane, который выглядит как панель истории/избранного пограничного браузера. Поэтому мне нужна тень на (левой) границе моего SplitView.Pane.

Для создания тени я использую DropShadowPanel из набора инструментов UWP. Идея примерно такая (не работает, конечно):

<controls:DropShadowPanel>
    <SplitView.Pane>
        <!--Content-->
    </SplitView.Pane>
</controls:DropShadowPanel>

Тень должна быть за пределами панели. Как мне это сделать?

Вот как должна выглядеть тень:

Как это должно выглядеть

РЕДАКТИРОВАТЬ: DropShadow должен находиться ВНЕ панели. Ответ дубликата сообщения создает тень внутри панели. Если я что-то там пропущу.


uwp uwp-xaml windows-community-toolkit dropshadow
person Crix    schedule 16.09.2017    source источник
comment
Похоже, уже заданный вопрос или дубликат этого stackoverflow.com/questions/43395093/   -  person Shubham Sahu    schedule 16.09.2017
comment
Возможный дубликат Как добавить тень для SplitView.Pane< /а>   -  person Shubham Sahu    schedule 16.09.2017
comment
Вы упускаете вопрос, заданный человеком, я процитирую: Однако тень появляется внутри панели, а я хочу, чтобы она была снаружи SplitView.Pane, обертывая ее. Как я могу это реализовать? Спасибо!   -  person iam.Carrot    schedule 16.09.2017
comment
Да, я это читал. Тем не менее, ответ не решает мою проблему, поскольку создает тень внутри панели.   -  person Crix    schedule 16.09.2017

Ответы (1)


arrow_upward
4
arrow_downward

Вы не можете просто применить тень к прямому потомку Pane, так как он будет казаться обрезанным. Конечно, вы можете попробовать переопределить стиль элемента SplitView и применить тень непосредственно к элементу Pane, но вскоре вы обнаружите, что элемент PaneRoot имеет собственную логику Clipping, определенную в XAML. , поэтому, если вы не будете осторожны, вы можете нарушить базовую логику пользовательского интерфейса.

Вот простое решение, которое работает без изменения стиля. Идея состоит в том, чтобы применить тень к внутреннему элементу, где между этим элементом и корневым элементом Pane достаточно места для распространения тени.

Предположим, что PanePlacement установлено на Right, тогда ваш корневой элемент, Border (т.е. RootBorder), должен иметь левый отступ (т.е. 12,0,0,0), который соответствует BlurRadius (т.е. 12) элемента DropShadowPanel.

Кроме того, PaneBackground должен быть прозрачным, иначе он закроет тень. Вместо этого цвет фона следует применить к элементу-контейнеру (например, PaneContentGrid), который находится внутри корневого элемента.

Пожалуйста, смотрите код ниже для простого примера -

XAML

<SplitView PanePlacement="Right" PaneBackground="Transparent">
    <SplitView.Pane>
        <Border x:Name="RootBorder" Padding="12,0,0,0">
            <Grid>
                <controls:DropShadowPanel BlurRadius="12"
                                          Color="Black"
                                          Opacity="0.3"
                                          HorizontalContentAlignment="Stretch"
                                          VerticalContentAlignment="Stretch">
                    <Rectangle Fill="White" />
                </controls:DropShadowPanel>

                <!-- SystemControlPageBackgroundChromeLowBrush is the default PaneBackground brush, feel free to change it to whatever you like! -->
                <Grid x:Name="PaneContentGrid" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">
                    <!-- place your Panel content here. -->
                </Grid>
            </Grid>
        </Border>
    </SplitView.Pane>
</SplitView>

Демо

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

person Justin XL    schedule 17.09.2017
comment
Потрясающий! Это делает свое дело. Большое спасибо за подробное решение. - person Crix; 17.09.2017