如何創建一個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像邊緣

回答

相關問題