可调整大小的多个文本框

Question

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

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

Answer 1

不完全清楚您的确切规格是什么。但是绘图使它看起来像您希望网格中的一些单元格具有不同宽度的抓握手柄，而其他单元格则没有。为此，您应该能够使用 GridSplitter object.

例如：

<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 objects）也是 moved/resized，因为它们与各自的 TextBox.

共享同一列

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

请注意，为拆分器 object 提供特定格式非常重要，并且它们出现在之后与它们共享网格元素的控件，以便它们在 z-order.

中的那些控件之上

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

附录：

正如 Joey 在（现已删除的）评论中所暗示的那样，可以放置拆分器控件，而无需它们与网格中的其他元素共享（并可能遮挡）单元格。以下 XAML 片段（即 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 的完整功能集，甚至你会对涉及的一些限制感到满意（例如标题的格式设置方式，以及是否可以在布局中包含其他 fixed-width 元素。

可调整大小的多个文本框

Resizeable multiple TextBoxes

c#

wpf

drag