WPF使用ResizeGrip来调整控件的大小

Question

WPF使用ResizeGrip来调整控件的大小

12

我希望用户能够通过在控件的右下边界拖动调整大小。通过使用 ResizeGrip 控件，似乎可以完美实现这一目标，但我不知道如何使用此控件。它没有从 Thumb 派生（虽然在 msdn 中写到它是Thumb的"实现"），也不支持 Thumb 的路由事件。

那么 ResizeGrip 控件应该如何正确使用呢？

更新:

我已经尝试使用 ResizeGrip 并且遇到了很多奇怪的问题。

最困难的问题是，在一个同时显示本地 ResizeGrip 的窗口中使用 ResizeGrip（ResizeMode="CanResizeWithGrip"），窗口对鼠标输入做出了非常奇怪的反应。最终，我放弃了使用它。作为一个简单的替代方案，您可以使用 Thumb 控件并将其附加到适当的模板。

- HCL

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- denis morozov · Accepted Answer

好的，昨晚我感到无聊，写了一个使用 Thumb 的小样例给你。您应该能够复制/粘贴/编译/运行。

但基本上，我创建了一个名为DialogReplica的UserControl，只是看起来像对话框带有握柄，您可以在主窗口中看到它。

<Window x:Class="ResizeGrip.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ResizeGrip="clr-namespace:ResizeGrip"
    Title="MainWindow" Height="350" Width="525">
<Canvas>
    <ResizeGrip:DialogReplica Canvas.Top="25" Canvas.Left="100"/>
</Canvas>

这是UserControl的XAML代码（你最感兴趣的是 Thumb 部分）：

<UserControl x:Class="ResizeGrip.DialogReplica"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Border x:Name="Border" HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="#FF626161" BorderThickness="2" CornerRadius="3">

    <DockPanel x:Name="sizableContent" Background="LightGray" Focusable="False" LastChildFill="True" MinHeight="100" MinWidth="100">

        <Border DockPanel.Dock="Top" Background="Gray" Height="30">
            <DockPanel>
                <Button DockPanel.Dock="Right" Width="16" Height="16" 
                    VerticalAlignment="Center" HorizontalAlignment="Center"
                    VerticalContentAlignment="Top" HorizontalContentAlignment="Center"
                    Margin="0,0,4,0" Background="Transparent">
                    <Button.Content>
                        <Grid>
                            <Line X1="1" Y1="1" X2="8" Y2="8" Stroke="White" StrokeThickness="1"/>
                            <Line X1="1" Y1="8" X2="8" Y2="1" Stroke="White" StrokeThickness="1"/>
                        </Grid>
                    </Button.Content>
                </Button>
                <TextBlock Text="Pretend Dialog" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </DockPanel>
        </Border>

        <DockPanel DockPanel.Dock="Bottom" HorizontalAlignment="Stretch">

            <Thumb DockPanel.Dock="Right" VerticalAlignment="Bottom" Margin="0,0,1,1"
                   DragDelta="OnResizeThumbDragDelta" 
                   DragStarted="OnResizeThumbDragStarted" 
                   DragCompleted="OnResizeThumbDragCompleted">
                <Thumb.Style>
                    <Style TargetType="{x:Type Thumb}" BasedOn="{x:Null}">
                        <Style.Setters>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Grid x:Name="resizeVisual" DockPanel.Dock="Right" VerticalAlignment="Bottom"  >
                                            <Line X1="6" Y1="18" X2="18" Y2="6" Stroke="DarkGray" StrokeThickness="1.5"/>
                                            <!--smallest/right|bottom most -->
                                            <Line X1="10" Y1="18" X2="18" Y2="10" Stroke="DarkGray" StrokeThickness="1.5"/>
                                            <Line X1="14" Y1="18" X2="18" Y2="14" Stroke="DarkGray" StrokeThickness="1.5"/>
                                            <!--longers/left|top most-->
                                            <Grid.Style>
                                                <Style TargetType="{x:Type Grid}">
                                                    <Style.Triggers>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Setter Property="Cursor" Value="SizeNWSE"/>
                                                        </Trigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </Grid.Style>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style.Setters>
                    </Style>
                </Thumb.Style>
            </Thumb>

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Margin="12" Width="75" TabIndex="1" Content="Ok"/>
            </StackPanel>
        </DockPanel>

        <StackPanel HorizontalAlignment="Center" Margin="16,16,16,4">
            <TextBlock Text="Drag the lower right corner to resize."/>
        </StackPanel>
    </DockPanel>
</Border>

最后，这是 UserControl 的代码背后

public partial class DialogReplica : UserControl
{
    private Cursor _cursor;

    public DialogReplica()
    {
        InitializeComponent();
    }

    private void OnResizeThumbDragStarted(object sender, DragStartedEventArgs e)
    {
        _cursor = Cursor;
        Cursor = Cursors.SizeNWSE;
    }

    private void OnResizeThumbDragCompleted(object sender, DragCompletedEventArgs e)
    {
        Cursor = _cursor;
    }

    private void OnResizeThumbDragDelta(object sender, DragDeltaEventArgs e)
    {
        double yAdjust = sizableContent.Height + e.VerticalChange;
        double xAdjust = sizableContent.Width + e.HorizontalChange;

        //make sure not to resize to negative width or heigth            
        xAdjust = (sizableContent.ActualWidth + xAdjust) > sizableContent.MinWidth ? xAdjust : sizableContent.MinWidth;
        yAdjust = (sizableContent.ActualHeight + yAdjust) > sizableContent.MinHeight ? yAdjust : sizableContent.MinHeight;

        sizableContent.Width = xAdjust;
        sizableContent.Height = yAdjust;
    }
}