在 WPF 中包裹面板

Question

我的窗口中有以下布局：

1. Grid 有两列
2. GridSplitter ，它调整网格列的大小
3. 第二个网格列填充有 StackPanel
4. StackPanel 是垂直方向的，有 2 个子元素：TextBlock 和一个 WrapPanel
5. WrapPanel 有两个 Grid 作为Children
6. 第一个 Grid 子项包含一个 Image
7. 第二个 Grid 包含一个 StackPanel，其中包含 3 个垂直方向的 TextBlock。

XAML 代码如下所示：

<Window>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Left" />
    <StackPanel Grid.Column="1" Margin="5,0,0,0" Orientation="Vertical" 
        HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
      <TextBlock Text="Now here's a silly poem for you." />
      <WrapPanel>
        <Grid Name="GridForImage">
          <Image Width="200" Height="200" Source="Image.jpg" />
        </Grid>
        <Grid Name="GridForText">
          <StackPanel Orientation="Vertical">
            <TextBlock TextWrapping="WrapWithOverflow" Text="Roses are red." />
            <TextBlock TextWrapping="WrapWithOverflow" Text="Violets are blue." />
            <TextBlock TextWrapping="WrapWithOverflow" Text="You belong in a zoo." />
          </StackPanel>
        </Grid>
      </WrapPanel>
    </StackPanel>
  </Grid>
</Window>

窗口打开后，第二列的宽度足以允许网格 GridForImage 和 GirdForText 水平并排放置。如果我使用网格分割器缩小第二列的宽度，GridForText 网格会在某一时刻放置在 GridForImage 下方，这是完全符合预期的。

这是我想要实现的目标：

1. 当我移动网格分割器时，我希望 GridForText 将其宽度缩小到一定大小，并保持位于 GridForImage 的右侧到窗口的右侧。然后，当宽度缩小到某个值（例如 200px）时，它应该放置在 GridForImage 下方，即 WrapPanel 应该发挥其魔力。现在，GridForText 根本不调整大小，只是当其当前宽度对于 WrapPanel 的宽度来说太大时，它才会被放置在下面。
2. 当 GridForText 确实放置在 GridForImage 下方时，我希望 GridForImage 填充 WrapPanel 的整个宽度' s 宽度。

这一切可能吗？我该怎么办？谢谢大家。

Answer 1

您本质上是在尝试使用两种不同的布局模式，因此您只需要在布局中设置两种不同的状态，然后添加绑定或触发器以在您想要切换模式时在它们之间切换（即宽度= 200） 。使用网格是最灵活的，可以让您更好地控制相对大小，但需要更多设置，并且在 ControlTemplate 或 DataTemplate 中效果最好，您可以在其中使用触发器根据条件一次设置一堆内容。

这是一个更紧凑的示例，使用 UniformGrid 以及一些绑定和转换器。我删除了图像上的固定大小 - 如果您更关心填充宽度而不是纵横比，请尝试 Stretch="Fill"。我还将一个 StackPanel 更改为 DockPanel，以保持其子级的垂直拉伸，并向其中一个 TextBlock 添加背景，只是为了显示它实际获得的宽度：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Left" />
    <DockPanel Grid.Column="1" Margin="5,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <TextBlock Text="Now here's a silly poem for you." DockPanel.Dock="Top"/>
        <UniformGrid Rows="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth, Converter={x:Static local:LayoutModeConverter.Row}, ConverterParameter=200}"
                     Columns="{Binding RelativeSource={RelativeSource Self}, Path=ActualWidth, Converter={x:Static local:LayoutModeConverter.Column}, ConverterParameter=200}">
            <Image Source="Image.jpg" />

            <StackPanel Orientation="Vertical">
                <TextBlock TextWrapping="WrapWithOverflow" Text="Roses are red." Background="Red" />
                <TextBlock TextWrapping="WrapWithOverflow" Text="Violets are blue." />
                <TextBlock TextWrapping="WrapWithOverflow" Text="You belong in a zoo." />
            </StackPanel>
        </UniformGrid>
    </DockPanel>
</Grid>

以及转换器：

public class LayoutModeConverter : IValueConverter
{
    public static readonly LayoutModeConverter Row = new LayoutModeConverter { RowMode = true };
    public static readonly LayoutModeConverter Column = new LayoutModeConverter { RowMode = false };

    public bool RowMode { get; set; }

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        double width = System.Convert.ToDouble(value);
        double targetWidth = System.Convert.ToDouble(parameter);
        if (RowMode)
            return width > targetWidth ? 1 : 2;
        else
            return width > targetWidth ? 2 : 1;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}