Scaletransform se transforma no linealmente

Question

Estoy usando la transformación de escala para permitir que un usuario redimense un control. Sin embargo, lo que sucede es que cuando comienzas a mover el mouse, el control salta a un nuevo tamaño y luego escala extrañamente. Cuanto más se mueva el mouse desde la ubicación inicial, mayor será el aumento de tamaño.

Espero que sea la forma en que calculo la escala que se aplica. Aquí está el código:

private void ResizeGrip_MouseDown(object sender, MouseButtonEventArgs e)
{
    ResizeHandle.CaptureMouse();

    //Get the initial coordinate cursor location on the window
    initBtmX = e.GetPosition(this).X;

    bottomResize = true;
}

private void ResizeGrip_MouseUp(object sender, MouseButtonEventArgs e)
{
    bottomResize = false;
    ResizeHandle.ReleaseMouseCapture();
}

private void ResizeGrip_MouseMove(object sender, MouseEventArgs e)
{
    if( bottomResize == true)
    {
        //Get the new Y coordinate cursor location
        double newBtmX = e.GetPosition(this).X;


        //Get the smallest change between the initial and new cursor location
        double diffX = initBtmX - newBtmX;

        // Let our rectangle capture the mouse
        ResizeHandle.CaptureMouse();

        double newWidth = e.GetPosition(this).X - diffX;

        double scaler = newWidth / ResizeContainer.ActualWidth;

        Console.WriteLine("newWidth: {0}, scalar: {1}", newWidth, scaler);


        if (scaler < 0.75 || scaler > 3)
            return;

        ScaleTransform scale = new ScaleTransform(scaler, scaler);

        ResizeContainer.LayoutTransform = scale;
    }
}

Actualización: ahora con xaml

<wtk:IToolDialog x:Name="VideoPlayer" ParentControl="{Binding ElementName=Stage}" DialogTitle="Video Player" Margin="90,5,0,0">
    <Grid> 
        <Grid x:Name="ResizeContainer" ClipToBounds="True" Width="320" Height="240" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,1">
            <!-- The video frame -->
            <Image Stretch="Fill" Source="{Binding CurrentFrameImage}" x:Name="VideoImage" />
            <Grid>
                <pplcontrols:VideoGroundPlane Foreground="Black" GridSize="20" GroundPlane="{Binding GroundPlane}">
                </pplcontrols:VideoGroundPlane>
            </Grid>
            <Grid x:Name="HitMask" IsHitTestVisible="False"/>
        </Grid>
        <ResizeGrip Cursor="SizeNWSE" x:Name="ResizeHandle" VerticalAlignment="Bottom" HorizontalAlignment="Right" Mouse.MouseDown="ResizeGrip_MouseDown" Mouse.MouseUp="ResizeGrip_MouseUp" Mouse.MouseMove="ResizeGrip_MouseMove"></ResizeGrip>
    </Grid>
</wtk:IToolDialog>

Answer 1

¿Alguna razón por la que no está utilizando resizeContainer.renderTransFrom en lugar de resizeContainer.layoutTransform? Es decir, usar

ResizeContainer.LayoutTransform = scale;

Si quieres que la escala sea lineal, creo que deberías usar

double scaler = 1 - diff / ResizeContainer.ActualWidth;

---

EDITAR:

Hay un error en el código que hace que el control escalado "salte" de tamaño si intenta cambiar el tamaño más de una vez. Te sugiero que hagas lo siguiente:

Agregue una RenderTransform a su cuadrícula ResizeContainer:

<Grid.RenderTransform>
    <ScaleTransform x:Name="transform" ScaleX="1" ScaleY="1" />
</Grid.RenderTransform>

Cambie el código en su controlador de eventos MouseMove a lo siguiente:

if (bottomResize)
{
    double newBtmX = e.GetPosition(this).X;
    double scaler = -(initBtmX - newBtmX) / grid1.ActualWidth;
    initBtmX = newBtmX;

    transform.ScaleX += scaler;
    transform.ScaleY += scaler;
}

De esta manera, cambia la escala por cualquier pequeña cantidad que el mouse haya movido mientras se arrastra. Todos los controles de los niños dentro de la cuadrícula también deberían escala.