I want to show a listbox with two items for each row.
You can see an example here.
I have the following XAML:
<Grid x:Name="FriendsGrid">
<ListBox x:Name="FriendsList" Margin="0" ItemTemplate="{StaticResource FriendsDataTemplate}"/>
</Grid>
<DataTemplate x:Key="FriendsDataTemplate">
<Grid VerticalAlignment="Top" HorizontalAlignment="Right" Background="{StaticResource PhoneAccentBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="183"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image x:Name="FriendAvatar" Margin="1,1,11,11" Source="{Binding ImageURL}" Width="173" Height="173"/>
<Grid Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top">
<TextBlock x:Name="FriendName" Margin="0" Text="{Binding FriendName}" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,10,0" TextAlignment="Right"/>
</Grid>
</Grid>
</DataTemplate>
But I see one ListBoxItem for each row.
How can I do that?
Can you not just use a WrapPanel as the ItemContainerStyle?
Related
I have a GridView that displays Header and Sub-Items like so:
<GridView ItemsSource="{Binding Path=MainViewModels}">
<GridView.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border BorderBrush="White" BorderThickness="1"></Border>
<Grid VerticalAlignment="Top" HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="White" BorderThickness="1"></Border>
<TextBlock Grid.Row="0"
HorizontalAlignment="Left"
Foreground="#FFAAAAAA"
Style="{StaticResource Style_TextBlock_Label_H3}"
Text="{Binding Path=Description}" VerticalAlignment="Top" />
<GridView Grid.Row="1"
ItemsSource="{Binding Path=SubViewModels}">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Margin="0,0,5,0"
Text="{Binding Path=Description}"
TextWrapping="Wrap" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top">
</StackPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
However, whenever it renders, it renders like this:
What I want to achieve is that all the "Header" are on the top, while the Items themselves extend to the bottom and then just overflow using the WrapGrid.
Can please point out where I am going wrong?
Thank you!
I am trying to get some design data in blend expressions for my wp7 app but after a certain point it seems to just lose the data and shows me nothing
As you can see I see nothing in the rectangle error even though there is a hardcoded value in it.
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentGrid"
Grid.Row="1">
<ListBox x:Name="lbMovieCollection" ItemsSource="{Binding MovieCollections}">
<ListBox.Resources>
<DataTemplate x:Key="lbMovieCollectionItemTemplate">
<toolkit:ExpanderView x:Name="expMovieCollection" ItemsSource="{Binding Movies}" Header="{Binding Mode=OneWay}" Width="480">
<toolkit:ExpanderView.Resources>
<DataTemplate x:Key="expMovieCollectionHeaderTemplate">
<TextBlock TextWrapping="Wrap" Text="{Binding Name}" Height="50"/>
</DataTemplate>
<DataTemplate x:Key="expMovieCollectionItemTemplate">
<ListBoxItem HorizontalAlignment="Left" toolkit:TiltEffect.IsTiltEnabled="True" d:LayoutOverrides="VerticalAlignment">
<StackPanel Height="61" Width="371" >
<TextBlock TextWrapping="Wrap" Text="THIS IS HARCDOED" FontSize="29.333" />
</StackPanel>
</ListBoxItem>
</DataTemplate>
</toolkit:ExpanderView.Resources>
<toolkit:ExpanderView.ItemTemplate>
<StaticResource ResourceKey="expMovieCollectionItemTemplate"/>
</toolkit:ExpanderView.ItemTemplate>
<toolkit:ExpanderView.HeaderTemplate>
<StaticResource ResourceKey="expMovieCollectionHeaderTemplate"/>
</toolkit:ExpanderView.HeaderTemplate>
</toolkit:ExpanderView>
</DataTemplate>
</ListBox.Resources>
<ListBox.ItemTemplate>
<StaticResource ResourceKey="lbMovieCollectionItemTemplate"/>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
Looks like your "THIS IS HARCDOED" values are hidden inside the collapsed portion of toolkit:ExpanderView control.
I have a list in row 2 of 3 in a grid. The grid is defined as following:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
My ListBox:
<ListBox Foreground="Black" x:Name="MainListBox" Margin="0,0,0,0" ItemsSource="{Binding Items}" HorizontalAlignment="Center">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<TextBlock Foreground="Black" Text="{Binding Placement}" Style="{StaticResource PhoneTextExtraLargeStyle}" Width="45" />
<TextBlock Foreground="Black" Text="{Binding Username}" Style="{StaticResource PhoneTextExtraLargeStyle}" Width="160"/>
<TextBlock Foreground="Black" Text="{Binding Score}" Style="{StaticResource PhoneTextExtraLargeStyle}" Width="160" TextAlignment="Right" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In the first row I have the title, and in the last I have a ad (taking 100px). Listbox gets populated in a WebClient DownloadComplete.
Currently my list holds 10 items, but I can only slide down to number 5,4 (I see the top of row 6).
Height is not defined in my listbox
you must set height of listbox. then it can scroll to every item
I have a ItemTemplate like this
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Button Grid.Row="0">
<Button.Template>
<ControlTemplate>
<Border BorderBrush="AntiqueWhite" BorderThickness="1">
<StackPanel Orientation="Horizontal" Background="Gray" Width="465">
<Image Margin="2,0,10,0" Source="{Binding StateImage}" Stretch="None"/>
<TextBlock Name="txt" Text="{Binding DateLabel}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
<Custom:Interaction.Triggers>
<Custom:EventTrigger EventName="Click">
<mx:EventToCommand Command="{Binding VisibilityListboxCommand}"
CommandParameter="{Binding EementName=txt, Path=Text}"
/>
</Custom:EventTrigger>
</Custom:Interaction.Triggers>
</Button>
<ListBox Grid.Column="1" ItemsSource="{Binding WhatsonList, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="0,0,0,1" Padding="0,0,0,10">
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="360"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Button>
.....
</Button>
<CheckBox Template="{StaticResource CheckboxImageTemplate}" Margin="0,5,0,0"/>
</StackPanel>
<ListBox Grid.Column="1">
.....
</ListBox>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
When I click on button inside listboxitem datatemplate I want to get content of textblock txt to find out what listbox item was clicked to trace back index in the List(model) that listbox bind from.
But from commandparameter I cannot get anything because there are many textblock named txt I think.
Please help me !
A better way to solve this is by binding the CommandParameter to 'thing' in the DataContext of the item like this:
<Custom:Interaction.Triggers>
<Custom:EventTrigger EventName="Click">
<mx:EventToCommand Command="{Binding VisibilityListboxCommand}"
CommandParameter="{Binding}" />
</Custom:EventTrigger>
</Custom:Interaction.Triggers>
This way the binding does not rely on a particular control being present and having a specific name.
I have the following XAML code:
<DataTemplate x:Key="FriendsDataTemplate">
<toolkit:WrapPanel Orientation="Horizontal" ItemWidth="173" ItemHeight="233">
<Grid VerticalAlignment="Top" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="183"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image x:Name="FriendAvatar" Margin="1,1,11,11" Source="{Binding ImageURL}" Width="173" Height="173"/>
<Grid Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top">
<TextBlock x:Name="FriendName" Margin="0" Text="{Binding FriendName}" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,10,0" TextAlignment="Right"/>
</Grid>
</Grid>
</toolkit:WrapPanel>
</DataTemplate>
<Grid x:Name="FriendsGrid">
<ListBox x:Name="FriendsList" Margin="0" ItemTemplate="{StaticResource FriendsDataTemplate}"/>
</Grid>
FriendsList width is 420px.
My problem is: I want two items column, but I see one.
Any advice?
I've found the solution. Here is my working XAML code:
<DataTemplate x:Key="FriendsDataTemplate">
<Grid VerticalAlignment="Top" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="183"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image x:Name="FriendAvatar" Margin="1,1,11,11" Source="{Binding ImageURL}" Width="173" Height="173"/>
<Grid Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top">
<TextBlock x:Name="FriendName" Margin="0" Text="{Binding FriendName}" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,10,0" TextAlignment="Right"/>
</Grid>
</Grid>
</DataTemplate>
<Grid x:Name="FriendsGrid">
<ListBox x:Name="FriendsList" Margin="0" ItemTemplate="{StaticResource FriendsDataTemplate}" Width="420">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemWidth="173" ItemHeight="233"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
I've added a ListBox.ItemsPanel inside ListBox definition. And I've moved wrap panel on it.