UWP：如何在关闭窗格时指定窗格边框？

Question

Just a quick question, I am using SplitView and I tried to create a left border when the pane is closed. (Note: I placed the pane on the right).

Is it possible? I've tried:

<SplitView DisplayMode="CompactOverlay" IsPaneOpen="False" OpenPaneLength="320" PanePlacement="Right">
    <SplitView.Pane>
        <Border BorderBrush="black" BorderThickness="1 0 0 0">
            ...
            ...
            ...
        </Border>
    </SplitView.Pane>
    <SplitView.Content>
        ...
        ...
        ...
    </SplitView.Content>
</SplitView>

But the border only appear when I open the pane.

Sorry for this silly question, but UWP is new to me.

Thanks.

Answer 1

It is not possible using the default style of the control. By default, the pane visibility is set to collapsed when the IsPaneOpen property is set to false

If you want to do so, you will have to create your own style for the splitview.

Here is the default style (visual state manager has been removed)

<Style TargetType="SplitView">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="OpenPaneLength" Value="{ThemeResource SplitViewOpenPaneThemeLength}"/>
    <Setter Property="CompactPaneLength" Value="{ThemeResource SplitViewCompactPaneThemeLength}"/>
    <Setter Property="PaneBackground" Value="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="SplitView">
                <Grid Background="{TemplateBinding Background}">


                    <!-- Content Area -->
                    <Grid x:Name="ContentRoot" Grid.ColumnSpan="2">
                        <Border Child="{TemplateBinding Content}"/>
                        <Rectangle x:Name="LightDismissLayer" Fill="Transparent" Visibility="Collapsed"/>
                    </Grid>

                    <!-- Pane Content Area-->
                    <Grid
                        x:Name="PaneRoot"
                        Grid.ColumnSpan="2"
                        HorizontalAlignment="Left"
                        Visibility="Collapsed"
                        Background="{TemplateBinding PaneBackground}"
                        Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneLength}">
                        <Grid.Clip>
                            <RectangleGeometry x:Name="PaneClipRectangle">
                                <RectangleGeometry.Transform>
                                    <CompositeTransform x:Name="PaneClipRectangleTransform"/>
                                </RectangleGeometry.Transform>
                            </RectangleGeometry>
                        </Grid.Clip>
                        <Grid.RenderTransform>
                            <CompositeTransform x:Name="PaneTransform"/>
                        </Grid.RenderTransform>
                        <Border Child="{TemplateBinding Pane}"/>
                        <Rectangle
                            x:Name="HCPaneBorder"
                            x:DeferLoadStrategy="Lazy"
                            Visibility="Collapsed"
                            Fill="{ThemeResource SystemControlForegroundTransparentBrush}"
                            Width="1"
                            HorizontalAlignment="Right"/>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>