WPF/Silverlight: Clipping to Grid Cell Size & RenderTransform - wpf

Question

I've a simple Grid defined this way:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
In every cell of the grid (except the upperleft cell) I add a Grid or Canvas. Into these containers I add several different objects. Some of these controls can change there viewing size because of zooming in or out and scrolling.
The original code is not my own, but I made a little test program to simulate the situation:
<Grid Grid.Column="1" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid x:Name="Frame" Grid.Row="0">
<Canvas Width="200" Height="300" Background="Green" >
<Canvas x:Name="Page" Width="200" Height="300" Background="Bisque" Margin="0 -20 0 0">
<Canvas.RenderTransform>
<ScaleTransform ScaleX="{Binding ElementName=Zoom, Path=Value}"
ScaleY="{Binding ElementName=Zoom, Path=Value}"
CenterX="100" CenterY="150" />
</Canvas.RenderTransform>
</Canvas>
</Canvas>
</Grid>
<Slider x:Name="Zoom" Grid.Row="1" HorizontalAlignment="Right" Width="200"
Minimum="0.1" Maximum="2" Value="1"
TickPlacement="BottomRight" TickFrequency="0.1" IsSnapToTickEnabled="True" />
The Page is too big and goes out of range, especially when I zoom in.
I try to add a Clip, but I do not know how to set the value dynamically.
<Grid x:Name="Frame" Grid.Row="0">
<Grid.Clip>
<!-- I want to bind to the actual size of the cell -->
<RectangleGeometry Rect="0 0 480 266" />
</Grid.Clip>
<Canvas Width="200" Height="300" Background="Green" >
....
Moreover, how can I get the actual size and position of the rendered canvas. I inserted Zoom_ValueChanged to read out the values after zooming, but Width & Height are still 200 or 300, ActualWidth & ActualHeight are both zero.
Thanks in advance.

Answer 1

Em1, make sure you are checking the ActualWidth and ActualHeight of the canvas after your content has finished loading (i.e. after the Loaded event has been raised).
Also, one way to get the size of a canvas taking into account all of the scale transformations that have been applied to it is to walk up the visual tree and apply all scale transforms to the ActualWidth and ActualHeight of a control:
public static Size GetActualSize(FrameworkElement control)
{
Size startSize = new Size(control.ActualWidth, control.ActualHeight);
// go up parent tree until reaching root
var parent = LogicalTreeHelper.GetParent(control);
while(parent != null && parent as FrameworkElement != null && parent.GetType() != typeof(Window))
{
// try to find a scale transform
FrameworkElement fp = parent as FrameworkElement;
ScaleTransform scale = FindScaleTransform(fp.RenderTransform);
if(scale != null)
{
startSize.Width *= scale.ScaleX;
startSize.Height *= scale.ScaleY;
}
parent = LogicalTreeHelper.GetParent(parent);
}
// return new size
return startSize;
}
public static ScaleTransform FindScaleTransform(Transform hayStack)
{
if(hayStack is ScaleTransform)
{
return (ScaleTransform) hayStack;
}
if(hayStack is TransformGroup)
{
TransformGroup group = hayStack as TransformGroup;
foreach (var child in group.Children)
{
if(child is ScaleTransform)
{
return (ScaleTransform) child;
}
}
}
return null;
}
To get the position of a control, you need to find its transformation relative to the containing window. Here's how:
public static Point TransformToWindow(Visual control)
{
var hwndSource = PresentationSource.FromVisual(control) as HwndSource;
if (hwndSource == null)
return new Point(-1, -1);
Visual root = hwndSource.RootVisual; // Translate the point from the visual to the root.
GeneralTransform transformToRoot = control.TransformToAncestor(root);
return transformToRoot.Transform(new Point(0, 0));
}