Animating Xaml Grid.ColumnDefinitions using XAML Behaviors when Binding Changes - xaml

Question

I have a grid showing data received from a web service as below:
The graph bars are achieved using data binding, with the converter returning a GridLength Star value:
<Grid Grid.Row="1" BorderThickness="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="{Binding home.possessionPercentage, Converter={StaticResource statswidthConverter}}"/>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="{Binding away.possessionPercentage, Converter={StaticResource statswidthConverter}}"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="tbl1" HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding home.possessionPercentage}"/>
<Rectangle Fill="#FF1DEE00" Stroke="White" Grid.Column="1" StrokeThickness="0"/>
<Rectangle Fill="White" Stroke="White" Grid.Column="2" StrokeThickness="0"/>
<Rectangle Fill="#FF139D00" Stroke="White" Grid.Column="3" StrokeThickness="0"/>
<TextBlock x:Name="tbr1" HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding away.possessionPercentage}" Grid.Column="4"/>
</Grid>
What I would like to achieve is for the column sizes to be animated to the new value when the binding value is updated rather than just a jump to the new size. I believe this can be achieved with the Microsoft.Behaviors library - https://github.com/Microsoft/XamlBehaviors/ but am unsure where to start. Any advice please?

Answer 1

To meet your requirements, firstly you need an animation to animate the Width property. I wrote a simple demo which use DoubleAnimation to animate the Width of the Rectangle. For the reason I set the target of storyboard to Rectangle is that ColumnDefinition.Width property is GridLength type that we cannot use DoubleAnimation.
Secondly, we need a trigger to trigger the animation. Here I use DataTriggerBehavior in XamlBehaviors SDK. Once the data greater than one value the trigger can be triggered.Completed demo as follows.
<Page
...
xmlns:Interactions="using:Microsoft.Xaml.Interactions.Core"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media">
<Page.Resources>
<local:statswidthConverter x:Name="statswidthConverter" />
<Storyboard x:Name="Increase">
<DoubleAnimation
Duration="0:0:5"
EnableDependentAnimation="true"
Storyboard.TargetName="rec1"
Storyboard.TargetProperty="Width"
To="{Binding homePercentage, Converter={StaticResource statswidthConverter}}" />
</Storyboard>
<Storyboard x:Name="decrease">
<DoubleAnimation
Duration="0:0:5"
EnableDependentAnimation="true"
Storyboard.TargetName="rec2"
Storyboard.TargetProperty="Width"
To="{Binding awayPercentage, Converter={StaticResource statswidthConverter}}" />
</Storyboard>
</Page.Resources>
<StackPanel
Padding="50"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Loaded="Grid_Loaded">
<Grid
Grid.Row="1"
Height="50"
BorderThickness="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition x:Name="clo1" Width="Auto" />
<ColumnDefinition Width="3" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock
x:Name="tbl1"
HorizontalAlignment="Center"
Text="{Binding homePercentage}"
TextWrapping="Wrap" />
<Rectangle
x:Name="rec1"
Grid.Column="1"
Width="0"
Fill="#FF1DEE00"
Stroke="White"
StrokeThickness="0">
<Interactivity:Interaction.Behaviors>
<Interactions:DataTriggerBehavior
Binding="{Binding homePercentage}"
ComparisonCondition="GreaterThan"
Value="0">
<Media:ControlStoryboardAction Storyboard="{StaticResource Increase}" />
</Interactions:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Rectangle>
<Rectangle
Grid.Column="2"
Fill="White"
Stroke="White"
StrokeThickness="0" />
<Rectangle
x:Name="rec2"
Grid.Column="3"
Width="200"
Fill="#FF139D00"
Stroke="White"
StrokeThickness="0" >
<Interactivity:Interaction.Behaviors>
<Interactions:DataTriggerBehavior
Binding="{Binding awayPercentage}"
ComparisonCondition="LessThan"
Value="200">
<Media:ControlStoryboardAction Storyboard="{StaticResource decrease}" />
</Interactions:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Rectangle>
<TextBlock
x:Name="tbr1"
Grid.Column="4"
HorizontalAlignment="Center"
Text="{Binding awayPercentage}"
TextWrapping="Wrap" />
</Grid>
</StackPanel>
</Page>
Code behind
public sealed partial class MainPage : Page
{
ObservableCollection<Percentage> percentages;
public MainPage()
{
this.InitializeComponent();
percentages = new ObservableCollection<Percentage>()
{
new Percentage {homePercentage=63,awayPercentage=37 }
};
this.DataContext = percentages[0];
}
}
public class Percentage
{
public double homePercentage { get; set; }
public double awayPercentage { get; set; }
}
public class statswidthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
return (double)value * 2;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return (double)value / 2;
}
}
If you still want to set animation for ColumnDefinition.Width please use ObjectAnimationUsingKeyFrames which don't have so smoothly effects as DoubleAnimation the demo showed. To be smoothly need quite a lot frames. For example:
<Storyboard x:Name="storyobejct">
<ObjectAnimationUsingKeyFrames
Duration="0:0:3"
Storyboard.TargetName="clo1"
Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="50" />
<DiscreteObjectKeyFrame KeyTime="0:0:1.5" Value="60" />
<DiscreteObjectKeyFrame KeyTime="0:0:2.0" Value="100" />
<DiscreteObjectKeyFrame KeyTime="0:0:3" Value="126" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
Using which animation and which trigger depend on your layout and requirements. Pay attention that animating the Width seems to be a dependent animation which is not recommended. More details animation please reference Animations overview, more details about XAML behavior please reference this document.