2014-09-29 6 views
0

Моя идея заключается в том, чтобы создать пользовательский элемент управление плитки, которая используется в качестве Живой плитки (рендеринг его в растровом изображение и использовать в качестве плитки фона) и в моем приложении в LongListSelector. Используя тот же элемент управления для обоих сценариев, он гарантирует, что он будет выглядеть одинаково.ScaleTransform не работает правильно

Вот краткий пример моего таможенного контроля Плитки:

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> 

Это результат:

enter image description here

Красный прямоугольник мой пользовательский элемент управления Плитка с ScaleTransform. После преобразования он снова должен быть квадратом, уменьшен с 336x336 до 168x168 (просто пример). На изображении выше высота правильная, но ширина слишком мала.

Это странно, потому что если я изменить размер моего таможенного контроля плитки на 200x200 пикселей и использовать тот же ScaleTransform с коэффициентом 0,5 он будет масштабироваться вниз правильно.

ответ

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> 

enter image description here

+0

Да, вы правы, но почему это влияет только на ширину, а не высоту? –

+0

Если я применяю ScaleTranform к объекту Grid, возвращаемому методом GetTileLayout(), он также не работает. –

+0

Кроме того, избавиться от всех ваших '', он правильно преобразит его. Я немного обновлю решение. –