如何在带有ColumnDefintions的Grid的ListView中的WPF中添加标题行?

时间:2019-01-17 10:39:35

标签: c# wpf xaml mvvm header

我正在使用ViewModel将数据绑定到每个文本块中的视图。我将代码缩短到最重要的部分。

现在,我想在此结构中添加标题行。因此,下面在Grid.RowDefinitions shoudl中定义的每个Column都有恒定的标题文本。知道我怎么能实现吗?

    <Grid>
    <ListView DockPanel.Dock="Top" Margin="10" ItemsSource="{Binding CurrentView}">
        <ListView.ItemTemplate>
            <DataTemplate DataType="viewModel:ViewModel">
                <Border BorderBrush="Black" BorderThickness="1" Margin="1">
                    <Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black">
                        <Expander.Header>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                                <TextBlock Grid.Column="0" Width="20" Text="{Binding Model.Number, StringFormat='#{0}', Mode=OneWay}" TextAlignment="Left" Margin="5" />
                                <Image Grid.Column="1" />
                                <TextBlock Grid.Column="2" TextAlignment="Center" Margin="5" Width="50">
                                    <Hyperlink />
                                </TextBlock>
                                <TextBlock Grid.Column="3" TextAlignment="Left" Margin="5" TextWrapping="Wrap" />
                                <TextBlock Grid.Column="4" TextAlignment="Center" Margin="5" Width="100" />
                                <Button Grid.Column="5" />
                            </Grid>
                        </Expander.Header>
                        <GroupBox Header="Description" FontWeight="Bold">
 <TextBlock Text="{Binding Model.Description, Mode=OneWay}" TextWrapping="Wrap" FontWeight="Normal" TextAlignment="Left" Margin="5" />
                        </GroupBox>
                    </Expander>
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

好的,你们是一个很好的帮助:)我将结构更改为下面的代码,并且标头正常工作!

但是在我的原始代码中,有这个扩展器。在该行的任何地方,我都可以单击以展开说明。现在,扩展器无法与新设计一起使用。有任何想法吗? 基本上我想要这样的东西:

<ListView Name="test2" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Items}">
        <ListView.View>
            <GridView>
              <Expander>
              <Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black">
                <Expander.Header>
                <GridView.Columns>
                    <GridViewColumn Header="Column1">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Title}"> </TextBlock>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="Column2">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Test}"></TextBlock>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView.Columns>
                </Expander.Header>
                <TextBlock Text="Here goes the Description" />
                <Expander>
            </GridView>
        </ListView.View>
    </ListView>

How it should look like(请忽略我的绘画技能)

1 个答案:

答案 0 :(得分:0)

这将为每列提供一个标题,但是我不确定这是否是您的意图:

<ListView x:Name="test" DockPanel.Dock="Top" Margin="10" ItemsSource="{Binding CurrentView}">
            <ListView.ItemTemplate>
                <DataTemplate DataType="viewModel:ViewModel">
                    <Border BorderBrush="Black" BorderThickness="1" Margin="1">
                        <Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black">
                            <Expander.Header>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Label Grid.Column="0">Column 1</Label>
                                    <Label Grid.Column="1">Column 2</Label>
                                    <Label Grid.Column="2">Column 3</Label>
                                    <Label Grid.Column="3">Column 4</Label>

                                    <TextBlock Grid.Column="0" Width="20" Text="{Binding Model.Number, StringFormat='#{0}', Mode=OneWay}" TextAlignment="Left" Margin="5" />
                                    <Image Grid.Column="1" />
                                    <TextBlock Grid.Column="2" TextAlignment="Center" Margin="5" Width="50">
                            <Hyperlink />
                                    </TextBlock>
                                    <TextBlock Grid.Column="3" TextAlignment="Left" Margin="5" TextWrapping="Wrap" />
                                    <TextBlock Grid.Column="4" TextAlignment="Center" Margin="5" Width="100" />
                                    <Button Grid.Column="5" />
                                </Grid>
                            </Expander.Header>
                        </Expander>
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

一个更好的结构应该看起来像这样(示例,您应该对其进行修改以满足您自己的需求):

 <ListView Name="test2" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Items}">
            <ListView.View>
                <GridView>
                    <GridView.Columns>
                        <GridViewColumn Header="Column1">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Title}"></TextBlock>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="Column2">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Test}"></TextBlock>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>

我认为我现在了解您要达到的目标

我测试了此解决方案,并且效果很好,请尝试使用您自己的数据进行尝试:

<CollectionViewSource x:Key='key' Source="{Binding Source={StaticResource MyData}}">
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="@Catalog" />
        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>
</Window.Resources>

<ListView ItemsSource='{Binding Source={StaticResource key}}' BorderThickness="0,0,0,0">
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                    <Setter Property="Margin" Value="0,0,0,5"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type GroupItem}">
                                <Expander IsExpanded="True"
                                          BorderBrush="Gray"
                                          BorderThickness="0,0,0,1">
                                    <Expander.Header>
                                        <DockPanel>
                                            <TextBlock  Text="{Binding Path=Name}" Margin="5,0,0,0" Width="100"/>
                                            <TextBlock  Text="{Binding Path=Item}"/>
                                        </DockPanel>
                                    </Expander.Header>
                                    <Expander.Content>
                                        <ItemsPresenter />
                                    </Expander.Content>
                                </Expander>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GroupStyle.ContainerStyle>
        </GroupStyle>
    </ListView.GroupStyle>

    <ListView.View>
        <GridView>
            <GridViewColumn Header="ID"
                    DisplayMemberBinding="{Binding ID}"
                    Width="100" />
            <GridViewColumn Header="Titel"
                    DisplayMemberBinding="{Binding This}"
                    Width="100" />
            <GridViewColumn Header="Date"
                    DisplayMemberBinding="{Binding Should}"
                    Width="100" />
            <GridViewColumn Header="Something"
                    DisplayMemberBinding="{Binding Work}"
                    Width="100" />
        </GridView>
    </ListView.View>
</ListView>

外观:

enter image description here