XAML: hacer una ScrollViewer muestran barras de desplazamiento cuando el ScaleTransform de un objeto secundario se agranda

Question

Estoy haciendo una especie de control "vista preliminar" de algunos documentos en mi aplicación Silverlight 3. Tengo un lienzo (para mostrar el documento) en el interior de un ScrollViewer, y tengo que acercar / alejar botones que controlan la propiedades x e y escala de la ScaleTransform para la propiedad Canvas.RenderTransform. Quiero que las barras de desplazamiento de la ScrollViewer que aparecen cuando "zoom in" lo suficiente de tal manera que la tela ya no es visible en la zona ScrollViewer es, pero parece que sólo aparecen en función de la anchura / altura del propio lienzo, sin tener en cuenta de si se amplía o no.

¿Alguien puede ayudar?

Answer 1

Sí, el problema es que no hay LayoutTransform en Silverlight. Hay algunas soluciones a este problema que aparece aquí .

La idea aquí es proporcionar una tela intermedia que consigue cambiar de tamaño y, como resultado, cambia el tamaño del área de desplazamiento. Por ejemplo, si tengo el siguiente XAML:

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="200" />
        <RowDefinition Height="25" />
    </Grid.RowDefinitions>
        <ScrollViewer Grid.Row="0" x:Name="sc" VerticalScrollBarVisibility="Auto" 
                      HorizontalScrollBarVisibility="Auto" Width="200" Height="200" >
        <Canvas x:Name="sizer" Width="200" Height="200">
            <Rectangle x:Name="gradientRect" Width="200" Height="200">
            <Rectangle.RenderTransform>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
            </Rectangle.RenderTransform>
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="Red" Offset="0.1"/>
                        <GradientStop Color="Yellow" Offset="0.5"/>
                        <GradientStop Color="Red" Offset="0.9"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Canvas>
    </ScrollViewer>
    <Button Grid.Row="1" Content="Multiply by Two" Click="ScaleRect" Width="100" Height="25"></Button>
</Grid>

Se dará cuenta de que puse la <Canvas x:Name="sizer"/> entre el <ScrollViewer/> y <Rectangle/> y el evento click del ScaleRect en el <Button/>.

El sub ScaleRect simplemente escala el rectángulo 2. Este valor se utiliza para cambiar el sizer Width y Height, actualizando así las barras de desplazamiento del ScrollViewer. Aquí está la sub para ScaleRect:

Private Sub ScaleRect(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim zoom As Double = 2.0
    Dim scaleX = gradientRect.RenderTransform.GetValue(ScaleTransform.ScaleXProperty)
    Dim scaleY = gradientRect.RenderTransform.GetValue(ScaleTransform.ScaleYProperty)
    gradientRect.RenderTransform.SetValue(ScaleTransform.ScaleXProperty, scaleX * zoom)
    gradientRect.RenderTransform.SetValue(ScaleTransform.ScaleYProperty, scaleY * zoom)
    sizer.Height *= zoom
    sizer.Width *= zoom
End Sub