UWP PivotItem ListView TabChange issue

Question

I am encountering strange problem. I have Pivot in my Xaml like this:

<Page.Resources>
    <ResourceDictionary>
        <SolidColorBrush x:Key="NavButtonPressedBackgroundBrush" Color="White" Opacity="0.3" />
        <SolidColorBrush x:Key="NavButtonCheckedBackgroundBrush" Color="White" Opacity="0.2" />
        <SolidColorBrush x:Key="NavButtonHoverBackgroundBrush" Color="White" Opacity="0.1" />

        <Style x:Key="NavRadioButtonStyle" TargetType="RadioButton">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Padding" Value="3"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource NavButtonHoverBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource NavButtonPressedBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource NavButtonCheckedBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked"/>
                                    <VisualState x:Name="Indeterminate"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                    <VisualState x:Name="PointerFocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Name="BackgroundGrid" Background="Transparent" VerticalAlignment="Stretch">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="48"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock FontSize="34" Height="38" Text="{TemplateBinding Tag}" FontFamily="Segoe MDL2 Assets" Margin="5,8,5,5" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</Page.Resources>


<SplitView  x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" 
            CompactPaneLength="48" OpenPaneLength="240" PaneBackground="DarkGray">
    <SplitView.Pane>
        <StackPanel x:Name="SplitViewPanel">

            <RadioButton x:Name="HamburgerRadioButton" Click="HamburgerRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}"
                         Background="Gray" GroupName="Hamburger" Tag="" />

            <RadioButton x:Name="HomeRadioButton" Click="HomeRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}"
                         Background="Gray" Content="Home" GroupName="Navigation" Tag=""/>

            <RadioButton x:Name="SettingRadioButton" Click="SettingRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}"
                         Background="Gray" Content="Settings" GroupName="Navigation" Tag=""/>

        </StackPanel>
    </SplitView.Pane>
    <SplitView.Content>
        <SplitView Background="Azure" IsPaneOpen="True" OpenPaneLength="400" DisplayMode="Inline">
            <!--To Show Listing-->
            <SplitView.Pane>
                <Frame Name="FrameListing">
                    <RelativePanel>
                        <!--List Pane Header-->

                            <TextBlock Text="MY RISKS" Name="ListHeaderPanelTitle" RelativePanel.AlignLeftWithPanel="True" Padding="10"/>
                            <Button Name="ListHeaderAdd" FontFamily="Segoe MDL2 Assets" Content="" 
                                    RelativePanel.AlignRightWithPanel="True" Background="Transparent" Padding="10"/>
                            <Button Name="ListHeaderFilter" FontFamily="Segoe MDL2 Assets" Content="" 
                                    RelativePanel.LeftOf="ListHeaderAdd" Background="Transparent" Padding="10"/>

                        <!--Tabs Layout-->
                        <Pivot x:Name="rootPivot" RelativePanel.Below="ListHeaderPanelTitle">
                            <PivotItem Header="Assigned">
                                <ListView ItemsSource="{x:Bind Risks}"  IsItemClickEnabled="True" 
                                           ItemClick="ListView_ItemClick" x:Name="AssignedRisksList">
                                <ListView.ItemTemplate>
                                    <DataTemplate x:DataType="data:Risk">
                                        <StackPanel Orientation="Vertical">
                                            <TextBlock FontSize="10" Text="{x:Bind Status}"/>
                                            <TextBlock FontSize="16" Text="{x:Bind Description}"/>
                                            <TextBlock FontSize="14" Text="{x:Bind AssignedTo}"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                                </ListView>
                                <!--<TextBlock Text="Assigned Listing will go here."/>-->
                            </PivotItem>
                            <PivotItem Header="Logged">
                                <TextBlock Text="Logged Listing will go here."/>
                            </PivotItem>
                            <PivotItem Header="All" >
                                <TextBlock Text="All Listing will go here."/>
                            </PivotItem>
                        </Pivot>

                    </RelativePanel>
                </Frame>
            </SplitView.Pane>
            <!--To SHow Detail-->
            <SplitView.Content>
                <Frame Name="FrameRiskDetail">

                </Frame>
            </SplitView.Content>
        </SplitView>
    </SplitView.Content>
</SplitView>

The problem is that when I run the application, it shows me Assigned pivot item or tab as selected and shows list(ListView). However as soon as I try to change tab/PivotItem, nothing happens. Tabs do not change. And when I click again on Assigned tab, list disappears.

Now when I set SelectedIndex="1" and run app, it shows Logged tab as selected and every other tab works fine and shows no improper behavior even list doesn't disappear on Assigned tab.

<Pivot x:Name="rootPivot" RelativePanel.Below="ListHeaderPanelTitle" SelectedIndex="1">

I want to show Assigned tab as default selected tab. Even setting SelectedIndex="0" doesn't solve the problem.

What I am doing wrong?

NOTE: If more information is required, I will share it.

Thanks

Answer 1

Possible issue is with the width of the Pivot as I mentioned earlier. Please try to define some width of the pivot. I marked your pivot width as your open split pane. Now it is working fine. Just keep in mind swipe will be captured only on any visual element. Thus if you try to swipe at very below of the screen it will not work. To make it work you have to define a container there again. I used your code and modified in the pivot section. Below is the code portion use it and test.

                            <!--Tabs Layout-->
                        <Pivot x:Name="rootPivot" RelativePanel.Below="ListHeaderPanelTitle" Width="400">
                            <PivotItem Header="Assigned">
                                <ListView ItemsSource="{x:Bind Risks}" IsItemClickEnabled="True" 
                                       ItemClick="ListView_ItemClick" x:Name="AssignedRisksList">
                                    <ListView.ItemTemplate>
                                        <DataTemplate x:DataType="local:Risk">
                                            <StackPanel Orientation="Vertical">
                                                <TextBlock FontSize="10" Text="{x:Bind Status}"/>
                                                <TextBlock FontSize="16" Text="{x:Bind Description}"/>
                                                <TextBlock FontSize="14" Text="{x:Bind AssignedTo}"/>
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                                <!--<TextBlock Text="Assigned Listing will go here."/>-->
                            </PivotItem>
                            <PivotItem Header="Logged">
                                <TextBlock Text="Logged Listing will go here."/>
                            </PivotItem>
                            <PivotItem Header="All">
                                <TextBlock Text="All Listing will go here."/>
                            </PivotItem>
                        </Pivot>