CODEWITHSUNDEEP
c#win-universal-appwindows-10-universal
Kinjan Bhavsar
Kinjan Bhavsar

Reputation: 1449

How to customize splitview in Windows 10?

I am currently working on a Splitview Control which contains some menu options in SplitView Pane and a Grid in SplitView Content section. When the split view pane is opened its content gets hidden. Is it possible to move that slightly left like the following screenshot?

enter image description here

My basic split view implementation is

 <SplitView x:Name="OptionsSplitView" OpenPaneLength="200" PanePlacement="Right"
           DisplayMode="Overlay">

        <SplitView.Pane>
            <ListView x:Name="OptionsList"
                      Margin="10,10,0,0"
                      Grid.Row="1"
                      VerticalAlignment="Center"
                      ItemContainerStyle="{StaticResource GenericListViewContainerStyle}"
                      ItemTemplate="{StaticResource OptionsListItemTemplate}"
                      SelectionChanged="OptionsList_SelectionChanged">
            </ListView>

        </SplitView.Pane>
        <SplitView.Content>
           <Grid/>
        </SplitView.Content>
       </SplitView>

Please suggest is it possible to customize split view as per screenshot?

Upvotes: 1

Views: 698

Answers (2)

Harshad Vekariya
Harshad Vekariya

Reputation: 1052

Bingo,

You can achieve it by just setting Right Margin of content whenever Pane Open or close.

Do refer Below link to get pane open & close event.

(Windows 10 UWP) SplitView.PaneClosed event is available but not for PaneOpened

Upvotes: 2

Jerin
Jerin

Reputation: 4239

Change your Splitview DisplayMode option to CompactInline or CompactOverlay as per your requirement

Upvotes: 0

Related Questions