Câu hỏi WPF sử dụng ResizeGrip để điều chỉnh kích thước


Tôi muốn rằng người dùng có thể thay đổi kích thước một điều khiển bằng cách kéo một kích thước thay đổi-grip trên biên giới phía dưới bên phải. Với ResizeGrip dường như tồn tại sự kiểm soát hoàn hảo để đạt được điều này, nhưng tôi không thấy kế hoạch sử dụng điều khiển này là gì. Nó không lấy được từ Thumb (tuy nhiên trong msdn được viết rằng nó là một "thực hiện" của nó), và cũng không hỗ trợ các sự kiện định tuyến của Thumb.

Sử dụng chính xác điều khiển ResizeGrip là gì?

Cập nhật:

Tôi đã chơi với ResizeGrip và tôi đã trải qua rất nhiều vấn đề lạ khi sử dụng nó.

Vấn đề khó khăn nhất là, sử dụng ResizeGrip trong cửa sổ hiển thị ResizeGrip bản địa ở góc dưới cùng bên phải (ResizeMode = "CanResizeWithGrip"), cửa sổ đã bắt đầu phản ứng thực sự lạ trên đầu vào chuột. Cuối cùng, tôi đã từ chối sử dụng nó. Là một lựa chọn đơn giản, bạn có thể sử dụng Thumb-control và đính kèm nó một mẫu thích hợp.


8
2017-09-10 14:45


gốc




Các câu trả lời:


Ok, tối qua tôi đã chán và đã viết một mẫu nhỏ cho bạn sử dụng Thumb. Bạn có thể Copy / Paste / Compile / Run.

Nhưng về cơ bản, tôi đã tạo UserControl có tên DialogReplica, chỉ cần một cái gì đó trông giống như một hộp thoại với một va li, bạn có thể nhìn thấy nó ném trong cửa sổ chính.

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

Đây là xaml cho UserControl (bạn chủ yếu quan tâm đến Thumb phần):

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

cuối cùng, đây là mã phía sau cho 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;
    }
}

12
2018-01-06 19:00