xaml UWP 将焦点/选择设置为第一个列表视图项答案

【问题标题】：xaml UWP set focus/selection to first listview itemxaml UWP 将焦点/选择设置为第一个列表视图项
【发布时间】：2017-10-23 20:04:42
【问题描述】：

 <ListView x:Name="listview" ScrollViewer.HorizontalScrollBarVisibility="Visible"  ScrollViewer.ZoomMode="Enabled"
                  ItemsSource="{Binding YourCollection}" DoubleTapped="listview_DoubleTapped" Tapped="listview_Tapped"  SelectionChanged="listview_SelectionChanged"    
                  GotFocus ="StackPanel_GotFocus" IsItemClickEnabled="True" ItemClick="ListView_ItemClick" 
                  Margin="162,539,-103,11" Style="{StaticResource ListViewStyle1}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Grid.RowSpan="2">

                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" Height="130" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>

                <ListView.ItemTemplate >
                    <DataTemplate>
                        <StackPanel Orientation="Vertical" Height="130" Width="192" >
                        <StackPanel Orientation="Horizontal">
                          <Image Source="{Binding Image}" Height="108" Width="192" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" >
                           <TextBlock Text="{Binding Name}" TextAlignment="Center" Height="22" Width="192" Foreground="White" FontFamily="Assets/GothamLight.ttf#GothamLight"/>
                       </StackPanel>
                       </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

需要将焦点或选择设置到列表视图项的第一项。 listview 包含一个项目数组，其中焦点需要在启动期间定位第一个项目，然后保留最后选择的项目。

【问题讨论】：

标签： c# xaml uwp

【解决方案1】：

这里有多个选项，具体取决于您的编码风格。看起来您正在使用来自我们的事件处理程序的代码并绑定到具有 YourCollection 属性的视图模型类，所以我将给您两个示例。 :)

使用代码隐藏

更新您的 XAML 文件以处理 Loaded 事件并命名您的 ListView：

<Page Loaded="Page_Loaded">
    ...
    <ListView Name="MyListView" ItemsSource="{Binding YourCollection}">
    ...
    </ListView>

然后将以下代码添加到您的 Page_Loaded 处理程序中：

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    if (MyListView.Items.Count > 0)
        MyListView.SelectedIndex = 0;
}

使用视图模型

在您的视图模型中提供一个 SelectedItem 属性（无论您在哪里定义 YourCollection）：

private YourItem_selectedItem = null;
public Dumb SelectedItem
{
    get { return _selectedItem; }
    set { SetProperty<YourItem>(ref _selectedItem, value); }
}

然后将 ListView 绑定到所选项目，就像对 ItemsSource 所做的那样：

<ListView Name="MyListView" ItemsSource="{Binding YourCollection}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">

最后，只需在您加载收藏项后设置您的 SelectedItem。

此方法还具有替换您的 SelectionChanged 和 ItemClick 事件的好处。您将不需要它们，因为在这些情况下控件会默认更改 SelectedItem。

【讨论】：

【解决方案2】：

我找到了另一个解决方案，它不需要 Page_Loaded 处理程序，也不需要 ViewModel 中的属性 SelectedItem。

<ListView Name="yourCollectionListView"
          ItemsSource="{Binding YourCollection}"
          SelectedItem="{Binding RelativeSource={RelativeSource Self}, Path=ItemSource[0]}"/>

当然，您应该确保列表至少包含一项。使用 VisualState.StateTriggers，您可以在 ListView 为空时隐藏它。

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup>
    <VisualState.StateTriggers>
      <StateTrigger IsActive="{Binding YourCollection.Count, Converter={StaticResource EqualToParam}, ConverterParameter={StaticResource Zero}}"/>
    </VisualState.StateTriggers>
    <VisualState.Setters>
      <Setter Target="yourCollectionListView.Visibility" Value="Collapsed" />
    </VisualState.Setters>
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

在页面资源中定义零值：

<x:Int32 x:Key="Zero">0</x:Int32>

编辑

甚至可以通过将以下内容绑定到 SelectedItem 属性来实现：

SelectedItem="{Binding Path=[0]}"

【讨论】：