wpf - wpf网格动态交换行

Question

我在 xaml 中有一个 6 行的网格，每行都有一个用户控件。

现在我想根据某些条件动态地交换第 3 行和第 4 行。

是否可以通过将属性绑定到 Grid.Row 来做到这一点？

任何人都可以帮助我，因为我无法弄清楚如何实现这一点。

Answer 1

我创建了 6 个文本块和 1 个按钮。单击按钮时，它将改变文本块 3 和文本块 4 的行位置。

您可以放置​​用户控件而不是文本块。

xml:

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

后面的代码：

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

点击按钮前：

点击按钮后：改变了第3行和第4行的位置。

希望这可以帮助。

更新：

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

单击按钮时：

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