title: Xamarin forms CollectionView with dynamic item dimensions
body: <p>I need to continuously adjust the width and height of items within a CollectionView according to the page dimensions.</p>
  
  <p>Here's an example of what I'm currently doing:</p>
  
  <p>MainPage.xaml:</p>
  
  <pre><code>&lt;ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:d="http://xamarin.com/schemas/2014/forms/design"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               xmlns:self="clr-namespace:DynDimCollView"
               x:Name="Root"
               mc:Ignorable="d"
               x:Class="DynDimCollView.MainPage"&gt;
      &lt;StackLayout&gt;
          &lt;CollectionView x:Name="collectionView" HeightRequest="{Binding ItemsHeight, Source={x:Reference Root}}"
                          ItemsSource="{Binding Items, Source={x:Reference Root}}"
                          BackgroundColor="LightGray"&gt;
              &lt;CollectionView.ItemsLayout&gt;
                  &lt;LinearItemsLayout Orientation="Horizontal"/&gt;
              &lt;/CollectionView.ItemsLayout&gt;
              &lt;CollectionView.ItemTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;self:CustomFrame WidthRequest="{Binding ItemsWidth, Source={x:Reference Root}}"
                                        BorderColor="Blue"&gt;
                          &lt;StackLayout&gt;
                              &lt;Label Text="{Binding Name}"/&gt;
                          &lt;/StackLayout&gt;
                      &lt;/self:CustomFrame&gt;
                  &lt;/DataTemplate&gt;
              &lt;/CollectionView.ItemTemplate&gt;
          &lt;/CollectionView&gt;
      &lt;/StackLayout&gt;
  &lt;/ContentPage&gt;
  </code></pre>
  
  <p>MainPage.xaml.cs:</p>
  
  <pre><code>public partial class MainPage : ContentPage
  {
      public MainPage()
      {
          InitializeComponent();
          Items = new ObservableCollection&lt;Item&gt; { new Item { Name = "Item1" }, new Item { Name = "Item2" }, new Item { Name = "Item3" }, new Item { Name = "Item4" }, new Item { Name = "Item5" } };
      }
  
      protected override void OnSizeAllocated(double width, double height)
      {
          base.OnSizeAllocated(width, height);
          ItemsHeight = height / 4;
          ItemsWidth = width / 4;
      }
  
      public static BindableProperty ItemsProperty =
          BindableProperty.Create(
              nameof(Items),
              typeof(ObservableCollection&lt;Item&gt;),
              typeof(MainPage),
              null,
              BindingMode.OneWay);
  
  
      public static BindableProperty ItemsHeightProperty =
          BindableProperty.Create(
              nameof(ItemsHeight),
              typeof(double),
              typeof(MainPage),
              null,
              BindingMode.OneWay);
  
      public static BindableProperty ItemsWidthProperty =
          BindableProperty.Create(
              nameof(ItemsWidth),
              typeof(double),
              typeof(MainPage),
              null,
              BindingMode.OneWay);
  
      public ObservableCollection&lt;Item&gt; Items
      {
          get =&gt; (ObservableCollection&lt;Item&gt;)GetValue(ItemsProperty);
          set =&gt; SetValue(ItemsProperty, value);
      }
  
      public double ItemsHeight
      {
          get =&gt; (double)GetValue(ItemsHeightProperty);
          set =&gt; SetValue(ItemsHeightProperty, value);
      }
  
      public double ItemsWidth
      {
          get =&gt; (double)GetValue(ItemsWidthProperty);
          set =&gt; SetValue(ItemsWidthProperty, value);
      }
  }
  </code></pre>
  
  <p>Notice the override of <strong>OnSizeAllocated</strong> where the item size is set.</p>
  
  <p>It seems to be working fine but strangely on UWP it works only when you change the height of the window. If you just change the window's width the items do not resize.</p>
  
  <p>I tried to call ForceLayout on WidthRequest property changes (within the CustomFrame) but it does nothing.</p>
  
  <p>Am I doing something wrong or is this a bug?</p>