在UWP中的ListView中单击网格项时如何获取ID

Question

I am developing a Universal windows app,

I am consuming service to get list of the companies details, and i am binding those list of companies to list view.

But now when click on each company i want id of that that company to call another service based on that company id.

following is my xaml view

  <ListView BorderBrush="#DCDCDC" Background="#DCDCDC" Grid.Row="1" x:Name="listBoxobj" HorizontalAlignment="Stretch">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Border BorderThickness="1">
                            <StackPanel Orientation="Vertical">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <TextBlock Text="{Binding name}" TextWrapping="Wrap" FontSize="15" FontWeight="Bold" />
                                </Grid>
                                <StackPanel BorderBrush="White" Background="White">
                                    <TextBlock Text="Current Status" TextWrapping="Wrap" FontSize="15"/>
                                    <Grid >
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Grid Grid.Row="0" Grid.Column="0" BorderBrush="#DCDCDC" BorderThickness="1" >
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="*"/>
                                            </Grid.RowDefinitions>
                                            <StackPanel Grid.Row="0">
                                                <Image x:Name="tone" Tapped="tone_Tapped" Source="../Icons/tower-signal-interface-symbol.png" Height="40" HorizontalAlignment="Center"></Image>
                                            </StackPanel>
                                            <StackPanel Grid.Row="1">
                                                <TextBlock Text="Tone Alert" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" FontSize="15"/>
                                            </StackPanel>
                                        </Grid>


                                    </Grid>
                                </StackPanel>
                            </StackPanel>
                        </Border>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>

Thanks, Srinivas.

Answer 1

ListView has SelectedItem property - bind it to your ViewModel as SelectedCompany. Then, when it changes, call you API with SelectedCompany.Id.

You can do it in a few ways.

In SelectedCompany setter launch async request.

Use ReactiveUI and in your VM constructor:

this.WhenAnyValue(x => x.SelectedCompany).Where(x => x != null).Select(x => x.Id).InvokeCommand(GetCompanyDetails);

It will use SelectedCompany Id as command parameter.

EDIT:

After you showed your code, I need to change my answer. In your case you can just put your image inside a button a bind command with parameter:

<Button Grid.Row="0" Command="{Binding ViewModel.GetCompanyDetails}" CommandParameter={Binding Id}">
                                                <Image x:Name="tone" Tapped="tone_Tapped" Source="../Icons/tower-signal-interface-symbol.png" Height="40" HorizontalAlignment="Center"></Image>
                                            </Button>

In XAML, when you use ListView and DataTemplate, each item of ItemsSource is set as DataContext for DataTemplate in each row.

The other way is to set Tag for button and retrieve it in your click event handler.

XAML: <Button Grid.Row="0" Click="GetCompanyDetails" Tag={Binding Id}"> <Image x:Name="tone" Tapped="tone_Tapped" Source="../Icons/tower-signal-interface-symbol.png" Height="40" HorizontalAlignment="Center"></Image> </Button>

and in code-behind:

public void GetCompanyDetails(object sender, RoutedEventArgs e)
{
var id = (sender as Button).Tag as int;
}