可调整大小的多个文本框

Question

我将创建一些可调整（通过拖动）多个文本框的程序。

但是，我不知道如何构建这个布局。有知道如何创建拖动布局吗？

Answer 1

这里并不完全清楚您的确切规格。但是绘图使您看起来像您希望网格中的 一些 单元格具有不同宽度的把手，而其他单元格则没有。为此，您应该能够使用GridSplitter 对象。

例如：

<Window x:Class="TestSO36334781GridSplitter.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:p="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

  <StackPanel>
    <Border BorderBrush="Black" BorderThickness="1">
      <Grid>
        <Grid.Resources>
          <p:Style TargetType="GridSplitter">
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="Width" Value="5"/>
            <Setter Property="Height" Value="10"/>
            <Setter Property="Background" Value="Black"/>

            <!-- Offset the splitter visually so it's centered over the gridline -->
            <Setter Property="RenderTransform">
              <Setter.Value>
                <TranslateTransform X="2.5" Y="0"/>
              </Setter.Value>
            </Setter>
          </p:Style>
          <p:Style TargetType="TextBox">
            <Setter Property="Height" Value="30"/>
          </p:Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
          <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="Label1" Grid.Column="0"/>
        <TextBlock Text="Label1" Grid.Column="1"/>
        <TextBlock Text="Label1" Grid.Column="2"/>

        <TextBox Grid.Row="1" Grid.Column="0"/>
        <TextBox Grid.Row="1" Grid.Column="1"/>
        <TextBox Grid.Row="1" Grid.Column="2"/>

        <GridSplitter Grid.Row="1" Grid.Column="0"/>
        <GridSplitter Grid.Row="1" Grid.Column="1"/>

        <TextBox Grid.Row="2" Grid.ColumnSpan="3" Text="A wide textbox here"/>
      </Grid>
    </Border>
  </StackPanel>
</Window>

上面显示了一个网格，中间一行有三个TextBox 控件，用户可以通过拖动每个控件之间的GridSplitter 来修改其宽度。它们上方的标签（即TextBlock 对象）也被移动/调整大小，因为它们与各自的TextBox 共享同一列。

显示了第四个TextBox，跨越最后一行的三列，以显示您如何仍然可以拥有独立于拆分器的其他网格元素。我假设您可以修改基本概念以满足您的特定需求。

请注意，为拆分器对象提供特定格式非常重要，并且它们出现在 与它们共享网格元素的控件之后，以便它们在 z 顺序中位于这些控件之上。

另请参阅此 Stack Overflow 问题：WPF user controlled grid column width

附录：

正如Joey 在（现已删除的）cmets 中所暗示的，可以放置拆分器控件，而不必与网格中的其他元素共享单元格（并且可能会遮盖）。以下 XAML sn-p（即 Grid 元素）显示了它的工作原理：

<Grid>
  <Grid.Resources>
    <p:Style TargetType="GridSplitter">
      <Setter Property="HorizontalAlignment" Value="Right"/>
      <Setter Property="VerticalAlignment" Value="Stretch"/>
      <Setter Property="Width" Value="5"/>
      <Setter Property="Height" Value="10"/>
      <Setter Property="Background" Value="Black"/>
    </p:Style>
    <p:Style TargetType="TextBox">
      <Setter Property="Height" Value="30"/>
    </p:Style>
  </Grid.Resources>
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
    <RowDefinition/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>

  <TextBlock Text="Label1" Grid.Column="0"/>
  <TextBlock Text="Label1" Grid.Column="2"/>
  <TextBlock Text="Label1" Grid.Column="4"/>

  <TextBox Grid.Row="1" Grid.Column="0"/>
  <TextBox Grid.Row="1" Grid.Column="2"/>
  <TextBox Grid.Row="1" Grid.Column="4"/>

  <GridSplitter Grid.Row="1" Grid.Column="1" ResizeBehavior="PreviousAndNext"/>
  <GridSplitter Grid.Row="1" Grid.Column="3" ResizeBehavior="PreviousAndNext"/>

  <TextBox Grid.Row="2" Grid.ColumnSpan="5" Text="A wide textbox here"/>
</Grid>

以上内容消除了对RenderTransform 的需求，因为每个GridSplitter 都在其自己的列中居中。 ResizeBehavior 设置为 PreviousAndNext，因此拖动拆分器不会影响包含拆分器的列的宽度，而是影响其前后列的宽度。

在这种情况下，您可以应用DataGrid 控件并让它执行您想要的操作。但是您的问题中没有任何内容表明您需要DataGrid 的完整功能集，甚至您会对可能涉及的一些限制感到满意（例如标题的格式，以及您是否可以在布局中包含其他固定宽度的元素）。