XAML: faire une barre de défilement montrent ScrollViewer lorsque le ScaleTransform d'un objet enfant devient grand

Question

Je fais une sorte de contrôle « Aperçu avant impression » pour certains documents dans mon application Silverlight 3. J'ai une toile (pour montrer le document) à l'intérieur d'un ScrollViewer, et je zoom dans / zoom sur les boutons qui contrôlent les propriétés X et Y échelle du ScaleTransform pour la propriété Canvas.RenderTransform. Je veux que les barres de défilement du ScrollViewer pour montrer quand je « zoom avant » assez de telle sorte que la toile est plus visible dans la zone ScrollViewer, mais il semble qu'ils ne se manifestent que selon la largeur / hauteur du canevas lui-même, quel que soit si elle est zoomé ou non.

Quelqu'un peut-il aider?

Answer 1

Oui, le problème est qu'il n'y a pas LayoutTransform dans Silverlight. Il y a des solutions de contournement à ce problème la liste .

L'idée ici est de fournir une toile intermédiaire qui obtient redimensionnée et par conséquent, redimensionne la zone défilante. Par exemple, si je le XAML suivant:

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

Vous remarquerez que je mets le <Canvas x:Name="sizer"/> entre le <ScrollViewer/> et <Rectangle/> et l'événement click de ScaleRect dans le <Button/>.

Le sous ScaleRect échelles simplement le rectangle par 2. Cette valeur est ensuite utilisée pour changer le sizer de Width et Height, mettant ainsi à jour les barres de défilement du ScrollViewer. Voici le sous pour 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