Grid ColumnSpacing and RowSpacing lost

[HO-COOH]

Describe the bug

I have 2 VisualState that changes a button's content to a Row/Column devided Grid, that has Grid.RowSpacing and Grid.ColumnSpacing applied. But it seems to be lost after toggling the VisualState back to the exact same state prior.

Steps to reproduce the bug

Create a new Page, use this xaml

<Page...>
    <Page.Resources>
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="Red"/>
        </Style>
    </Page.Resources>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="RowDevide">
                    <VisualState.Setters>
                        <Setter Target="PreviewButton.Content">
                            <Setter.Value>
                                <Grid ColumnSpacing="5" RowSpacing="5" Background="Green">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="50"/>
                                        <RowDefinition Height="50"/>
                                    </Grid.RowDefinitions>

                                    <Rectangle/>
                                    <Rectangle Grid.Row="1"/>
                                </Grid>
                            </Setter.Value>
                        </Setter>
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="ColumnDevide">
                    <VisualState.Setters>
                        <Setter Target="PreviewButton.Content">
                            <Setter.Value>
                                <Grid ColumnSpacing="5" RowSpacing="5" Background="Yellow">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50"/>
                                        <ColumnDefinition Width="50"/>
                                    </Grid.ColumnDefinitions>

                                    <Rectangle/>
                                    <Rectangle Grid.Column="1"/>
                                </Grid>
                            </Setter.Value>
                        </Setter>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>


        <Grid ColumnSpacing="20">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Button Grid.Column="1" x:Name="PreviewButton" Width="500" Height="500" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>

            <StackPanel>
                <RadioButton HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="RadioButton_Click">Row</RadioButton>
                <RadioButton HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="RadioButton_Click_1">Col</RadioButton>
            </StackPanel>
        </Grid>
    </Grid>
</Page>

Use this code

        private void RadioButton_Click(object sender, RoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "RowDevide", false);
        }

        private void RadioButton_Click_1(object sender, RoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "ColumnDevide", false);
        }

Happens to both UWP & WinUI3 projects.

Expected behavior

No response

Screenshots

2024-02-28.00-29-20.mp4

NuGet package version

WinUI 3 - Windows App SDK 1.4.5: 1.4.240411001

Windows version

Windows 10 (1809): Build 17763

Additional context

No response

[ranjeshj]

Weird. The traditional way to do something like this would be to have both Grid's in the tree and collapse/expand from the visual state manager. I'd expect what you are doing to work, but not sure what is going on with those properties.