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中的（现已删除的）评论中暗示的那样，可以放置拆分器控件，而不必与网格中的其他元素共享单元格（并可能模糊）。以下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的完整功能集，甚至你会对所涉及的一些约束感到满意（例如标题的格式化方式，以及是否可以在布局中包含其他固定宽度的元素。

可调整大小的多个TextBox

1 个答案: