XAML: Bilden Sie eine Scrollbalken Scroll zeigen, wenn die Scaletransform eines Kindes Objekt wird groß

Question

Ich mache eine Art „Druckvorschau“ -Steuerung für einige Dokumente in meinem Silverlight 3-Anwendung. Ich habe ein Leinwand (für das Dokument angezeigt) innerhalb eines Scroll, und ich habe Zoom in / Zoom-out-Tasten, die die X- und Y-Skala Eigenschaften der Scaletransform für die Canvas.RenderTransform Eigenschaft steuern. Ich mag die Bildlaufleisten des Scroll bis zeigen, wenn ich „zoomen“ genug, so dass die Leinwand nicht mehr sichtbar in dem Scrollbereich, aber es scheint, dass sie zeigen sich nur auf der Breite abhängig / Höhe der Leinwand selbst, und zwar unabhängig ob es vergrößert oder nicht.

Kann mir jemand helfen?

Answer 1

Ja, das Problem ist, dass es keine LayoutTransform in Silverlight ist. Es gibt einige Workarounds für dieses Problem aufgeführt Sie hier .

Die Idee hier ist eine Zwischen Leinwand zu schaffen, und als Folge der Größe verändert wird, ändert die Größe des rollbaren Bereich. Zum Beispiel, wenn ich die folgenden XAML habe:

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

Sie werden bemerken, dass ich die <Canvas x:Name="sizer"/> zwischen dem <ScrollViewer/> setzen und <Rectangle/> und dem Click-Ereignis von ScaleRect in der <Button/>.

Die ScaleRect Unterskalen einfach das Rechteck von 2. Dieser Wert dann, so die des Scrollscrollbalken Aktualisierung verwendet wird, um die sizer Width und Height zu ändern. Hier ist die Unter für 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