CODEWITHSUNDEEP
c#xamluwp
user218404
user218404

Reputation:

xaml UWP set focus/selection to first listview item

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

Need to set the focus or selection to first item of the listview items. The listview contains an array of items, where the focus needs to be targeting first item during start and then retain the last chosen item.

Upvotes: 3

Views: 2845

Answers (2)

Chris
Chris

Reputation: 2351

I found a further solution that does not require the Page_Loaded handler nor the property SelectedItem in the ViewModel.

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

Of course you should ensure the list has at least one item. With VisualState.StateTriggers you can hide the ListView if it is empty.

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

Define the zero value in the page's resources:

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

EDIT

It is even possible to achieve this by binding the following to the SelectedItem property:

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

Upvotes: 0

Pedro Silva
Pedro Silva

Reputation: 717

There are multiple options here depending on your coding style. It looks like you're using code behind from our event handlers and binding to a view model class with YourCollection property, so I'll give you both examples. :)

Using code-behind

Update your XAML file to handle the Loaded event and name your ListView:

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

Then add the following code your Page_Loaded handler:

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

Using view model

Provide a SelectedItem property in your view model (wherever you are defining YourCollection):

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

Then bind your ListView to the selected item, as you did with your ItemsSource:

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

Finally, just set your SelectedItem after you've loaded your collection items.

This method also has the benefit of replacing your SelectionChanged and ItemClick events. You won't need them because the control changes SelectedItem by default in those situations.

Upvotes: 2

Related Questions