Custom card listbox like google now - windows-phone

Question

I am searching a way to do a custom listbox for windows phone 7.1 like google now cards. The effect is simple: Two columns. Next card will be as top as possible.
If column 1 is 100px high and column 2 is 170 px then the next card will be in column 1.
I tried WrapPanel but it aligns the top of each row. So the option is to build a custom listbox (or get one already done). Obviusly, I cant make an 'infinite' view and adding views to it, but I guess that will no be very efficient.
Thank you!

Answer 1

I will add another answer since the code has changed:
public class ViewModel : INotifyPropertyChanged
{
private Random rnd = new Random(DateTime.Now.Millisecond);
public ViewModel()
{
Items = new List<DataItem>()
{
new DataItem()
{
Title = "Title 1",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Green),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 2",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Blue),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 3",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Purple),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 4",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Brown),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 5",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Gray),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 6",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Green),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 7",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Brown),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 8",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Magenta),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 9",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Orange),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 10",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Purple),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 11",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Brown),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
new DataItem()
{
Title = "Title 12",
Height = rnd.Next(100, 250),
Color = new SolidColorBrush(Colors.Red),
Content =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."
},
};
}
public List<DataItem> Items
{
set
{
int List1Height = 0;
int List2Height = 1; // set to 1 so first item will end up in List1
Items1 = new List<DataItem>();
Items2 = new List<DataItem>();
foreach (DataItem dataItem in value)
{
if (List1Height < List2Height)
{
Items1.Add(dataItem);
List1Height += dataItem.Height;
}
else
{
Items2.Add(dataItem);
List2Height += dataItem.Height;
}
}
}
}
private List<DataItem> _items1;
public List<DataItem> Items1
{
get { return _items1; }
set
{
_items1 = value;
OnPropertyChanged("Items1");
}
}
private List<DataItem> _items2;
public List<DataItem> Items2
{
get { return _items2; }
set
{
_items2 = value;
OnPropertyChanged("Items2");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
public class DataItem
{
public string Title { get; set; }
public int Height { get; set; }
public SolidColorBrush Color { get; set; }
public string Content { get; set; }
}
The most significant change is adding a property called "Items". When this property is set, the items are added to one of two lists, depending on which one is shorter at the moment the item is added. There is no getter since we are not binding to this property.
I also added some color and random height for testing purposes, cleaned up the XAML a bit to make the contents clearer as well as added INotifyPropertyChanged support so when the Items property is set and it adds the items to the 2 lists, the UI will update automatically.
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer Margin="10">
<StackPanel Orientation="Horizontal" >
<StackPanel Orientation="Vertical" Width="210">
<ItemsControl ItemsSource="{Binding Items1}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="{Binding Height}" Margin="5" Background="{Binding Color}" >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0" Style="{StaticResource PhoneTextLargeStyle}"/>
<TextBlock Text="{Binding Content}" Grid.Row="1" TextWrapping="Wrap" Margin="5"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl >
</StackPanel>
<StackPanel Orientation="Vertical" Width="210">
<ItemsControl ItemsSource="{Binding Items2}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="{Binding Height}" Margin="5" Background="{Binding Color}" >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0" Style="{StaticResource PhoneTextLargeStyle}"/>
<TextBlock Text="{Binding Content}" Grid.Row="1" TextWrapping="Wrap" Margin="5"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Grid>
Notice items 3-6 and how 4 and 5 are stacked together in the same column.
I realize my answer does not meet your need for a single automatic way of flowing the items into one of 2 columns. it does, however, appear to satisfy the desired result: a 2 column scrolling list where the items flow into the shortest column.
The next step for you, if you really do need it as a control, is to make it into either a UserControl, or a CustomControl. Which one depends on your skill and the amount of work you are willing to put into it.
A good comparison of the 2 can be found here: http://www.geekchamp.com/articles/user-control-vs-custom-control-in-silverlight-for-wp7

Answer 2

Here is an example using data binding to a viewmodel. It uses ItemsPanel to stack the items in the Horizontal StackPanel:
Code Behind:
using System.Collections.Generic;
using Microsoft.Phone.Controls;
namespace PhoneApp1
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
public ViewModel ViewModel { get; set; }
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
ViewModel = new ViewModel();
DataContext = ViewModel;
}
}
public class ViewModel
{
public ViewModel()
{
Items1 = new List<DataItem>()
{
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
};
Items2 = new List<DataItem>()
{
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
new DataItem(){Title = "Title", Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non bibendum nisi. Aenean eu elementum massa. Praesent vel urna id neque tristique maximus."},
};
}
public List<DataItem> Items1 { get; set; }
public List<DataItem> Items2 { get; set; }
}
public class DataItem
{
public string Title { get; set; }
public string Content { get; set; }
}
}
AND the actual XAML:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer Margin="10">
<StackPanel Orientation="Horizontal" >
<StackPanel Orientation="Vertical" Width="210">
<ItemsControl ItemsSource="{Binding Items1}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="333" Margin="5" Background="Red" >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0"/>
<TextBlock Text="{Binding Content}" Grid.Row="1" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl >
</StackPanel>
<StackPanel Orientation="Vertical" Width="210">
<ItemsControl ItemsSource="{Binding Items2}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Height="200" Margin="5" Background="Blue" >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0"/>
<TextBlock Text="{Binding Content}" Grid.Row="1" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Grid>

Answer 3

You should use a ScrollViewer with some StackPanels inside:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer Margin="10">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical" Width="210">
<Grid Height="200" Margin="5" Background="Blue" />
<Grid Height="200" Margin="5" Background="Blue" />
<Grid Height="200" Margin="5" Background="Blue" />
<Grid Height="200" Margin="5" Background="Blue" />
<Grid Height="200" Margin="5" Background="Blue" />
</StackPanel>
<StackPanel Orientation="Vertical" Width="210">
<Grid Height="300" Margin="5" Background="Blue" />
<Grid Height="300" Margin="5" Background="Blue" />
<Grid Height="300" Margin="5" Background="Blue" />
<Grid Height="300" Margin="5" Background="Blue" />
</StackPanel>
</StackPanel>
</ScrollViewer>
</Grid>
You would likely put something inside the inner stack panels (instead of the Grids I used as a sample) to allow you to bind data items to a template, but the listed ScrollViewer/StackPanel solution will get you started in the right direction.