Develop Reference

How to get a ListBox ItemTemplate to stretch horizontally the full width of the ListBox in Windows 10 universal?

I want to have the ListItems to extend with their Stackpanel the full width of the Listbox.
Currently they are only as wide as the textblocks.
What do I have to do so that the Stackpanel of the ListBoxItems fill the width of the ListBox?
<ListBox Name="feedListBox" VerticalAlignment="Top" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionMode="Single" SelectionChanged="feedListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe UI Symbol" Text="⛽" FontSize="25"/>
<StackPanel Orientation="Vertical">
<TextBlock Name="txtDate" Text="{Binding Date}" FontSize="15" Margin="20,0,0,0"/>
<TextBlock Name="txtDitance" Text="{Binding Distance}" FontSize="15" Margin="20,5,0,0"/>
</StackPanel>
<TextBlock Name="txtPrice" Text="{Binding Price}" FontSize="15" Margin="30,0,0,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

delete: VerticalAlignment="Top"
and use: HorizontalContentAlignment="Stretch"

How todo nested Databinding with Windows Phone (Pivot and ListBox)

I am pretty new in the usage of the DataBinding concept in Windows Phone. I am trying to bind a Pivot page with a list of items, as well as a ListBox in each PivotItem with another list (of criterias). I have a Page with the following XAML:
<phone:Pivot Name="ItemsPivot" Title="MY APPLICATION">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel Margin="12,17,0,28">
<ListBox Name="CriteriasListBox" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<TextBlock Text="{Binding Name}"/>
<tk:Rating />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
I then try to specify the ItemSource of each binded control in the C# code like this:
...
ItemsPivot.ItemsSource = ItemList;
CriteriasListBox.ItemsSource = CriteriaList; // <-- CriteriasListBox not accessible !!
...
But there is an error stating that "the name 'CriteriasListBox' does not exist in the current context"... As I mention, I am pretty new with this technology.
Can I have some advice, solution or resources on how do make this nested binding work?
Thank you !

Do like this,
<UserControl.Resources>
<DataTemplate x:Key="MyPivotItemTemplate">
<controls:PivotItem Header="first" >
<ListBox x:Name="CriteriasListBox" Margin="0,0,12,0" ItemsSource="{Binding CriteriaList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>
</DataTemplate>
</UserControl.Resources>
Then in your pivot
<Pivot ItemsTemplate="{StaticResource MyPivotItemTemplate}" Items="{Binding ItemList}"

One of the ways if you have different criteria list for different items is to add criteria list property to your PivotItemViewModel. Your c# code will look like this
ItemsPivot.ItemsSource = ItemList;
where every item in ItemList contains CriteriaList. Your xaml code will look like
<phone:Pivot Name="ItemsPivot" Title="MY APPLICATION">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel Margin="12,17,0,28">
<TextBlock Name="PivotTextBlock" Text="{Binding Name}"/>
<ListBox ItemsSource="{Binding Criterions}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<TextBlock Name="ListTextBlock" Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
Binding for PivotTextBlock retrieves Name property from the PivotItemViewModel. Binding for ListTextBlock retrieves Name property from Criteria.
If criteria list the only in your application here is a good start

Here is another good way I found...
http://www.codeproject.com/Articles/47229/A-LINQ-Tutorial-WPF-Data-Binding-with-LINQ-to-SQL
Here is a code snippet:
<DataTemplate DataType="{x:Type LINQDemo:Category}">
<Border Name="border" BorderBrush="ForestGreen"
BorderThickness="1" Padding="5" Margin="5">
<StackPanel>
<TextBlock Text="{Binding Path=Name}"
FontWeight="Bold" FontSize="14"/>
<ListView ItemsSource="{Binding Path=Books}"
HorizontalContentAlignment="Stretch" BorderThickness="0" >
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock>
<Hyperlink Click="LoadIndividualBook"
CommandParameter="{Binding}"
ToolTip="Display book details">
<TextBlock Text="{Binding Path=Title}"/></Hyperlink>
...

Multi-column stackpanel or alternative

I have the following XAML code:
<StackPanel Background="White" Margin="267,207,0,44" Grid.ColumnSpan="2">
<ScrollViewer Margin="30,30,0,30" Height="444">
<ItemsControl Name="ListCountries">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,0" Width="100">
<TextBlock Text="{Binding Key}" Foreground="Red" />
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,10,0,0">
<TextBlock TextWrapping="Wrap" Text="{Binding title}" Foreground="Black" />
<TextBlock TextWrapping="Wrap" Text="{Binding desc}" Foreground="Gray" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
I set the itemSource of the itemsControl named ListCountries, with a IEnumerable> and it prints a list of titles, followed by a list of objects of the OtherClass.
My problem is that , the columns that are filled sometimes are bigger than the height of the Stackpanel that they are inserted to, i want to be able to split my inner list of into columns.
as you can see in the image, Belgium country gets splited into 2 columns
right now all my countries are single column with vertical scroll.

