2014-09-29 10 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; 
    } 
} 

내가 다음은 336x336에서 200x200 픽셀로 축소 될 필요가있는 LongListSelector에서 사용하려면

. 간단한 ScaleTransform으로 시도했지만 결과가 예상 한 것과 같지 않습니다.

enter image description here

빨간색 사각형이 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> 

은 결과입니다. 변환 후에 다시 정사각형이어야하며 336x336에서 168x168로 축소됩니다 (예제 만). 위 이미지에서 높이가 정확하지만 너비가 너무 작습니다.

사용자 정의 타일 제어의하여 200x200 픽셀을 크기를 변경하고 올바르게 축소됩니다 요인 0.5와 같은 ScaleTransform를 사용하는 경우 때문에 이상한.

답변

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

GetTileLayout() 메서드에서 반환 된 Grid 객체에 ScaleTranform을 적용해도 작동하지 않습니다. –

+0

또한 ''을 모두 제거하면 올바르게 변형됩니다. 솔루션을 조금만 업데이트하겠습니다. –