0

私の考えは、ライブ タイル(ビットマップ イメージにレンダリングし、タイルの背景として使用) として使用されるカスタム タイル コントロールを作成し、アプリ内で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 に縮小されます (ほんの一例)。上の画像では、高さは正しいのですが、幅が小さすぎます。

カスタム タイル コントロールのサイズを 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 に答える