Interaction.Behaviors does not work in SplitView?

145 Views Asked by At

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.

1

There are 1 best solutions below

2
On BEST ANSWER

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