Page 1 of 1

Set VisualState for RowDefinition

Posted: 21 Aug 2019, 15:27
by AdamJonsson
Hi y'all!

I need to alter the value of a Grid RowDefinition for different VisualStates.
How is this achieved?

I read somewhere that one way was to give the RowDefinition a name (x:Name="..")
but I'm unsure of how to use it.

Re: Set VisualState for RowDefinition

Posted: 23 Aug 2019, 00:42
by sfernandez
RowDefinition.Height property is of type GridLength and WPF doesn't provide an animation timeline to animate that type.

There are ways of doing this by animating an attached property, but that will require code (setting the RowDefinition.Height in code when the attached property changes).

Another option (pure xaml) would be to use "Auto" in the row, then place an element in that row that will determine the row size and animate that element:
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.Resources>
        <Storyboard x:Key="anim">
            <DoubleAnimation To="10" Storyboard.TargetName="row0" Storyboard.TargetProperty="Height" AutoReverse="True"/>
        </Storyboard>
    </Grid.Resources>
    <Grid Width="200" Height="200">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Decorator x:Name="row0" Grid.Row="0" Height="100"/>
        <Rectangle Grid.Row="0" Fill="Red"/>
        <Rectangle Grid.Row="1" Fill="Blue"/>
        
    </Grid>
    <Button Content="Animate" HorizontalAlignment="Center" VerticalAlignment="Bottom">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard Storyboard="{StaticResource anim}"/>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Grid>