WPF sử dụng ResizeGrip để thay đổi kích thước các điều khiển

Question

Tôi muốn 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 núm điều chỉnh kích thước trên đường viền bên phải phía dướ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.

Cách sử dụng chính xác của điều khiển ResizeGrip là gì.

Cập nhật:

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

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

Answer 1

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 một UserControl có tên DialogReplica, giống như một hộp thoại có tay cầm, bạn có thể thấy nó được 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 các phần 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> 

cuối cùng, đây là đoạn code 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; 
    } 
}