ScaleTransform doesn't work correctly - xaml

Question

My idea is to create custom Tile control which is used as Live Tile (rendering it to a bitmap image and use as tile background) and within my app in a LongListSelector. By using the same control for both scenarios it ensures that it will look identical.
Here a short sample of my custom Tile control:
public class Tile : ContentControl
{
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
Content = GetTileLayout();
}
private Grid GetTileLayout()
{
double width = 336;
double height = 336;
StackPanel panel = new StackPanel();
TextBlock contentTextBlock = new TextBlock();
// ...
Grid layoutRoot = new Grid();
layoutRoot.Background = new SolidColorBrush(Colors.Red);
layoutRoot.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
layoutRoot.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
layoutRoot.Width = width;
layoutRoot.Height = height;
layoutRoot.Children.Add(panel);
layoutRoot.Measure(new Size(width, height));
layoutRoot.Arrange(new Rect(0, 0, width, height));
layoutRoot.UpdateLayout();
return layoutRoot;
}
}
If I want to use it in the LongListSelector then it needs to be scaled down from 336x336 to 200x200 pixels. I tried it with a simple ScaleTransform but the result is not the same as I expected.
<phone:LongListSelector x:Name="ItemList" ItemsSource="{Binding Items}" LayoutMode="Grid" GridCellSize="222,222">
<phone:LongListSelector.ItemTemplate>
<StackPanel Margin="12,12,0,0" Background="Blue">
<DataTemplate>
<common:Tile VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<common:Tile.RenderTransform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5" />
</common:Tile.RenderTransform>
</common:Tile>
</DataTemplate>
</StackPanel>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
This is the result:
The red rectangle is my custom Tile control with the ScaleTransform. After the transformation it should be a square again, scaled down from 336x336 to 168x168 (just an example). In the image above the height is correct but the width is too small.
It's strange because if I change the size of my custom Tile control to 200x200 pixels and use the same ScaleTransform with factor 0.5 it will be scaled down correctly.

Answer 1

Your GridCellSize is killing the transform. Make it bigger, try (400, 400). Also get rid of that StackPanel.
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border BorderBrush="HotPink" BorderThickness="1,1,1,1" Tap="Border_Tap" HorizontalAlignment="Left" VerticalAlignment="Top">
<Custom:Tile RenderTransformOrigin="0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Custom:Tile.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Custom:Tile.RenderTransform>
</Custom:Tile>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>