WPF usando ResizeGrip para cambiar el tamaño de los controles

Question

Quiero que el usuario pueda cambiar el tamaño de un control arrastrando un control de tamaño en el borde inferior derecho. Con el ResizeGrip parece que existe el control perfecto para lograr esto, pero no veo cuál es el plan para usar este control. No se deriva de Thumb (sin embargo, en msdn está escrito que es una "implementación"), y tampoco admite los eventos enrutados de Thumb.

¿Cuál es el uso correcto de ResizeGrip-control.

Actualización:

He jugado un poco con ResizeGrip y he experimentado una gran cantidad de problemas extraños que lo usan.

El problema más difícil fue que, al utilizar ResizeGrip en una ventana que muestra también un ResizeGrip nativo en la esquina inferior derecha (ResizeMode = "CanResizeWithGrip"), la ventana ha comenzado a reaccionar de forma extraña en la entrada del mouse. Al final, he renunciado a usarlo. Como una alternativa simple, puede usar el control Thumb y adjuntarle una Plantilla apropiada.

Answer 1

Ok, me aburrí anoche y escribí una pequeña muestra para ti usando Thumb. Debería poder copiar/pegar/compilar/ejecutar.

Pero, básicamente, creé un UserControl llamado DialogReplica, simplemente algo que se parece a un diálogo con un control, puede verlo arrojado en la ventana principal.

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

Aquí está el XAML para el control de usuario (que en su mayoría interesados ​​en la parte 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> 

finalmente, aquí está el código detrás de la 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; 
    } 
}