Quantcast
Channel: Recent Threads — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 204402

How to animate CollectionView items positions in Xamarin Forms

$
0
0

I'm using Xamarin Forms CollectionView in a vertical grid layout.

I have a dynamic grid where the number of columns changes dynamically and each item is sized according to subsequent available width.

I'm trying to animate the respositioning of items within the CollectionView after such column count changes.

Tried to tap into X/Y property changes on the root element of each DataTemplate but got nothing.
Any idea would help!

Here's a sample code of such grid:

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             SizeChanged="CollectionSizeChanged"
             x:Name="CollectionRoot"
             x:Class="App.Views.DynamicGrid">
    <CollectionView VerticalOptions="FillAndExpand"
                    VerticalScrollBarVisibility="Never"
                    HorizontalScrollBarVisibility="Always"
                    ItemsSource="{Binding CollectionItems}">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" 
                             HorizontalItemSpacing="0"
                             VerticalItemSpacing="0"
                             Span="{Binding NumColumns, Source={x:Reference CollectionRoot}}"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <ContentView Padding="0" Margin="0">
                    <Frame BackgroundColor="Green"
                           BorderColor="Red"
                           CornerRadius="0"
                           Margin="0"
                           Padding="0"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"
                           HeightRequest="{Binding ItemHeight, Source={x:Reference CollectionRoot}}"
                           WidthRequest="{Binding ItemWidth, Source={x:Reference CollectionRoot}}"/>
                </ContentView>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentView>

Viewing all articles
Browse latest Browse all 204402

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>