Question

I have an image inside scroll viewer and i have a control for zooming the image and in zooming event i change the scale of an image ,as below :

void zoomSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            scale.ScaleX = e.NewValue;
            scale.ScaleY = e.NewValue;
          //scroll is a name of scrolviewer
            scroll.UpdateLayout();
        }

And a xaml below

<Grid x:Name="Preview" Grid.Column="1">
            <Border x:Name="OuterBorder" BorderThickness="1"  BorderBrush="#A3A3A3" >
                <Border x:Name="InnerBorder"  BorderBrush="Transparent" Margin="2" >
                    <Grid Background="White" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <ScrollViewer x:Name="scroll" HorizontalScrollBarVisibility="Auto" Grid.Column="0" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Themes:ThemeManager.StyleKey="TreeScrollViewer">
                            <Image  Source="../charge_chargeline.PNG"  >
                                <Image.RenderTransform>
                                    <CompositeTransform x:Name="**scale**" />
                                </Image.RenderTransform>
                            </Image>
                        </ScrollViewer>
                        <Border HorizontalAlignment="Center"   CornerRadius="0,0,2,2" Width="250" Height="24" VerticalAlignment="Top">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="#CDD1D4" Offset="0.0"/>
                                    <GradientStop Color="#C8CACD" Offset="1.0"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <ChargeEntry:Zoom  x:Name="zoominout" />
                        </Border>
                    </Grid>
                </Border>
            </Border>


        </Grid>

Answer 1

The problem here is that render transform take place much later in the rendering process. Later than the measure and arrange phases. The scroll viewer simply isn’t aware of any apparent size change caused by the scaling transform, it still thinks the contained element is of the size specified by the Actual properties.

One solution might be to use the LayoutTransform object from the Silverlight Toolkit. This will apply a transform as part of its layout and hence its Actual properties will reflect the scaled size. With this inside a ScrollViewer the scroll bars should behave as expected.