Access inner element of Hub Scection in Windows store app? - windows-store-apps

Question

How can i set ListView itemSource in C# code behind? Elements inside Hun Sections are not accessible by name.
<Hub x:Name="RootHub" SectionHeaderClick="Hub_SectionHeaderClick">
<Hub.Header>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Style="{StaticResource NavigationBackButtonNormalStyle}"
Margin="0,0,39,0"
VerticalAlignment="Top"
Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
VerticalAlignment="Top" IsHitTestVisible="false" TextWrapping="NoWrap" />
</Grid>
</Hub.Header>
<HubSection Width="500" x:Name="OperationSection" Header="Operation">
<DataTemplate>
<Grid Height="535">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="92" />
<RowDefinition />
</Grid.RowDefinitions>
<SearchBox Margin="0,0,50,394"/>
<Image Source="Images/plus.png" Margin="375,6,4,394"/>
<ListView x:Name="OperationListView" ItemsSource="{Binding Operation}" HorizontalAlignment="Left" Height="453" VerticalAlignment="Top" Width="410" Margin="6,72,0,0" Grid.RowSpan="2">
<!--<ListView.ItemTemplate>
<DataTemplate>
<TextBlock x:Name="DataItem" Text="{Binding opId}" />
</DataTemplate>
</ListView.ItemTemplate>-->
<ListBoxItem>
<StackPanel Orientation="Vertical">
<TextBlock Text="OP : 0001" Width="auto" Height="30" FontSize="20"></TextBlock>
<TextBlock Text="Replace Transformer" Width="auto" Height="30" FontSize="20"></TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Vertical">
<TextBlock Text="OP : 0002" Width="auto" Height="30" FontSize="20"></TextBlock>
<TextBlock Text="Install New Pole" Width="auto" Height="30" FontSize="20"></TextBlock>
</StackPanel>
</ListBoxItem>
<ListViewItem>
<StackPanel Orientation="Vertical">
<TextBlock Text="OP : 0003" Width="auto" Height="30" FontSize="20"></TextBlock>
<TextBlock Text="Check Equipments" Width="auto" Height="30" FontSize="20"></TextBlock>
</StackPanel>
</ListViewItem>
</ListView>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Width="500" x:Name="ComponentSection" Header="Component">
<DataTemplate>
<Grid Height="535">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="92" />
<RowDefinition />
</Grid.RowDefinitions>
<SearchBox Margin="0,0,50,394"/>
<Image Source="Images/plus.png" Margin="375,6,4,394"/>
<ListView x:Name="OperationListView" ItemsSource="{Binding Operation}" HorizontalAlignment="Left" Height="453" VerticalAlignment="Top" Width="410" Margin="6,72,0,0" Grid.RowSpan="2">
<ListBoxItem>
<StackPanel Orientation="Vertical">
<TextBlock Text="COM : 0001" Width="auto" Height="30" FontSize="20"/>
<TextBlock Text="Transformer" Width="auto" Height="30" FontSize="20"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Vertical">
<TextBlock Text="COM : 0002" Width="auto" Height="30" FontSize="20"/>
<TextBlock Text="Pole" Width="auto" Height="30" FontSize="20"/>
</StackPanel>
</ListBoxItem>
<ListViewItem>
<StackPanel Orientation="Vertical">
<TextBlock Text="COM : 0003" Width="auto" Height="30" FontSize="20"/>
<TextBlock Text="Grid" Width="auto" Height="30" FontSize="20"/>
</StackPanel>
</ListViewItem>
</ListView>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Width="500" x:Name="EquipmentSection" Header="Equipment">
<DataTemplate>
<Grid Height="535">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="92" />
<RowDefinition />
</Grid.RowDefinitions>
<SearchBox Margin="0,0,50,394"/>
<Image Source="Images/plus.png" Margin="375,6,4,394"/>
<ListView x:Name="OperationListView" ItemsSource="{Binding Operation}" HorizontalAlignment="Left" Height="453" VerticalAlignment="Top" Width="410" Margin="6,72,0,0" Grid.RowSpan="2">
<ListBoxItem>
<StackPanel Orientation="Vertical">
<TextBlock Text="EQ : 0001" Width="auto" Height="30" FontSize="20"/>
<TextBlock Text="Transformer" Width="auto" Height="30" FontSize="20"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Vertical">
<TextBlock Text="EQ : 0002" Width="auto" Height="30" FontSize="20"/>
<TextBlock Text="Pole" Width="auto" Height="30" FontSize="20"/>
</StackPanel>
</ListBoxItem>
<ListViewItem>
<StackPanel Orientation="Vertical">
<TextBlock Text="EQ : 0003" Width="auto" Height="30" FontSize="20"/>
<TextBlock Text="Wire" Width="auto" Height="30" FontSize="20"/>
</StackPanel>
</ListViewItem>
</ListView>
</Grid>
</DataTemplate>
</HubSection>
</Hub>
Here i have hard coded list items in OperationListView. But i want to load items dynamically in C#. How could i solve this?
Thanks in advance.

Answer 1

A couple of problems with the question is that you already have the ListView bound to a property called Operation. Remove the individual ListView items and your data will show up. You'll also need a ListView.ItemTemplate to display the individual items.
Data binding is the way to go here but you're also binding to the same property for all your lists so I assume you want to bind to a different property to each ListView otherwise each HubSection will contain the same items.
If you don't want to use data binding and load the items in the code behind you can use the ListView's Loaded event.
<ListView x:Name="OperationListView" Loaded="OperationsLoaded">
</ListView>
Then in your code behind:
private void OperationsLoaded(object sender, RoutedEventArgs e)
{
var listView = (ListView)sender;
listView.ItemsSource = youritems;
}
Hope that helps.