WPF 使用 ResizeGrip 调整控件大小

Question

我希望用户可以通过拖动右下边框上的调整大小手柄来调整控件的大小。使用ResizeGrip 似乎存在实现此目标的完美控制，但我不知道使用此控制的计划是什么。它不是从 Thumb 派生的（但在 msdn 中写到它是它的“实现”），也不支持 Thumb 的路由事件。

ResizeGrip 控件的正确用法是什么。

更新：

我玩过ResizeGrip，在使用它时遇到了很多奇怪的问题。

最困难的问题是，在右下角也显示本机 ResizeGrip 的窗口中使用 ResizeGrip (ResizeMode="CanResizeWithGrip")，窗口已经开始对鼠标输入做出非常奇怪的反应。最后，我拒绝使用它。 作为一个简单的替代方法，您可以使用Thumb-control 并将其附加到适当的模板。

Answer 1

好吧，我昨晚无聊，用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;
    }
}