WPF 使用 ResizeGrip 调整控件大小

Question

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

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

更新:

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

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

Answer 1

好吧，我昨晚无聊了，用 Thumb 为你写了一个小样本。 .您应该能够复制/粘贴/编译/运行。

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

<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;
    }
}