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"/>
<G开发者_JS百科radientStop Color="#C8CACD" Offset="1.0"/>
</LinearGradientBrush>
</Border.Background>
<ChargeEntry:Zoom x:Name="zoominout" />
</Border>
</Grid>
</Border>
</Border>
</Grid>
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.
精彩评论