wpf grid interchange rows dynamically

Question

I have a grid in a xaml with 6 rows,each row is having a user control.

Now I want to interchange 3 and 4th row based on some condition dynamically.

Is it possible to do by binding a property to Grid.Row?

Could anyone please help me out as I'm unable to figure out as to how to implement this.

Answer 1

I created 6 textblocks and 1 button. On clicking button, it will alter row positions of textblock 3 and textblock 4.

You can put your user controls instead of textblocks.

Xaml:

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

    <TextBlock x:Name="TextBlock0" Text="Row 0" Grid.Row="0"></TextBlock>
    <TextBlock x:Name="TextBlock1" Text="Row 1" Grid.Row="1"></TextBlock>
    <TextBlock x:Name="TextBlock2" Text="Row 2" Grid.Row="2"></TextBlock>
    <TextBlock x:Name="TextBlock3" Text="Row 3" Grid.Row="3"></TextBlock>
    <TextBlock x:Name="TextBlock4" Text="Row 4" Grid.Row="4"></TextBlock>
    <TextBlock x:Name="TextBlock5" Text="Row 5" Grid.Row="5"></TextBlock>

    <Button Grid.Row="6" Content="Change row position" Margin="10" Click="ButtonBase_OnClick"></Button>
</Grid>

Code behind:

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
    {
        Grid.SetRow(TextBlock3, 4);
        Grid.SetRow(TextBlock4, 3);
    }

Before clicking button:

After clicking button: It changed the positions of 3rd and 4th row.

Hope this helps.

UPDATE:

<TextBlock x:Name="TextBlock3" Text="Row 3">
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Flag, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" Value="true">
                        <Setter Property="Grid.Row" Value="4"></Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Flag, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" Value="false">
                        <Setter Property="Grid.Row" Value="3"></Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>

    <TextBlock x:Name="TextBlock4" Text="Row 4">
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Flag, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" Value="true">
                        <Setter Property="Grid.Row" Value="3"></Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Flag, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" Value="false">
                        <Setter Property="Grid.Row" Value="4"></Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>

On button click:

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
    {
        var dc = DataContext as YourViewModel;
        dc.Flag = true; // Flag is a property in view model. By default it is false.           
    }