You should use a GridView for this. Here's some code slightly modified from a Grid app in Visual Studio
<GridView
x:Name="itemGridView"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
Height="600">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="200">
<TextBlock Text="{Binding Description}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Here's a screenshot of what this looks like, with sample data

Passing data from selected item to viewmodel in WinRT

I am currently writing an application in WinRT where i need to pass an id from a selected item in a listview back to my viewmodel. My listview has an Observable collection as an itemsource so there will be a different id for each item in the listview.
my Xaml code look similar to this
<ListView Grid.Column="0" ItemsSource="{Binding VacationOverviewDisplay}" >
<WinRtBehaviors:Interaction.Behaviors>
<Win8nl_Behavior:EventToCommandBehavior Event="SelectionChanged"
Command="DetailsCommand"
CommandParameter="{Binding Path=DontKnow, Mode=TwoWay}"/>
</WinRtBehaviors:Interaction.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<StackPanel Orientation="Horizontal">
<TextBlock VerticalAlignment="Center" FontWeight="Bold" FontFamily="Segoe UI" Text="{Binding VacationStart, Converter={StaticResource StringFormatConverter}, ConverterParameter='{}{0:dd MMM yyyy}' }" Margin="20,0,0,0"></TextBlock>
<TextBlock VerticalAlignment="Center" FontWeight="Bold" FontFamily="Segoe UI" Text="{Binding VacationEnd, Converter={StaticResource StringFormatConverter}, ConverterParameter='{}{0:dd MMM yyyy}' }" Margin="20,0,0,0"></TextBlock>
<TextBlock x:Name="id" VerticalAlignment="Center" FontWeight="Bold" FontFamily="Segoe UI" Text="{Binding VacationRequestId}" Margin="20,0,0,0"></TextBlock>
</StackPanel>
<TextBlock Text="{Binding StatusView}" Margin="50,0,0,0"></TextBlock>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Title: " Margin="50,0,0,0"></TextBlock>
<TextBlock FontStyle="Italic" Text="{Binding VacationCommentUser}" Margin="5,0,0,0"></TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am using the WinRTBehaviors to mimic the EventToCommand behavior but i have no idea how i should get a certain parameter from an item in my listview back to my viewmodel. for the Mvvm i am using MvvmLight.

Just create a property in a view model then bind it to SelectedItem in your list view like this:
SelectedItem={Binding MyProperty, Mode=TwoWay}
That's all. Whenever a user changed a value, your property will be updated.

Bind Selected Item To a Property in your ViewModel
<ListView Grid.Column="0" ItemsSource="{Binding VacationOverviewDisplay}" SelectedItem="{Binding SelectedVacation, Mode=TwoWay}">

You should use SelectedValuePath for extracting Id from SelectedItem:
<ListView Grid.Column="0" ItemsSource="{Binding VacationOverviewDisplay}"
SlectedValuePath="Id"
SelectedValue="{Binding SelectedVacationId, Mode=TwoWay}">

CommandParameter="{Binding ElementName=MyListBox, Path=SelectedItem}"
(You'll have to give your ListBox an x:Name value.)

Listbox with more than one Control

Can somebody help me out in creating a listbox with a checkbox and star rating control align horizontally? I want it for WP7 using C# and XAML.

You need to code a custom list here is an example:
You need to include ControlToolkit:
xmlns:ControlsToolkit="clr-namespace:System.Windows.Controls"
and here is code:
<ListBox x:Name="listBox" SelectionMode="Multiple"
ItemContainerStyle="StaticResource ListBoxCheckedStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Checked="{Binding YourPropertyPath}"/>
<TextBlock Text="{Binding Name}" Width="150" VerticalAlignment="Center"/>
<ControlsToolkit:Rating Height="50" Grid.Row="0" x:Name="rating" ItemCount="5">
<ControlsToolkit:Rating.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ControlsToolkit:Rating.ItemsPanel>
</ControlsToolkit:Rating>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can download sample from here:
DownloadSample
or check details here:
Sample site
You can get more detail on these:
CustomDataTemplateSelector
WP7 Checked ListBox in different ways.

Set the ItemTemplate:
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Checked="{Binding YourPropertyPath}"/>
<ns:StarControl/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>