UWP PivotItem ListView TabChange 问题 [英] UWP PivotItem ListView TabChange issue

问题描述

我遇到了奇怪的问题.我的 Xaml 中有 Pivot，如下所示:

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>

问题是，当我运行应用程序时，它显示我Assigned 透视项或选项卡被选中并显示列表(ListView).但是，一旦我尝试更改选项卡/数据透视项，就什么也没有发生.标签不会改变.当我再次点击已分配标签时，列表消失了.

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.

现在，当我设置 SelectedIndex="1" 并运行应用程序时，它会显示 Logged 选项卡为选中状态，并且所有其他选项卡都可以正常工作，并且即使列表没有显示任何不当行为不会在已分配标签上消失.

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">

我想将 Assigned 标签显示为默认的选定标签.即使设置 SelectedIndex="0" 也不能解决问题.

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

我做错了什么?

注意:如果需要更多信息，我会分享.

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

谢谢

推荐答案

可能的问题是我之前提到的 Pivot 的宽度.请尝试定义枢轴的一些宽度.我将您的枢轴宽度标记为打开的拆分窗格.现在它工作正常.请记住，滑动只会在任何视觉元素上被捕获.因此，如果您尝试在屏幕最下方滑动，它将无法正常工作.为了让它工作，你必须再次在那里定义一个容器.我使用了您的代码并在数据透视部分进行了修改.下面是使用它并测试的代码部分.

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>

这篇关于UWP PivotItem ListView TabChange 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！