Reputation: 159
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
Upvotes: 0
Views: 55
Reputation: 146
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 ...
}
Upvotes: 1