XAML: crea ScrollViewer mostra barre di scorrimento quando il ScaleTransform di un oggetto figlio diventa grande

Question

Sto facendo una specie di controllo "anteprima di stampa" per alcuni documenti nella mia applicazione Silverlight 3. Ho un Canvas (per mostrare il documento) all'interno di un ScrollViewer, e ho pulsanti zoom in/out che controllano le proprietà X e Y Scale di ScaleTransform per la proprietà Canvas.RenderTransform. Voglio che le barre di scorrimento di ScrollViewer vengano visualizzate quando "eseguo l'ingrandimento" in modo tale che la tela non sia più visibile nell'area ScrollViewer, ma sembra che vengano visualizzate solo in base alla larghezza/altezza della tela stessa, indipendentemente se è ingrandito o meno.

Qualcuno può aiutare?

Answer 1

Sì, il problema è che non c'è LayoutTransform in Silverlight. Esistono alcune soluzioni alternative a questo problema elencato here.

L'idea è di fornire una tela intermedia che viene ridimensionata e, come risultato, ridimensiona l'area scorrevole. Per esempio, se ho il seguente 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> 

Si noterà che ho messo il <Canvas x:Name="sizer"/> tra il <ScrollViewer/> e <Rectangle/> e l'evento click del ScaleRect nel <Button/>.

Il ScaleRect sub scale semplicemente il rettangolo 2. Tale valore viene quindi utilizzato per modificare le sizerWidth e Height, aggiornando così scorrimento del ScrollViewer. Ecco il sub per 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