2011-07-05 7 views
0

これは、次の行に移動する前に3つのイメージを連続して表示するリストボックスです。これはこれまで行ってきたコードです。WPFリストボックス、複数の行と列のトップアラインメントの問題

<ListBox Name="lbListOfItemsOnHDD" Grid.Row="1" Grid.Column="0" Width="600" Height="450" Margin="5" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Hidden" HorizontalAlignment="Left" VerticalAlignment="Top"> 
        <ListBox.ItemsPanel> 
         <ItemsPanelTemplate> 
          <WrapPanel IsItemsHost="True" Orientation="Horizontal" Width="600" VerticalAlignment="Top" /> 
         </ItemsPanelTemplate> 
        </ListBox.ItemsPanel> 
        <ListBox.ContextMenu> 
         <ContextMenu Name="cmLibraryImages" x:Uid="cmLibraryImages"> 
          <MenuItem 
           Name="cmCmdDelete" 
           Header="Delete Selected Image" 
           Click="cmCmdDelete_Click" /> 
         </ContextMenu> 
        </ListBox.ContextMenu> 
       </ListBox> 

画像幅は常に同じであるので、これは常に次の行に移動する前に3枚の画像を表示する、唯一の問題は、これは、上部アライメントの問題を引き起こす私は画像下の画像のタイトルを希望されています写真が水平でない(下記のスクリーンショットを参照)。画像は、実行時に単純なforループを使用して追加され、画像、画像タイトルなどへのパスを含むリストを通過します。画像とテキストボックスはスタックパネルに追加されます。リストボックス。

Unaligned at the top images in WPF list box

は、私は、様々な異なる部分にVALIGNトップを使用して余白を変更しようとしたが、トップでそれらを揃えるために管理していません。

ご協力いただければ幸いです。

答えて

2

もう少し柔軟なやり方は、ListBoxのItemTemplateを設定してBindingで行うことです。 例:コードビハインドで

(またはそれ以上のviewmodelあなたはMVVMに従っている場合)あなたはそのようなクラスまたは構造体を作成します。

public struct Movie 
{ 
    String Title; 
    Uri Source; 
} 

、そのようなのObservableCollection:

public ObservableCollection<Movie> Movies 
{ 
    get; 
    set; 
} 

をMoviesコレクションをListBoxのItemsSourceとして設定します(コードビハインドまたはバインディングで)

最後にXAML

<ListBox.ItemTemplate> 
    <DataTemplate DataType="{x:Type typeOfTheAddedItem}"> 
    <StackPanel Height="500" Orientation="Vertical"> 
     <Image Source="{Binding Path=PathRelativeTotypeOfTheAddedItem}" /> 
     <TextBlock="{Binding Path=PathRelativeTotypeOfTheAddedItem}" /> 
    </StackPanel> 
    </DataTemplate> 
</ListBox.ItemTemplate> 
関連する問題