使用模板 WPF 自定义 ListBoxItems

Question

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

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

这里的Apple和Boy等名字都是图片。我的主要问题是如何设法拥有这种布局。其中我需要将它按 A 和 B 等 2 个图像分组，但用 | 分隔（分隔块图像）。每行最多显示 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 中，创建一个带有 UniformGrid ItemsPanelTemplate

的列表框

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

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

4.在您的应用程序资源或 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;

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

使用模板 WPF 自定义 ListBoxItems

Customize ListBoxItems using Template WPF

wpf

listbox

controltemplate

listboxitem