WPF Border element background animation - border

I want to animate the background of a border when the mouse is enters and leaves.
Here is my code
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="#6990EE90" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Transparent" Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
...
<ListBox Height="158" Name="lstStats" Width="Auto" HorizontalAlignment="Stretch" Margin="0" ItemsSource="{Binding ApplicationStatsValues}" Background="Transparent" BorderThickness="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Name="lulu" BorderThickness="1" Opacity="0.8" BorderBrush="LightGreen" CornerRadius="3" Margin="0,0,0,2">
<Border.Background>
<SolidColorBrush />
</Border.Background>
<DockPanel Height="60" Width="284" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<TextBlock DockPanel.Dock="Bottom" Text="{Binding Description}" Height="30" Width="Auto" VerticalAlignment="Center" />
<TextBlock DockPanel.Dock="Left" Text="{Binding Title}" Height="30" Width="220" VerticalAlignment="Center" />
<TextBlock DockPanel.Dock="Right" Text="{Binding Value}" Height="30" Width="80" VerticalAlignment="Center" />
</DockPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem is that i always get this error :
'Background' property does not point to a DependencyObject in path '(Background).(0)'.
This works perfectly with <Style Targetype="ListBoxItem"> but I don't want the background of the list item to change, it looks ugly. I want the border background to change because of the round border.
So the question is : how those DependencyObject works and how can i determine which one is the correct one for a given object, and can anyone make this works ?
Thanks for your help !

I finally found a solution to make it work by putting the triggers inside the ItemTemplate itself.
Any explanation why it cannot work by targetting the type with an external style would be very welcome.
<ListBox Height="158" Name="lstStats" Width="Auto" HorizontalAlignment="Stretch" Margin="0" ItemsSource="{Binding ApplicationStatsValues}" Background="Transparent" BorderThickness="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" Opacity="0.8" BorderBrush="LightGreen" CornerRadius="3" Margin="0,0,0,2">
<Border.Background>
<SolidColorBrush />
</Border.Background>
<Border.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#6990EE90" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent" Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Border.Triggers>
<DockPanel Height="60" Width="284" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<TextBlock DockPanel.Dock="Bottom" Text="{Binding Description}" Height="30" Width="Auto" VerticalAlignment="Center" />
<TextBlock DockPanel.Dock="Left" Text="{Binding Title}" Height="30" Width="220" VerticalAlignment="Center" />
<TextBlock DockPanel.Dock="Right" Text="{Binding Value}" Height="30" Width="80" VerticalAlignment="Center" />
</DockPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Related

Avalonia invalidCastException

We're trying to built a UI with Avalonia for a project. One of our VM's needs to use MultiBinding, but it throws this message: "System.InvalidCastException: 'Unable to cast object of type 'Avalonia.Data.MultiBinding' to type 'Avalonia.Controls.IControl'.'". How do I come around this message?
<Grid ColumnDefinitions="Auto, Auto">
<StackPanel Grid.Column="0">
<Border Classes="Left">
<ScrollViewer MaxHeight="400">
<ItemsControl Items="{Binding PublicationTypes}" Name="PubType">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="*,Auto,Auto">
<TextBox Text="{Binding Name}" Grid.Column="0" Name="PubName" />
<MultiBinding>
<Binding ElementName="MainView"/>
<Binding Path="Name"/>
</MultiBinding>
<Button Grid.Column="1" Classes="Options" Command="{Binding ElementName=MainView, Path=DataContext.EditPublicationType}" CommandParameter="{Binding ElementName=MainView, Path=DataContext.PublicationTypes}">
<!-- CommandParameter="{Binding ElementName=MainView}-->
<Image Source="avares://Zenref.Ava/Assets/options.ico" />
</Button>
<Button Grid.Column="2" Classes="Cross" Command="{Binding ElementName=MainView, Path=DataContext.DeletePublicationTypeCommand}" CommandParameter="{Binding Name}">
<Image Source="avares://Zenref.Ava/Assets/cross.ico" />
</Button>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Border>
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="50" Margin="20" VerticalAlignment="Top">
<Border Width="250" Height="300" Padding="10">
<StackPanel Orientation="Vertical" Spacing="3">
<StackPanel Orientation="Horizontal" Spacing="10">
<TextBlock Text="Referencer importeret" Width="125"/>
<TextBlock Text=":"/>
<TextBlock Text="60000"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="10">
<TextBlock Text="Identificeret" Width="125"/>
<TextBlock Text=":"/>
<TextBlock Text="0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="10">
<TextBlock Text="Uidentificeret" Width="125"/>
<TextBlock Text=":"/>
<TextBlock Text="0"/>
</StackPanel>
</StackPanel>
</Border>
</StackPanel>
<Button Name="menuButton" Command="{Binding OpenSearchCriteriaCommand}" CommandParameter="{Binding ElementName=MainView}" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="100" Margin="10">Menu</Button>
<Button Name="startButton" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="100" Margin="125,10">Start</Button>
<Button Name="exportButton" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="100" Margin="10,10">Exporter</Button>
</Grid>
We've tried looking through Avalonia's documentation and through stackoverflow, but we haven't found a similar problem.

