メッセージのメッセージハブスタイルのリスト

Windows Phone 7用のアプリケーションを既に開発している場合、ハブタイル、グループ化されたリスト、メッセージのリストなど、いくつかのコントロールがないことに既に気付いているかもしれません。 それらの一部は、Silverlight Toolkit for Windows Phoneライブラリにあります。 しかし、標準のメッセージハブに似たアプリケーションを作成する必要がある場合はどうすればよいでしょうか？ 主な問題は、標準のLisBoxではアイテムが上から下に配置され、メッセージハブではアイテムが上から下に配置されることです。







この問題の解決策の1つを示したいと思います。 必要なのは、標準のListBoxコントロール、Blend SDKのSystem.Windows.Interactionライブラリ、および視覚コンポーネントの変換の分野に関する知識だけです。



だから。 前に言ったように、標準のListBoxは項目をVirtualizingStackPanelに上から下に配置します。 VirtualizingStackPanelの作成は、アイテムをボトムアップで配置するため、多くの時間がかかります。 さらに、標準のVirtualizingStackPanelには、大量のメモリを消費する問題を解決する仮想化ロジックが既に含まれています。 行う必要があるのは、ListBoxを上下逆にして、新しいアイテムが下に配置されるようにすることだけです。 これを行うには、ScaleTransformを使用します。

<ListBox> <ListBox.RenderTransform> <ScaleTransform ScaleX="1" ScaleY="-1"> </ListBox.RenderTransform> </ListBox>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、ListBoxは上下逆になりましたが、左になりました。 それを元の場所に戻すには、変換の中心を指定する必要があります。 私たちの場合、これは垂直方向の真ん中、つまり：

 _scaleTransform.CenterY = ListBox.ActualHeight / 2;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

お気づきかもしれませんが、リストボックスの要素も上下逆です。 それらを通常の位置に戻すために、リスト全体に使用したのと同じ方法を使用します。



MVVMのファンは、.xaml.csファイルで余分なコードを取得できます。 通常、System.Windows.InteractionライブラリからBehavior'ahにすべての追加ロジックを記述します。 これを行うには、コードでMirrorBehaviorクラスを作成します。

 public class MirrorBehavior : Behavior<Control> { private readonly ScaleTransform _transform = new ScaleTransform(); public MirrorBehavior() { _transform.ScaleX = 1; _transform.ScaleY = -1; } protected override void OnAttached() { UpdateCenter(); AssociatedObject.SizeChanged += AssociatedObject_SizeChanged; AssociatedObject.RenderTransform = _transform; } protected override void OnDetaching() { AssociatedObject.RenderTransform = null; AssociatedObject.SizeChanged -= AssociatedObject_SizeChanged; ResetCenter(); } private void AssociatedObject_SizeChanged(object sender, SizeChangedEventArgs e) { UpdateCenter(); } private void UpdateCenter() { _transform.CenterY = AssociatedObject.ActualHeight / 2; } private void ResetCenter() { _transform.CenterY = 0; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コントロールに適用するだけです。

 <ListBox ItemsSource="{Binding Messages}"> <i:Interaction.Behaviors> <Interactivity:MirrorBehavior /> </i:Interaction.Behaviors> <ListBox.ItemTemplate> <DataTemplate> <ContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ContentTemplate="{StaticResource MessageTemplate}" Content="{Binding}"> <i:Interaction.Behaviors> <Interactivity:MirrorBehavior /> </i:Interaction.Behaviors> </ContentControl> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このソリューションは、標準スタイルと組み込みの仮想化を使用するため、優れています。