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.

What have you tried so far? Where and why did it fail? Show us code! — TobiMcNamobi

Parag Parag · Accepted Answer · 2017-04-11T05:23:36

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.           
    }

wpf grid interchange rows dynamically

1 Answers