WPF, использующий ResizeGrip для изменения размера элементов управления

Question

Я хочу, чтобы пользователь мог изменять размер элемента управления, замаскировав размер с правой стороны. С ResizeGrip, кажется, существует идеальный контроль для достижения этого, но я не вижу, какой план использовать этот элемент управления. Это не происходит из Thumb (однако в msdn написано, что это «реализация»), а также не поддерживает перенаправленные события Thumb.

Каково правильное использование ResizeGrip-control.

Update:

Я играл с ResizeGrip и я испытал много странных проблем, используя его.

Самая сложная проблема заключалась в том, что, используя ResizeGrip в окне, которое также показывает собственный ResizeGrip в нижнем правом углу (ResizeMode = "CanResizeWithGrip"), окно начало действительно реагировать на ввод мыши. В конце концов, я отказался использовать его. В качестве простой альтернативы вы можете использовать Thumb -control и прикрепить к нему соответствующий шаблон.

Answer 1

Хорошо, мне стало скучно прошлой ночью и написал небольшой образец для вас, используя Thumb. Вы должны иметь возможность копировать/вставлять/компилировать/запускать.

Но в основном я создал UserControl с именем DialogReplica, что-то похожее на диалог с захватом, вы можете увидеть его брошенное в главном окне.

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

Вот XAML для UserControl (вы в основном заинтересованы в 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; 
    } 
}