Programmatically create a GridView with full screen items

Question

I need to create a horizontal list view for a Windows Store application with full screen image items, something like the Gallery control for Android. To do this, I've used a GridView and changed the ItemsPanel template to be a VirtualizingStackPanel with horizontal orientation. The problem is that I cannot make the Image items to be full screen. What I've tried is to make the GridView.ItemContainerStyle to bind to the GridView's width, like this:

Binding widthBinding = new Binding() { Source=iconsHolder, Path = new PropertyPath("Width"), Converter = new TestItemWidthConverter()};

Style itemStyle  = new Style();
itemStyle.TargetType = typeof(GridViewItem);
itemStyle.Setters.Add(new Setter(GridViewItem.WidthProperty, widthBinding));// 800));

iconsHolder.ItemContainerStyle = itemStyle;

When I replace the widthBinding with 800, for example, the icons have the specified width, but when I use the binding, no items are visible, so the Style do its job, but the Binding has a problem. In order to debug this, I've created a fake converter, so I can see if the binding works, but the Convert(..) method isn't called at all.

My GridView is created like this:

GridView iconsHolder = new GridView();
iconsHolder.ItemsPanel = App.Current.Resources["HorizontalVSPTemplate"] as ItemsPanelTemplate;
iconsHolder.ItemTemplate = App.Current.Resources["MyDataTemplate"] as DataTemplate;
iconsHolder.Width = Window.Current.Bounds.Width;
iconsHolder.Height = Window.Current.Bounds.Height;

and my resources are defined like:

<ItemsPanelTemplate x:Key="HorizontalVSPTemplate">
   <VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
<DataTemplate x:Key="MyDataTemplate">
   <Image Source="some irrelevant url here"/>
</DataTemplate>

My converter looks like this:

public sealed class TestItemWidthConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, string language)
   {
      Debug.WriteLine(" binding width=" + value);
      return value;
   }

   public object ConvertBack(object value, Type targetType, object parameter, string language)
   { return value; }
}

I don't know how to achieve this (I've also tried using RelativeBinding or make Icons to be horizontally stretched, without success) or what I'm doing wrong, so please help! Thank you for your time!

Answer 1

I've figure it out that I was on the wrong path, the right way to do it was to use FlipView, just as simple as

FlipView iconsHolder = new FlipView();
iconsHolder.ItemsSource =  myItems;
iconsHolder.ItemTemplate = App.Current.Resources["MyDataTemplate"] as DataTemplate;

Now my icons are full screen by default and the scroll effect is paged. Some useful details about this control can be found here: Quickstart: Adding FlipView controls .