1

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.

RDY
  • 13
  • 5

1 Answers1

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:

enter image description here

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

enter image description here

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.           
    }
Parag
  • 543
  • 1
  • 8
  • 18
  • Is it possible to do it with data bind to Grid.Row? – RDY Apr 11 '17 at 05:35
  • Yes, it is possible. e.g. – Parag Apr 11 '17 at 05:44
  • how to use converter here. Converter will decide the row index based on some condition. – RDY Apr 11 '17 at 06:19
  • – Parag Apr 11 '17 at 07:04
  • Can you please provide me a sample application. – RDY Apr 11 '17 at 09:33
  • first give me your exact requirement, so that i can provide solution. – Parag Apr 11 '17 at 09:54
  • Lets say there is a property in model class which returns true/false value. If it is true we are going to interchange the rows in converter class and return the value and bind it to UI – RDY Apr 11 '17 at 10:16
  • You can do this even without using converter. You can use datatriggers. I have updated the answer. – Parag Apr 11 '17 at 10:42
  • I have implemented using your reference but rows are not interchanging. There are no data binding errors or any kind of errors in Output window. – RDY Apr 11 '17 at 12:28
  • On which event, you are changing the rows? – Parag Apr 11 '17 at 12:30
  • While loading the form itself it should interchange rows based on the flag. Do i have to implement INotifyPropertyChanged on the class where the property/flag is defined? – RDY Apr 11 '17 at 12:51
  • Yeap, that's must.That's why I have put 2 way bindings. – Parag Apr 11 '17 at 13:14
  • Yes it is solved. Grid.Row is binded to converter class and based on the converter method return value i'm interchanging the row value.Thanks for the help. – RDY Apr 24 '17 at 11:10
  • Okay, then don't forget to mark the answer as useful. – Parag Apr 24 '17 at 11:19