Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 89864

How to animate a Frame resizing based on content visibility

$
0
0

I have a 'data table' for a weeks data but initially, it shows the last 3 days. When tapped on it will expand out to the full week.
I've wired up a tap gesture to the Frame that holds the data table inside and when tapped the Visible property of the hidden rows are flipped.

Starts like this

Tap and it shows the rest of the week

I've never bothered with animations but I have been asked if we could animate the 'table' expanding/shrinking. Is this possible and obvious follow-up, how?

Here's the XAML for the frame and data

<ctrls:MaterialFrame
                    x:Name="WeekDataFrame"
                    Margin="0,3,0,0"
                    Padding="0,0,0,3"
                    BackgroundColor="White"
                    BorderColor="Gray"
                    Elevation="20"
                    HasShadow="True"
                    HorizontalOptions="FillAndExpand">
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding DataTappedCommand}" NumberOfTapsRequired="1" />
                    </Frame.GestureRecognizers>
                    <StackLayout Padding="0" Spacing="0">
                        <Grid
                            Padding="10,2"
                            BackgroundColor="{StaticResource BoxBlue}"
                            ColumnSpacing="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="2*" />
                                <ColumnDefinition Width="1*" />
                                <ColumnDefinition Width="1*" />
                                <ColumnDefinition Width="1*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="20" />
                            </Grid.RowDefinitions>

                            <Label
                                Grid.Column="0"
                                HorizontalTextAlignment="Start"
                                Style="{StaticResource HeaderRowLabel}"
                                Text="Day" />
                            <Label
                                Grid.Column="1"
                                Style="{StaticResource HeaderRowLabel}"
                                Text="Sales" />
                            <Label
                                Grid.Column="2"
                                Style="{StaticResource HeaderRowLabel}"
                                Text="Waste" />
                            <Label
                                Grid.Column="3"
                                Style="{StaticResource HeaderRowLabel}"
                                Text="AOI" />
                        </Grid>

                        <StackLayout
                            Padding="0"
                            BindableLayout.ItemsSource="{Binding WeekOfAdjustments}"
                            Spacing="0">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <Grid
                                        Padding="10,0"
                                        ColumnSpacing="0"
                                        IsVisible="{Binding Visible}"
                                        RowSpacing="0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="2*" />
                                            <ColumnDefinition Width="1*" />
                                            <ColumnDefinition Width="1*" />
                                            <ColumnDefinition Width="1*" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Label
                                            Grid.Column="0"
                                            HorizontalTextAlignment="Start"
                                            Style="{StaticResource DataRowLabel}"
                                            Text="{Binding DayName}" />
                                        <Label
                                            Grid.Column="1"
                                            Style="{StaticResource DataRowLabel}"
                                            Text="{Binding Sales}" />
                                        <Label
                                            Grid.Column="2"
                                            Style="{StaticResource DataRowLabel}"
                                            Text="{Binding Waste}" />
                                        <Label
                                            Grid.Column="3"
                                            Style="{StaticResource DataRowLabel}"
                                            Text="{Binding AoI, StringFormat='{0:###0;-###0;#}'}" />
                                    </Grid>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </StackLayout>

                    </StackLayout>

                </ctrls:MaterialFrame>

Thanks, Darren


Viewing all articles
Browse latest Browse all 89864

Trending Articles



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