Template WPFを使用してListBoxItemをカスタマイズする

Question

この質問は、WPFのXAMLでのレイアウトについてです。私はそれに続く特定のレイアウトがあります。 ListBoxItemsカウントは、表示するイメージの数を示します。画像は、プロパティDataとTextを持つコレクションリストから取得されます。各画像にはテキストがあり、テキストにバインドされています。データは、画像ソース/パス値を保持する。これは動的値ですが、この例のリストです。

 
    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.例えば、項目のスタイルを1つのペアにコントロールを作成します。項目

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

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

2のペアのためのViewModelを作成します。あなたのメインウィンドウXAML、CRで

<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：このようなUniformGridItemsPanelTemplate

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; 

スタイリングを調整する必要があるかもしれませんが、基本的にはn eed。