How can I perform RenderTransform within ScrollViewer (WP7)?
I've tried many ways to manage RenderTransform within ScrollViewer (Windows Phone 7 Silverlight), but it seems to me almost impossible now. What I got is Grid with with its sizes inside ScrollViewer and I want to change grid's content size from code by RenderTransform by it do nothing!
<ScrollViewer x:Name="scrollViewer" Width="800" Height="480" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
<Grid x:Name="grid" Width="1600" Height="960" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.RenderTransform>
<CompositeTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1"/>
</Grid.RenderTransform>
<Image x:Name="backgroundImage" Source="/Images/backgrounds/Happy rainbow.png" Stretch="Fill"/>
</Grid>
</ScrollViewer>
In code:
开发者_JAVA技巧 private void button_Click(object sender, RoutedEventArgs e)
{
(grid.RenderTransform as CompositeTransform ).CenterX = 0;
(grid.RenderTransform as CompositeTransform ).CenterY = 0;
(grid.RenderTransform as CompositeTransform ).ScaleX = 0.5;
(grid.RenderTransform as CompositeTransform ).ScaleY = 0.5;
grid.UpdateLayout();
}
Binding on Scale and Visual states do nothig too. I really would appreciate your help.
Better idea... put your Grid content into an ItemsControl, and perform a ScaleTransform on the ItemsControl.
<Grid>
<ItemsControl x:Name="ContentScaler">
<Image x:Name="backgroundImage" Source="/Images/backgrounds/Happy rainbow.png" Stretch="Fill"/>
</ItemsControl>
</Grid>
And in the code-behind...
ContentScaler.RenderTransform = new ScaleTransform() { ScaleX = 0.5, ScaleY = 0.5, CenterX = 0, CenterY = 0 };
Depending on what else you may need to do, you may need to do something like set a WrapPanel as the ItemsPanelTemplate and/or resize the ItemsControl when you do your scaling. It can get a little tricky, but hopefully this will get you pointed in the right direction.
The use of Grid in Silverlight tends to be a bit overused also, IMHO, unless one needs to break things into a table type layout. A Canvas may be better suited for what you are doing.
I'm not sure if this is exactly what you need but if you insert an extra grid like this...
<ScrollViewer Grid.Row="1" x:Name="scrollViewer"
Width="800"
Height="480"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible">
<Grid x:Name="grid"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Grid
Width="1600"
Height="960">
<Grid.RenderTransform>
<CompositeTransform x:Name="scaleTransform"
ScaleX="1"
ScaleY="1" />
</Grid.RenderTransform>
<Image x:Name="backgroundImage"
Source="ApplicationIcon.png"
Stretch="Fill" />
</Grid>
</Grid>
</ScrollViewer>
at least the contents will get scaled..
精彩评论