0

監視可能なコレクションとバインドするリストビューがあります。このリストビューには請求書の項目が表示されます。請求書の項目にはサブ詳細 (オプション) (項目の色など) がある可能性があります。質問したいのは: リストビューを表示する方法リストビューのメインアイテムの下にあるリストとしてのアイテムオプション、私の質問が明確であることを願っています..より明確にするために、画像を見てください：

ここに画像の説明を入力

私が欲しいのは黄色ですが、リストビューを画像のように見せる方法は?

これが私の請求書リストビューコードです:

            <ListView x:Name="temsReceipt" ItemsSource="{Binding ocItemsReceipt}">
            <ListView.View>
                <GridView ColumnHeaderContainerStyle="{StaticResource myHeaderStyle}">
                    <GridViewColumn>
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Height="40" Width="50"></TextBlock>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="Item Name" Width="230" DisplayMemberBinding="{Binding ItemName}"/>
                    <GridViewColumn Header="Item Price" Width="100" DisplayMemberBinding="{Binding ItemPrice}"/>
                </GridView>
            </ListView.View>

データグリッドを使用した場合も同じだと思います

4

1 に答える 1

1

次のクラスがあるとします。

class InvoiceItem
{
    public string ItemName { get; set; }
    public List<InvoiceOption> Options { get; set; }
}

class InvoiceOption
{
    public string OptionName { get; set; }
}

リストビュー ソリューション:

<ListView x:Name="temsReceipt" ItemsSource="{Binding}">
    <ListView.Resources>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.Resources>
    <ListView.View>
        <GridView>
            <GridViewColumn>
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Height="40" Width="50"></TextBlock>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <GridViewColumn Header="Item Name" Width="230" >
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>                                   
                            <TextBlock Text="{Binding ItemName}" VerticalAlignment="Center" 
                                       FontWeight="Bold" FontSize="18"/>
                            <ListBox ItemsSource="{Binding Options}" Grid.Row="1" Background="Yellow" 
                                     HorizontalAlignment="Stretch">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding OptionName}" />
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </Grid>                                
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <GridViewColumn Header="Item Price" Width="100" DisplayMemberBinding="{Binding ItemPrice}"/>
        </GridView>
    </ListView.View>
</ListView>

DataGrid を使用する場合は、RowDetailsTemplate を使用できます。

<DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding ItemName}" />
    </DataGrid.Columns>
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <StackPanel Margin="2" Background="Yellow">
                <TextBlock Text="Options:" />
                <ListBox ItemsSource="{Binding Options}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding OptionName}" />
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>

サンプルデータ：

...
public MainWindow()
{
    InitializeComponent();

    List<InvoiceItem> _source = new List<InvoiceItem>
    {
        new InvoiceItem
        {
          ItemName = "Item1",
          Options = new List<InvoiceOption>
          {
              new InvoiceOption { OptionName = "Option1" },
              new InvoiceOption { OptionName = "Option2" }
          }
        },
        new InvoiceItem
        {
          ItemName = "Item2",
          Options = new List<InvoiceOption>
          {
              new InvoiceOption { OptionName = "Option3" },
              new InvoiceOption { OptionName = "Option4" }
          }
        }
    };

    this.DataContext = _source;
}
...

リストビューの結果:

ここに画像の説明を入力

于 2013-08-17T17:14:51.303 に答える