Search code examples
winrt-xamlwindows-10-universaltemplate10

Interaction.Behaviors does not work in SplitView?


I use SplitView for my XAML page. Inside the SplitView, trigger behavior doesn't work.

For example:

<SplitView.Content>
 <Grid>
  <Button x:Name="Button">
    <Interactivity:Interaction.Behaviors>
      <Core:EventTriggerBehavior EventName="Click" >
         <Core:GoToStateAction StateName="SplitViewState />
      </Core:EventTriggerBehavior>
    </Interactivity:Interaction.Behaviors>
  </Button>

 </Grid>
</SplitView.Content>

When clicking the button, nothing happens. It works on elements outside the SplitView.


Solution

  • I guess you missed setup TargetObject value.

    <Button Content="click me"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
        <I:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="Click" >
                <Core:GoToStateAction TargetObject="{Binding ElementName=MySplitView}"
                                      StateName="OpenOverlayLeft"/>
            </Core:EventTriggerBehavior>
        </I:Interaction.Behaviors>
    </Button>
    

    UPDATED

    Look at behavior with 4 buttons which placed inside SplitView.Content, SplitView.Pane and outside. All works very well.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <SplitView x:Name="MySplitView"
                   PaneBackground="Gray"
                   DisplayMode="CompactOverlay"
                   IsPaneOpen="True"
                   CompactPaneLength="50"
                   OpenPaneLength="280">
            <SplitView.Pane>
                <Grid>
                    <Button Content="close inside"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
                        <i:Interaction.Behaviors>
                            <core:EventTriggerBehavior EventName="Click" >
                                <core:GoToStateAction TargetObject="{Binding ElementName=MySplitView}"
                                                      StateName="Closed"/>
                            </core:EventTriggerBehavior>
                        </i:Interaction.Behaviors>
                    </Button>
                </Grid>
            </SplitView.Pane>
    
            <SplitView.Content>
                <Grid>
                    <Button Content="open inside"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
                        <i:Interaction.Behaviors>
                            <core:EventTriggerBehavior EventName="Click">
                                <core:GoToStateAction TargetObject="{Binding ElementName=MySplitView}"
                                                      StateName="OpenOverlayLeft"/>
                            </core:EventTriggerBehavior>
                        </i:Interaction.Behaviors>
                    </Button>
                </Grid>
            </SplitView.Content>
    
        </SplitView>
    
        <Grid Grid.Column="1"
              Background="Aquamarine">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Button Content="open outside"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center">
                <i:Interaction.Behaviors>
                    <core:EventTriggerBehavior EventName="Click">
                        <core:GoToStateAction TargetObject="{Binding ElementName=MySplitView}"
                                              StateName="OpenOverlayLeft"/>
                    </core:EventTriggerBehavior>
                </i:Interaction.Behaviors>
            </Button>
    
            <Button Content="close outside"
                    Grid.Column="1"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
                <i:Interaction.Behaviors>
                    <core:EventTriggerBehavior EventName="Click" >
                        <core:GoToStateAction TargetObject="{Binding ElementName=MySplitView}"
                                              StateName="Closed"/>
                    </core:EventTriggerBehavior>
                </i:Interaction.Behaviors>
            </Button>
        </Grid>
    </Grid>
    

    Look how it works:

    enter image description here