Anpassen von ListBoxItems mit Vorlage WPF

Question

Diese Frage bezieht sich auf Layout in XAML in WPF. Ich habe ein bestimmtes Layout zu folgen. Die ListBoxItems-Anzahl gibt an, wie viele Bilder angezeigt werden. Die Bilder stammen aus einer Auflistungsliste mit den Eigenschaften Daten und Text. Jedes Bild hat einen Text darüber, der an Text gebunden ist. Die Daten enthalten die Bildquellen-/Pfadwerte. Dies könnten dynamische Werte sein, aber für diese Beispielliste.

 
    A | B  C | D  E | F  G | H  I | J 
Apple | Boy  Cat | Dog  Egg | Fan  Goat | Hen Ice | Jelly 

Die Apple und Boy und andere Namen hier sind Bilder. Mein Hauptproblem ist, wie ich es schaffen kann, dieses Layout zu haben. In dem muss ich es durch 2 Bilder wie A und B gruppieren, aber getrennt mit | (ein Trennblockbild). Das maximale Bildpaar, das pro Zeile angezeigt werden soll, ist 5. Die nächste Gruppe von Bildern wird in die nächste Zeile eingefügt.

Mein aktueller Testcode:

` 
    public class ViewModel 
    { 
     public string Text { get; set; } 
     public string FilePath { get; set; } 
    } 

    /// 
    /// Interaction logic for MainWindow.xaml 
    /// 
    public partial class MainWindow : Window 
    { 
     public MainWindow() 
     { 
      InitializeComponent(); 
      List listItems = new List(); 
      listItems.Add(new ViewModel() { Text = "A", Data = "ListBoxTest;component/Images/Apple.png" }); 
      listItems.Add(new ViewModel() { Text = "B", Data = "ListBoxTest;component/Images/Boy.png" }); 
      listItems.Add(new ViewModel() { Text = "C", Data = "ListBoxTest;component/Images/Cat.png" }); 
      listItems.Add(new ViewModel() { Text = "D", Data = "ListBoxTest;component/Images/Dog.png" }); 
      listItems.Add(new ViewModel() { Text = "E", Data = "ListBoxTest;component/Images/Egg.png" }); 
      listItems.Add(new ViewModel() { Text = "F", Data = "ListBoxTest;component/Images/Fan.png" }); 
      listItems.Add(new ViewModel() { Text = "G", Data = "ListBoxTest;component/Images/Goat.png" }); 
      listItems.Add(new ViewModel() { Text = "H", Data = "ListBoxTest;component/Images/Hen.png" }); 
      listItems.Add(new ViewModel() { Text = "I", Data = "ListBoxTest;component/Images/Ice.png" }); 
      listItems.Add(new ViewModel() { Text = "J", Data = "ListBoxTest;component/Images/Jelly.png" }); 

      myListBox.ItemsSource = listItems; 
     } 
    } 

<Style x:Key="listBoxItemStyle" 
     TargetType="ListBoxItem"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate> 
       <StackPanel> 
        <Grid> 
         <TextBlock Text="{Binding Text}" Margin="30" /> 
         <Image Name="pumpImage" 
           Source="{Binding Data}" 
           Width="100" 
           Height="100" /> 
        </Grid> 
       </StackPanel> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Bitte teilen Sie Ihre Gedanken oder Ideen, wie dies zu erreichen. Vielen Dank.

Answer 1

können Sie die folgenden Schritte aus:

1. ein Ansichtsmodell für ein Paar von Elementen erstellen

class PairViewModel 
{ 
    public string LeftText { get; set; } 
    public string LeftData { get; set; } 

    public string RightText { get; set; } 
    public string RightData { get; set; } 
} 

2. ein Steuerelement Stil ein einziges Paar von Elementen erstellen, zum Beispiel wie folgt aus:

<UserControl x:Class="WpfApplication2.PairControl" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WpfApplication" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300" d:DataContext="{d:DesignInstance local:PairViewModel}"> 
    <Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 

    <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding LeftText}" /> 
    <Image Grid.Row="1" Grid.Column="0" Source="{Binding LeftData}" /> 

    <Separator Grid.Column="1" Grid.RowSpan="2" Grid.Row="0" Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" /> 

    <TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding RightText}" /> 
    <Image Grid.Row="1" Grid.Column="2" Source="{Binding RightData}" /> 
    </Grid> 
</UserControl> 

3. In Ihrem Mainwindow XAML, cr eate eine List-Box mit einem UniformGridItemsPanelTemplate

Mit dem UniformGrid Sie die maximale Anzahl der Spalten steuern.

<Grid> 
    <ListBox x:Name="myListBox"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
     <UniformGrid Columns="5" /> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    </ListBox> 
</Grid> 

4. Definieren Sie eine DataTemplate in Ihrer App-Ressourcen oder in Ihrem Fenster Ressourcen:

<Window.Resources> 
    <DataTemplate DataType="{x:Type local:PairViewModel}"> 
    <local:PairControl /> 
    </DataTemplate> 
</Window.Resources> 

5. Füllen Sie Ihre PairViewModel mit Daten (Beispiel):

List<PairViewModel> pairs = new List<PairViewModel>(); 

pairs.Add(new PairViewModel {LeftText = "A", LeftData = "Apple.png", RightText = "B", RightData = "Boy.png"}); 
pairs.Add(new PairViewModel {LeftText = "C", LeftData = "Apple.png", RightText = "D", RightData = "Boy.png"}); 
pairs.Add(new PairViewModel {LeftText = "E", LeftData = "Apple.png", RightText = "F", RightData = "Boy.png"}); 
pairs.Add(new PairViewModel {LeftText = "G", LeftData = "Apple.png", RightText = "H", RightData = "Boy.png"}); 
pairs.Add(new PairViewModel {LeftText = "I", LeftData = "Apple.png", RightText = "J", RightData = "Boy.png"}); 
pairs.Add(new PairViewModel {LeftText = "K", LeftData = "Apple.png", RightText = "L", RightData = "Boy.png"}); 

myListBox.ItemsSource = pairs; 

Sie müssen möglicherweise einige Styling anpassen, aber das sind im Grunde die Schritte, die Sie n eed.