UWP PivotItem ListView TabChange 问题答案

【问题标题】：UWP PivotItem ListView TabChange issueUWP PivotItem ListView TabChange 问题
【发布时间】：2016-05-04 14:38:53
【问题描述】：

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

<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)。但是，一旦我尝试更改 tab/PivotItem，什么也没有发生。标签不会改变。当我再次点击 Assigned 标签时，列表消失了。

现在，当我设置 SelectedIndex="1" 并运行应用程序时，它显示 Logged 选项卡已被选中，并且所有其他选项卡都可以正常工作并且没有显示任何不当行为，即使列表不会在 Assigned 选项卡。

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

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

我做错了什么？

注意：如果需要更多信息，我会分享。

谢谢

【问题讨论】：

我检查了您提供的部分代码，看起来按照您的期望工作。可能是您的支点跨越整个页面，因此请尝试从一侧滑动到另一侧。如果问题仍然存在，请告诉我。
刷卡根本不起作用。查看我更新的 xaml 代码。
这是枢轴宽度的问题。枢轴宽度可能设置为无限（默认值），因此手势完成事件未正确捕获。如果您在拆分视图窗格中将宽度设置为某个确定的可用值，那么它将起作用。为了使您的代码更好和更动态，使枢轴宽度相对/元素绑定到拆分视图打开窗格的宽度。请参阅我的解决方案评论。我已经更新了枢轴部分。

标签： .net win-universal-app windows-10 windows-10-universal

【解决方案1】：

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

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

【讨论】：

是的，这是宽度问题。我指定了Width="400"，一切都像魅力一样。谢谢基兰保罗。还有一件事。如何指定 Width 等于其父容器的宽度？