0

我的想法是创建自定义 Tile 控件，该控件用作Live Tile（将其渲染为位图图像并用作平铺背景）并在我的应用程序中的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>

这是结果：

在此处输入图像描述

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

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

4

1 回答 1

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>

在此处输入图像描述

于 2014-09-29T18:52:55.023 回答