使用模板 WPF 自定义 ListBoxItems

Question

这个问题是关于 WPF 中 XAML 的布局。我有一个特定的布局要遵循。 ListBoxItems 计数告诉它将显示多少图像。图像来自具有属性数据和文本的集合列表。每个图像上面都有绑定到文本的文本。数据保存图像源/路径值。这可能是动态值，但对于此示例列表。

一个 | BC | D E | F G |嗨 | Ĵ 苹果 |男孩猫 |狗蛋 |范山羊 |母鸡冰 |果冻

此处的 Apple 和 Boy 以及其他名称是图像。我的主要问题是如何才能拥有这种布局。我需要将它按 2 个图像（如 A 和 B）进行分组，但用 | 分隔（分隔块图像）。 每行最多显示 5 对图像。下一组图像将放在下一行。

我目前的测试代码：

` 公共类视图模型 { 公共字符串文本 { 获取；放; } 公共字符串文件路径 { 获取；放; } } /// /// MainWindow.xaml 的交互逻辑 /// 公共部分类 MainWindow : 窗口 { 公共主窗口（） { 初始化组件（）； 列表列表项 = 新列表（）； 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 中，使用 UniformGrid ItemsPanelTemplate 创建一个 ListBox

使用UniformGrid，您可以控制最大列数。

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

4.在您的 App 资源或 Window 资源中定义 DataTemplate：

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

您可能需要调整一些样式，但这基本上是您需要的步骤。