Vertical alignment is not working -Windows Phone 8.1

Below is my XAML part of windows Phone 8.1.
<Grid Background="#FAE8C9">
<ListView x:Name="articleListing">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,5,5">
<StackPanel Background="#FFFEDC" RequestedTheme="Light" Tapped="RedirectToArticle" Tag="{Binding URL}" >
<StackPanel Orientation="Horizontal" >
<StackPanel Margin="10 0 0 0" Width="{Binding Width}">
<StackPanel VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="{Binding HeadLine}" FontSize="22"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="/Images/cal.png" Width="20" />
<TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
<Image Source="/Images/clock.png" Width="20"/>
<TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
</StackPanel>
</StackPanel>
<StackPanel Background="Transparent" Width="{Binding Width}" >
<Image Source="{Binding ImageURL}" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
In this, I have tried to make the below part as vertical alignment to the bottom. But it doesn't work.
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="/Images/cal.png" Width="20" />
<TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
<Image Source="/Images/clock.png" Width="20"/>
<TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
</StackPanel>
</StackPanel>
Please help me to solve this issue. Thank you
Most XAML containers like list views and stack panels fill from top to bottom and their height is equal to the sum of the heights of their contents.
If you've got something you want to appear at the bottom of the container you have the following choices:
Use a canvas of the desired dimensions and explicitly place each element on the canvas. This loses you a big benefit of XAML - namely that it reacts to changes in the available space and repositions elements for you.
Insert some padding into your layout to force elements to be in the place you want them to be. Again you might lose the ability to change view size etc.
You might find using a Grid rather than a StackPanel gives you a bit more control over placement - but again usually the row heights and column widths are governed by the sizes of the elements contained therein.
Use This code.
<Grid Background="#FAE8C9">
<ListView x:Name="articleListing">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,5,5">
<StackPanel Background="#FFFEDC" RequestedTheme="Light" Tapped="RedirectToArticle" Tag="{Binding URL}" >
<StackPanel Orientation="Horizontal" >
<Grid Margin="10 0 0 0" Width="{Binding Width}">
<StackPanel VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="{Binding HeadLine}" FontSize="22"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Image Source="/Images/cal.png" Width="20" />
<TextBlock Text="{Binding UpdatedAtDate}" FontSize="18" Foreground="#CEBFA5" />
<Image Source="/Images/clock.png" Width="20"/>
<TextBlock Text="{Binding UpdatedAtTime}" FontSize="18" Foreground="#CEBFA5" />
</StackPanel>
</Grid>
<StackPanel Background="Transparent" Width="{Binding Width}" >
<Image Source="{Binding ImageURL}" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
This might be work for you.

wp8.1 listview datatemplate with grid

