Win 8 App Get text from datatemplate listview

Question

I'm trying to learn how to make datatemplate in listviews in my win 8 app

I have the following code in my Xaml code

<!-- Vertical scrolling item list -->
    <ListView x:Name="itemListView"
      Margin="0,4.714,10,0.429"
      ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
      SelectionChanged="itemListView_SelectionChanged" Loaded="itemListView_Loaded" Grid.Row="4" Tapped="itemListView_Tapped_1">

        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Height="110" Margin="6">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
                        <Image Source="{Binding Image}" Stretch="UniformToFill"/>
                    </Border>
                    <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                        <TextBlock Text="{Binding Title}"  TextWrapping="NoWrap" FontFamily="Global User Interface"/>
                        <TextBlock Text="{Binding Subtitle}"  TextWrapping="NoWrap"/>
                        <TextBlock Text="{Binding Description}"  MaxHeight="60" FontFamily="Global User Interface"/>
                        <TextBlock Text="{Binding Description2}"  MaxHeight="60" FontFamily="Global User Interface"/>
                        <TextBlock Text="{Binding Description3}"  MaxHeight="60" FontFamily="Global User Interface"/>
                        <TextBlock Text="{Binding Description4}"  MaxHeight="60" FontFamily="Global User Interface"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

This puts 6 Textblocks for each item on the list view

Problem i Have when I select an item in the listview I use the tapped event to then populate the details pane but I cant work out how to get the 6 items from the selected item

Can someone point me in the right direction please

Any help appreciated

Mark

Answer 1

I would set the tapped event to the grid and the go through the xaml path. Something like this:

xaml:

 <ListView x:Name="itemListView"
  Margin="0,4.714,10,0.429"
  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
  SelectionChanged="itemListView_SelectionChanged" Loaded="itemListView_Loaded" Grid.Row="4" >

        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Height="110" Margin="6" Tapped="listViewItem_Tapped">                      
                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
                        <Image Source="{Binding Image}" Stretch="UniformToFill"/>
                    </Border>
                    <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                        <TextBlock Text="{Binding Title}"  TextWrapping="NoWrap" FontFamily="Global User Interface"/>
                        <TextBlock Text="{Binding Subtitle}"  TextWrapping="NoWrap"/>
                        <TextBlock Text="{Binding Description}"  MaxHeight="60" FontFamily="Global User Interface"/>
                        <TextBlock Text="{Binding Description2}"  MaxHeight="60" FontFamily="Global User Interface"/>
                        <TextBlock Text="{Binding Description3}"  MaxHeight="60" FontFamily="Global User Interface"/>
                        <TextBlock Text="{Binding Description4}"  MaxHeight="60" FontFamily="Global User Interface"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

And int the code behind you can do this:

 private async void listViewItem_Tapped(object sender, TappedRoutedEventArgs e)
        {           
              Grid gridElement = (sender as Grid);
               //Get the stackpanel
              Stackpanel stackPanelWithElements = gridElement.Children.ElementAt(1) as Stackpanel;   
               //get the first TextBlock      
              TextBlock titleTextBlock = stackPanelWithElements.Children.ElementAt(0) as TextBlock;

              //Get the text of the textblock
              String title = titleTextBlock.Text;

              //Get the next text
             TextBlock subTitleTextBlock = stackPanelWithElements.Children.ElementAt(1) as TextBlock;
             String subTitle = subTitleTextBlock.Text;

            //get the other elements ...
         }