How to display variable width gridview elements in window 8?

Question

My GridView elements measuring first item size . How can I change this behavior?

How to display GridView items with Width variable according to content?

I want to show the first, but I get the second.
Are there any suggestions for this?

Answer 1

Here is my solution.

// view of the grid with a variable size

 public class VariableSizedGridView : GridView { protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item) { try { dynamic gridItem = item; var typeItem = item as CommonType; if (typeItem != null) { var heightPecentage = (300.0 / typeItem.WbmImage.PixelHeight); var itemWidth = typeItem.WbmImage.PixelWidth * heightPecentage; var columnSpan = Convert.ToInt32(itemWidth / 10.0); if (gridItem != null) { element.SetValue(VariableSizedWrapGrid.ItemWidthProperty, itemWidth); element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, columnSpan); element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 1); } } } catch { element.SetValue(VariableSizedWrapGrid.ItemWidthProperty, 100); element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 1); element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 1); } finally { base.PrepareContainerForItemOverride(element, item); } } 

// Collection View Source

  <CollectionViewSource x:Name="collectionViewSource" Source="{Binding ImageList,Mode=TwoWay}" IsSourceGrouped="False" ItemsPath="Items" /> 

// variable size xaml view grid

  <controls:VariableSizedGridView x:Name="ImageGridView" AutomationProperties.AutomationId="ImageGridView" ItemsSource="{Binding Source={StaticResource collectionViewSource}}" IsItemClickEnabled="True" TabIndex="1" > <controls:VariableSizedGridView.ItemTemplate> <DataTemplate> <Grid Height="300" > <Image Stretch="Uniform" Source="{Binding WbmImage}" /> </Grid> </DataTemplate> </controls:VariableSizedGridView.ItemTemplate> <controls:VariableSizedGridView.ItemsPanel> <ItemsPanelTemplate> <VariableSizedWrapGrid ItemWidth="10" ItemHeight="300" Orientation="Vertical"/> </ItemsPanelTemplate> </controls:VariableSizedGridView.ItemsPanel> </controls:VariableSizedGridView> 

Answer 2

Check Windows 8 GridView and Variable Elements and Different Tile Sizes Elements in WinRT GridView , and also check the Resized Grid Pattern
Hope for this help

Answer 3

You can create this kind of GridView by setting the ItemsPanel in the WrapPanel , you can get the WrapPanel on Jerry Nixon's blog . Here is the code.

Xaml

 <GridView x:Name="gv"> <GridView.ItemsPanel> <ItemsPanelTemplate> <local:WrapPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.ItemTemplate> <DataTemplate> <Grid Height="140" Width="{Binding MyWidth}"> <Grid.Background> <SolidColorBrush Color="{Binding MyColor}" /> </Grid.Background> <TextBlock FontSize="20" VerticalAlignment="Bottom" Margin="10,0,0,10"> <Run Text="{Binding MyWidth}" /> </TextBlock> </Grid> </DataTemplate> </GridView.ItemTemplate> </GridView> 

WITH#

 protected override void OnNavigatedTo(NavigationEventArgs e) { var list = new List<ViewModel>() { new ViewModel(110, Colors.LawnGreen), new ViewModel(50, Colors.DarkBlue), new ViewModel(130, Colors.Firebrick), new ViewModel(60, Colors.RosyBrown), new ViewModel(100, Colors.IndianRed), new ViewModel(210, Colors.BurlyWood), new ViewModel(150, Colors.Turquoise) }; gv.ItemsSource = list; } public class ViewModel { public double MyWidth { get; set; } public Color MyColor { get; set; } public ViewModel(double _MyWidth, Color _MyColor) { MyWidth = _MyWidth; MyColor = _MyColor; } }