Question

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

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

Apple和Boy以及其他名称都是图像。我的主要问题是如何设置这种布局。我需要将其分为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中，使用UniformGrid ItemsPanelTemplate

创建一个ListBox

使用UniformGrid控制最大列数。

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

<强> 4。在您的应用资源或您的窗口资源中定义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;

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

使用Template WPF自定义ListBoxItems

1 个答案: