Настроить элементы ListBoxItems с использованием шаблона WPF

Question

Этот вопрос касается прокладки в XAML в WPF. У меня есть конкретный макет. Счетчик ListBoxItems показывает количество отображаемых изображений. Изображения поступают из списка коллекции, который имеет свойства Data и Text. Каждое изображение имеет текст выше, который привязывается к тексту. Данные содержат значения источника/пути изображения. Это могут быть динамические значения, но для этого списка примеров.

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

Яблоко и мальчик и другие названия здесь - изображения. Моя основная проблема заключается в том, как я могу получить этот макет. В которой мне нужно сгруппировать его на 2 изображения, такие как A и B, но разделенные на | (изображение блока разделителя). Максимальная пара изображений для отображения на строку равна 5. Следующий набор изображений будет помещен в следующую строку.

Мой текущий код теста:

` 
    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> 

Пожалуйста, поделитесь своими мыслями или идеями о том, как достичь этого. Спасибо.

Answer 1

Вы можете сделать следующие шаги:

1. Создайте ViewModel для пары элементов

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

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

2. Создайте управление стилем одну единственную пару элементов, например, как это:

<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. В вашей MainWindow XAML, кр ЭАТС в ListBox с UniformGridItemsPanelTemplate

С UniformGrid вы контролируете максимальное число столбцов.

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

4. Определить DataTemplate в ваших App ресурсов или в окне ресурсов:

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

5. Заполните PairViewModel с данными (пример):

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; 

Возможно, вам потребуется настроить некоторые стили, но это, в основном, шаги, которые вы n ПЕД.