Hi i have one listview with datatemplate with items
Visibility="Visible" ScrollViewer.VerticalScrollMode="Auto"
Height="{Binding ElementName=stck_main,Path=ActualHeight}"
SelectionChanged="lst_OutletDetails_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Margin" Value="5,0,0,0" />
<!--<Setter Property="Background" Value="Green"/>
<Setter Property="Opacity" Value="0.8"/>
<Setter Property="Height" Value="80"/>-->
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="100" >
<Rectangle Fill="Orange" Width="5"/>
<Grid x:Name="grd_items_outletdetails" Background="{Binding ItemBackground}" Width="{Binding ElementName=lst_OutletDetails,Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{Binding OutletName}" Margin="5,0,0,0" Foreground="White" FontSize="22" Grid.Row="0" />
<TextBlock Text="{Binding LastVisitedDate}" VerticalAlignment="Center" Foreground="White" FontSize="18"
Grid.Row="0" Margin="5,0,40,0" HorizontalAlignment="Right" />
<TextBlock Text="{Binding OutletCode}" Foreground="White" Margin="5,0,0,0" FontSize="18" HorizontalAlignment="Left" Grid.Row="1"/>
<StackPanel Orientation="Horizontal" Margin="5,0,20,0" Grid.Row="1" HorizontalAlignment="Right">
<TextBlock Text="ISM:" Foreground="White" Margin="0,0,0,0" FontSize="18" />
<TextBlock Text="{Binding ISMName}" Foreground="White" Margin="5,0,20,0" FontSize="18" />
</StackPanel>
<TextBlock Text="{Binding Route}" Margin="5,0,0,0" FontSize="18" Grid.Row="2" HorizontalAlignment="Left" Foreground="White" />
<StackPanel Orientation="Horizontal" Margin="5,0,20,0" Grid.Row="2" HorizontalAlignment="Right">
<TextBlock Text="Status:" Foreground="White" Margin="5,0,0,0" FontSize="18" ></TextBlock>
<TextBlock Text="{Binding Status}" Foreground="White" Margin="5,0,20,0" FontSize="18" />
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
i want to change the colors of few items ,,, using mvvm pattern in windows phone 8.1
Put your question (problem) outside the codeblocks, it's hidden now.
What do you exactly want to do? Do you want to change the background color of few elements on your listbox? Describe it more precisely :)
As I can see you bind the ItemBackground property to your Grid Background, so just change the ItemBackground of elements you want in your source collection.

Windows Phone TextBlock aligment

In ListBox with ItemTemplate second TextBlock not align to right.
In design mode second TextBlock align to right
<ListBox >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock
Grid.Column="0" Padding="10" HorizontalAlignment="Left"
Text="{Binding Display}" FontSize="30"
/>
<TextBlock
Grid.Column="1" HorizontalAlignment="Right"
Text="{Binding Length}" FontSize="30"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBoxItem>
<Grid>
<TextBlock
Grid.Column="0" Padding="10" HorizontalAlignment="Left"
Text="2014-01-24 23:00:00" FontSize="30"
/>
<TextBlock
Grid.Column="1" HorizontalAlignment="Right"
Text="00:00" FontSize="30"
/>
</Grid>
</ListBoxItem>
</ListBox>
Result:
Item in designer:
You need to change HorizontalContentAligment to Strech - to fill the space with your item, by default it's set to the left:
<ListBox Name="myList">
<ListBoxItem HorizontalContentAlignment="Stretch">
<Grid>
<TextBlock HorizontalAlignment="Left" Text="2014-01-24 23:00:00" FontSize="30"/>
<TextBlock HorizontalAlignment="Right" Text="00:00" FontSize="30"/>
</Grid>
</ListBoxItem>
</ListBox>
You can also set Property of ItemContainerStyle:
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Padding="10" HorizontalAlignment="Left" Text="{Binding Display}" FontSize="30"/>
<TextBlock HorizontalAlignment="Right" Text="{Binding Length}" FontSize="30"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBoxItem>
<Grid>
<TextBlock Padding="10" HorizontalAlignment="Left" Text="2014-01-24 23:00:00" FontSize="30"/>
<TextBlock Padding="10" HorizontalAlignment="Right" Text="00:00" FontSize="30"/>
</Grid>
</ListBoxItem>
</ListBox>
In case you have only two items, one aligned to left, one to right - I've removed Colums. Although they help to manage the content, align it and they also will be helpful if you need to wrap text and/or perform more operations on it.
This is how you can do it :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0" Padding="10" HorizontalAlignment="Left"
Text="{Binding Display}" FontSize="30"
/>
<TextBlock
Grid.Column="1" HorizontalAlignment="Right"
Text="{Binding Length}" FontSize="30"
/>
</Grid>
This will give 75% width to the first column and remaining 25% to the second column.
If you want the first and second columns to dynamically change width according to the content then you can give one width as "Auto" and the other no width property (or Width="*") which means it will take the remaining area as the column width.
I would take Alexandr Sulimov solution. I made some improvements. I think it is the best way to do it.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Padding="10" Text="{Binding Display}" FontSize="30" />
<TextBlock Grid.Column="1" Text="{Binding Length}" FontSize="30" />
</Grid>

Access inner element of Hub Scection in Windows store app?

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