Igie
Igie

Reputation: 33

C# WPF Extending ListView row

I have ListView and I want the last item in the row displayed below the actual row items. Raw copy of xaml:

<ListView x:Name="ListViewRotations" FontFamily="Consolas" MouseDoubleClick="ListViewRotations_MouseDoubleClick">
        <ListView.ContextMenu>
            <ContextMenu>
                <MenuItem Header="Remove" Click="ContextMenuItemRemoveClicked" />
            </ContextMenu>
        </ListView.ContextMenu>
        <ListView.View>
            <GridView>
                <GridViewColumn Width="120" Header="Max Craftsmanship" DisplayMemberBinding="{Binding RotationInfo.MaxCraftsmanship}" />
                <GridViewColumn Width="120" Header="Min Craftsmanship" DisplayMemberBinding="{Binding RotationInfo.MinCraftsmanship}" />
                <GridViewColumn Width="80" Header="Min Control" DisplayMemberBinding="{Binding RotationInfo.MinControl}" />
                <GridViewColumn Width="50" Header="CP" DisplayMemberBinding="{Binding RotationInfo.CP}" />
                <GridViewColumn Width="130" Header="Score" DisplayMemberBinding="{Binding RotationInfo.Score}" />
                <GridViewColumn Width ="Auto" Header="Rotation Time" DisplayMemberBinding="{Binding RotationInfo.RotationTime}" />
                <GridViewColumn Width ="Auto" Header="Rotation" >
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <ListBox ItemsSource="{Binding Images}">
                                <ListBox.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </ListBox.ItemsPanel>
                                <ListBox.ItemContainerStyle>
                                    <Style TargetType="ListBoxItem">
                                        <Setter Property="BorderThickness" Value="1"/>
                                        <Setter Property="Margin" Value="0"/>
                                        <Setter Property="Padding" Value="0"/>
                                    </Style>
                                </ListBox.ItemContainerStyle>
                                <ListBox.ItemTemplate>
                                    <DataTemplate DataType="CraftingActionContainer">
                                        <Grid Height="25">
                                            <Image Width="25" Height="25" Source ="{Binding BitmapSource}"  VerticalAlignment="Top" />
                                        </Grid>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>

As you can see, last item is actually a ListBox and since it is quite long I want it to appear on new line. So far I only thought of creating 2 types of items, one with text data and the other for holding the last item and using template selector. Maybe you know of other ways. Thanks in advance.

Edit: Images included.

Current result

Wanted result

Generally speaking, is it possible to separate last item from row and modify it so it appears below other items

Upvotes: 1

Views: 142

Answers (1)

Ugur
Ugur

Reputation: 1256

You can use DataGrid with row details;

<Grid Margin="10">
    <DataGrid Name="dgUsers" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
            <DataGridTextColumn Header="Birthday" Binding="{Binding Birthday}" />
        </DataGrid.Columns>
        <DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Details}" Margin="10" />
            </DataTemplate>
        </DataGrid.RowDetailsTemplate>
    </DataGrid>
</Grid>

Full tutorial you can find here: Row Details

Upvotes: 1

Related Questions