ScaleTransform不能正常工作

Question

我的想法是创建自定义的Tile控件，它用作Live (将其呈现为位图图像并用作平铺背景)，并在LongListSelector中的应用程序中使用。通过在这两种场景中使用相同的控件，可以确保它看起来是相同的。

这里是我的自定义Tile控件的一个简短示例

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;
    }
}

如果我想在LongListSelector中使用它，那么它需要从336x336像素缩小到200x200像素。我尝试了一个简单的ScaleTransform，但结果与我预期的不一样。

<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>

其结果是：

​

​

红色矩形是我使用ScaleTransform的自定义Tile控件。在转换之后，它应该是一个正方形，从336x336缩小到168x168 (只是一个例子)。在上面的图像中，高度是正确的，但宽度太小。

这很奇怪，因为如果我将我的自定义Tile控件的大小更改为200x200像素，并使用相同的因子0.5的ScaleTransform，它将被正确地缩小。

Answer 1

你的GridCellSize正在扼杀变换。把它做大一点，试试(400,400)。也要去掉那个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>

​

​