WPF 목록 상자, 여러 행과 열 위쪽 맞춤 문제

Question

그래서 내가 가지고있는 코드는 다음 행으로 이동하기 전에 한 행에 3 개의 이미지를 표시하는 목록 상자입니다.

<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 루프를 사용하여 이미지, 이미지 제목 등의 경로를 포함하는 목록을 거치면서 추가됩니다. 이미지 및 텍스트 상자는 스택 패널에 추가 된 후 자체적으로 리스트 박스.

나는 여러 다른 부분에 vAlign와 위로를 사용하여 여백을 변경하려고했지만 상단을 정렬 할 관리하지 않았습니다.

도움을 주시면 감사하겠습니다.

Answer 1

좀 더 유연한 방법은 ListBox의 ItemTemplate을 설정하고 Binding을 사용하는 것입니다. 예 : 같은

public struct Movie 
{ 
    String Title; 
    Uri Source; 
} 

과 ObservableCollection에 :

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

코드 숨김에서

(또는 더 나은 뷰 모델은 MVVM을 따르는 경우) 당신은 클래스 또는 구조 그런를 만들 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>