如何通过用户交互在运行时调整XAML文本框的大小？

Question

我想知道是否可以在运行时以及通过用户交互来调整XAML TextBox大小。 也就是说，用户使用车把根据需要手动调整TextBox大小。 尽管TextBox似乎有一个sizeChanged事件，但我不知道如何在运行时手动更改大小。

Answer 1

这是创建效果的XAML：

<Grid x:Name="MyTextBox" Width="250"
        MinWidth="250" MinHeight="60"
        Margin="20" HorizontalAlignment="Left"
        VerticalAlignment="Top">
    <Grid.Resources>
        <Style TargetType="Polygon">
            <Setter Property="Fill" Value="{ThemeResource SystemControlBackgroundAltHighBrush}" />
            <Setter Property="HorizontalAlignment" Value="Right" />
            <Setter Property="IsHitTestVisible" Value="False" />
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <CompositeTransform TranslateX="5" TranslateY="5" />
                </Setter.Value>
            </Setter>
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
            <Setter Property="Stroke" Value="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}" />
            <Setter Property="StrokeThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
            <Setter Property="VerticalAlignment" Value="Bottom" />
        </Style>
        <Style TargetType="TextBox">
            <Setter Property="AcceptsReturn" Value="True" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="TextWrapping" Value="Wrap" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
        </Style>
        <Style TargetType="Thumb">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Height" Value="30" />
            <Setter Property="HorizontalAlignment" Value="Right" />
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <CompositeTransform TranslateX="10" TranslateY="10" />
                </Setter.Value>
            </Setter>
            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="Width" Value="30" />
        </Style>
    </Grid.Resources>
    <TextBox Header="First Name" Text="Jerry" />
    <Thumb DoubleTapped="GrabDoubleTapped" DragDelta="GrabDelta" Loaded="GrabLoaded" />
    <Polygon Points="0,19 19,0, 19,19" />
</Grid>

这是处理它的背后代码：

Windows.Foundation.Size originalSize;
private void GrabLoaded(object sender, RoutedEventArgs e)
{
    originalSize = MyTextBox.RenderSize;
}

private void GrabDelta(object sender, Windows.UI.Xaml.Controls.Primitives.DragDeltaEventArgs e)
{
    MyTextBox.Width = MyTextBox.ActualWidth + e.HorizontalChange;
    MyTextBox.Height = MyTextBox.ActualHeight + e.VerticalChange;
}

private void GrabDoubleTapped(object sender, Windows.UI.Xaml.Input.DoubleTappedRoutedEventArgs e)
{
    MyTextBox.Height = originalSize.Height;
    MyTextBox.Width = originalSize.Width;
}

您可以轻松地将其包装到控件或用户控件等中。 当然。

看起来像这样：

祝你好运！

Answer 2

艾哈迈德，

我为您提供2种解决方案。

解决方案1：

一个简单的前期解决方案可以使用网格拆分器 ，它可以帮助您拖动和调整控件的大小。 网格拆分器的数量取决于您希望调整TextBox大小的方式。 下面是一个代码示例：

<Grid>...
<GridSplitter Grid.Row="1" Grid.ColumnSpan="2" ResizeDirection="Rows" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="4" BorderThickness="0,0,0,1" BorderBrush="Gray" Background="Transparent"/>
<TextBox Grid.Row="2" Grid.Column="0" Margin="6,6,6,6" Name="RequestTextBox" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" Text="{Binding Request, Mode=TwoWay}"/>
<GridSplitter Grid.Row="2" Grid.ColumnSpan="2" ResizeDirection="Rows" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="4" BorderThickness="0,0,0,1" BorderBrush="Gray" Background="Transparent"/>
...</Grid>

注意：您可能还需要放置4个Grid拆分器以从4个方向调整文本框的大小，但要抬高头，可能必须在GridSplitter上定义DragCompleted事件以调整宽度和高度。

解决方案2：

您也可以使用Adorner进行此操作。 以下是关于包含和不包含Adorners的主题的四部分系列文章：

PS：由于主题本身非常广泛，因此我没有总结链接的含义。 因此建议您检查链接。 以防万一链接失效，谷歌装饰师不应该太强硬;）

• 第1部分
• 第2部分
• 部分3
• 部分4