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