ScaleTransform doesn't work correctly

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>

---