xamldata-bindinguwpuwp-xamlsplitview

UWP SplitView DisplayMode Overlay - not in focus

I have a SplitView:

<SplitView Name="splitView" 
   DisplayMode="{Binding SplitViewDisplayMode}" 
   IsPaneOpen="{Binding SplitViewIsPaneOpen}" 
   OpenPaneLength="200" CompactPaneLength="51"/>

I am also using VisualStateManager to adjust the SplitView based on application window size: (example)

<VisualState.StateTriggers>
   <AdaptiveTrigger MinWindowWidth="500"></AdaptiveTrigger>
</VisualState.StateTriggers>

Thus far everything works correctly, but I ran into an unexpected result when the trigger above and state below are activated.

<VisualState.Setters>
   <Setter Value="True" Target="splitView.IsPaneOpen"></Setter>
   <Setter Value="Overlay" Target="splitView.DisplayMode"></Setter>
</VisualState.Setters>

I cant seem to find a way to detect the event so that my ViewModel knows when the SplitView pane focus is lost. Right now as designed Overlay displays until the user clicks the view (as designed), but I'd like to know, when the SplitView Overlay is collapsed so that I can add additional binding events into my HamburgerMenu.

From what I am experiencing it appears that VisualStateManager doesn't update/change my bindings

DisplayMode="{Binding SplitViewDisplayMode}"

Any ideas as to how I can discover if/when the Overlay disappears/Closes?

The only thing I can think of is to create methods that discover the Window size, and then determine if the SplitView should be Inline/Compact/Overlay.. This is doable but would result in a lot of potential combinations.

Any thoughts or ideas on how to detect or get SplitView to tell me if Overlay is Collapsed when a user clicks a control outside of the SplitView?

Solution

  • To make the bindings work, you have to specify them as two way bindings. Without this, they will only update the UI with your changes in code, not the other way around:

    <SplitView Name="splitView" 
       DisplayMode="{Binding SplitViewDisplayMode, Mode=TwoWay}" 
       IsPaneOpen="{Binding SplitViewIsPaneOpen, Mode=TwoWay}" 
       OpenPaneLength="200" CompactPaneLength="51"/>

    Now your properties should be properly updated whenever the state changes.