How to customize splitview in Windows 10?

Question

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?

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?

No only some part of it. I want to move content left side when split view opens. I tried using DisplayMode as Inline but it shrinks my split view content. — Kinjan Bhavsar, Apr 07 '16 at 08:38
Set right Margin When pane is opened and set it back to original when pane is closed. To get event when Pane open and close do check http://stackoverflow.com/questions/31636440/windows-10-uwp-splitview-paneclosed-event-is-available-but-not-for-paneopened — Harshad Vekariya, Apr 07 '16 at 10:09
Let me know if it works for you ,i will be post as answer so that other also can refer it. — Harshad Vekariya, Apr 07 '16 at 11:33
Yes it worked you can post an answer. I will accept that answer — Kinjan Bhavsar, Apr 08 '16 at 04:41

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

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

edited May 23 '17 at 11:52

Community

1
1

answered Apr 08 '16 at 07:34

Harshad Vekariya

972
1
7
28

Please give my question also upvote if you found it useful.:-) – Kinjan Bhavsar Apr 08 '16 at 07:35

score 0 · Answer 2 · answered Apr 06 '16 at 07:01

0

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

answered Apr 06 '16 at 07:01

Jerin

3,657
3
20
45

This doesn't work. I want to achieve this when user clicks on Menu icon. – Kinjan Bhavsar Apr 06 '16 at 07:05
Which screen you want to shift. Options one is the one that's supposed to overlay over your below content right – Jerin Apr 06 '16 at 07:10
Yes, I want to shift the left side content when Hamburger menu is clicked. I can't use CompactInline and CompactOverlay because it displayed when the page is displayed. – Kinjan Bhavsar Apr 06 '16 at 07:12
Then how about `Inline` because thats how the content would be moved and also you wont see it displayed. – Jerin Apr 06 '16 at 07:20
it gives the same effect but left side content is shrink and doesn't look good and also, I want to close the menu when a user clicks on content. You can also check Reside Menu in Android and iOS.I want to achieve same. – Kinjan Bhavsar Apr 06 '16 at 07:24
The left side menu shrinks because you are using Inline-The Pane and the content area share the user space side by side and this remains in the screen always even when the user clicks anywhere in the content area. For closing the menu inside your Listview clicked item you can always call `OptionsSplitView.IsPaneOpen` back to False – Jerin Apr 06 '16 at 07:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108370/discussion-between-jerin-and-kinjan-bhavsar). – Jerin Apr 06 '16 at 08:21

How to customize splitview in Windows 10?

2 Answers2