如何创建一个SplitView.Pane像边缘

DropShadow我目前正在尝试创建一个SplitView.Pane看起来有点像边缘浏览器历史记录/收藏夹窗格。因此，我需要在SplitView.Pane的（左侧）边框处有阴影。如何创建一个SplitView.Pane像边缘

要创建阴影，我使用UWP工具包中的DropShadowPanel。这个想法是这样的（当然不起作用）：

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

阴影应该在面板外面。我如何完成这项工作？

这是影子应该什么样子：

How it should look like

编辑：阴影效果应该是外面的玻璃窗。重复帖子的答案在窗格内创建一个阴影。除非我想念那里的东西。

来源

2017-09-16 Crix

貌似已经问问题或这个HTTPS的复制： //stackoverflow.com/questions/43395093/how-to-add-a-drop-s hadow-for-splitview-pane –

[如何为SplitView.Pane添加投影]可能的重复（https://stackoverflow.com/questions/43395093/how-to-add-a-drop-shadow-for- splitview-pane） –

你错过了这个人问的问题，我会引用：_但是，阴影出现在窗格内，而我希望它在SplitView.Pane之外，将它包裹起来。我怎样才能实现呢？谢谢！_ –

你不能简单地给Pane的直接孩子涂上阴影，因为它会被截断。当然，你可以尝试重写SplitView的风格和应用的影子直接到Pane元素，但你很快就会发现，在PaneRoot都有自己剪辑在XAML定义逻辑，所以如果你不小心，你可能会破坏其底层的UI逻辑。

这是一个简单的解决方案，不需要修改样式。这个想法是将阴影应用在内部元素上，在这个元素和Pane的根元素之间有足够的空间来扩散阴影。

假定PanePlacement设置为Right，那么你的根元素，一个Border（即RootBorder），应该有一个左填充（即12,0,0,0）该DropShadowPanel的匹配BlurRadius（即12）。

另外，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>

演示

来源

2017-09-17 05:05:44

太棒了！这就是诀窍。非常感谢您的详细解决方案。 – Crix

如何创建一个SplitView.Pane像边缘

回答

相关问题