WPF - GridView.GridViewColumn 每行两行？答案

【问题标题】：WPF - GridView.GridViewColumn two lines per row?WPF - GridView.GridViewColumn 每行两行？
【发布时间】：2015-08-05 23:03:01
【问题描述】：

您好，是否可以有一个 ListView -> ListView.View -> GridView -> GridViewColumn，每行有“两行”。
例如。
第 1 栏 |第 2 栏
第 1 行等等          |数据
            等等
第 2 行等           |更多

我尝试使用单元格模板失败，但模板内的项目在手动调整其包含列的大小时没有调整大小。

代码：

        <ListView Height="238" DockPanel.Dock="Top" ItemsSource="{Binding Blah}" 
              SelectedItem="{Binding Path=Selectedblah, UpdateSourceTrigger=PropertyChanged}">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="No." DisplayMemberBinding="{Binding Path=Id}" Width="25" />
                <GridViewColumn Header="Job Type" DisplayMemberBinding="{Binding Path=Something}" Width="165" />
                <GridViewColumn Header="Assigned To" DisplayMemberBinding="{Binding Path=SomethingElse}" Width="90" />
                <GridViewColumn Header="Created" DisplayMemberBinding="{Binding Path=DateCreated, Converter={StaticResource dateTimeFormat}, ConverterParameter='dd/MM/yy HH:mm'}" Width="65" />
                <GridViewColumn>
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="/Streetcar.UI.Modules.FleetTracker;component/Resources/Images/tick.png" Visibility="{Binding IsCompleted, Converter={StaticResource boolToVis}}" />
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>

有什么想法吗？

编辑：这是使用 MVVM，所以在有界 ViewModel 后面没有代码

【问题讨论】：

标签： c# wpf gridview listview mvvm

【解决方案1】：

好的，我会再试一次。您是否尝试过将CellTemplate 与TextBlock 与TextWrapping 设置为Wrap？

例如：

<ListView x:Name="MyListView">
   <ListView.View>
      <GridView>
         <GridViewColumn Header="Hello"
                         Width="50">
            <GridViewColumn.CellTemplate>
               <DataTemplate>
                  <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non nibh quis odio aliquet venenatis."
                             TextWrapping="Wrap"/>
               </DataTemplate>
            </GridViewColumn.CellTemplate>
         </GridViewColumn>
         <GridViewColumn Header="World"/>
      </GridView>
   </ListView.View>

   <ListViewItem/>
   <ListViewItem/>
   <ListViewItem/>
   <ListViewItem/>
</ListView>

【讨论】：

嘿 ascalonx 您的答案和 decasteljaus 的答案的组合就是解决方案。干杯。

【解决方案2】：

首先，CellTemplate 是在单元格中包含自定义内容的方法。例如，您可以在 CellTemplate 中有一个垂直 StackPanel。

接下来，要在更改列宽时自动调整单元格内容的大小，您需要在 ListViewItem 上指定 HorizontalContentAlignment="Stretch"：

<ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</ListView.ItemContainerStyle>

【讨论】：

嘿 decasteljau 结合您的答案和 ascalonx 的答案就是解决方案。干杯。

【解决方案3】：

请耐心等待，因为我不能 100% 确定这就是您的要求。但是，假设您希望每行下方有更多文本（例如outlook autopreview feature），我想我可以提供帮助。

您需要覆盖ListViewItem 的默认样式并更改ControlTemplate 以在GridViewRowPresenter 下方添加TextBlock。完成后，它看起来像这样：

<Style TargetType="ListViewItem">
   <Setter Property="SnapsToDevicePixels" Value="true"/>
   <Setter Property="OverridesDefaultStyle" Value="true"/>
   <Setter Property="Template">
   <Setter.Value>
      <ControlTemplate TargetType="ListBoxItem">
         <Border Name="Border"
                 Padding="2"
                 SnapsToDevicePixels="true"
                 Background="Transparent">
            <StackPanel>
               <GridViewRowPresenter Columns="{TemplateBinding GridView.ColumnCollection}"  
                                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
               <TextBlock Text="This is where your text goes!"/>
            </StackPanel>
         </Border>

         <ControlTemplate.Triggers>
            <Trigger Property="IsSelected" Value="true">
               <Setter TargetName="Border"
                       Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
               <Setter Property="Foreground" 
                       Value="{StaticResource DisabledForegroundBrush}"/>
            </Trigger>
         </ControlTemplate.Triggers>
         </ControlTemplate>
   </Setter.Value>
   </Setter>
</Style>

您可能需要对Width 与TextBlock 进行绑定，以便将其包裹在ListView 中，但这应该可以帮助您入门。

【讨论】：

我认为这不是我要寻找的 ascalonx。似乎只是为每一行添加了一个静态行。我希望将长内容推送到第二行。仅在一列内。
哦...对不起，我误解了。我将不得不考虑一下，看看我是否无法提出解决方案。
现在是老问题，但这是我一直在寻找的。不知道简单地提出新问题的礼仪，所以这个答案是分开的 - 有点囤积代表的味道。

【解决方案4】：

这就是我所做的。

            <GridView ColumnHeaderToolTip="Addendum Master" >
                    <GridViewColumn Width="500">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>                                    
                                <StackPanel Orientation="Vertical" Margin="0">
                                    <Label Content="{Binding Path=Line1}" Padding="0" Margin="0" Style="{StaticResource GridLabelStyle}"></Label>
                                    <Label Content="{Binding Path=Line2}" Padding="0" Margin="0" Style="{StaticResource GridLabelStyle}"></Label>
                                    <Label Content="{Binding Path=Line3}" Padding="0" Margin="0" Style="{StaticResource GridLabelStyle}"></Label>
                                    <Label Content="{Binding Path=Line4}" Padding="0" Margin="0" Style="{StaticResource GridLabelStyle}"></Label>
                                </StackPanel>                                                                        
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView.Columns>
            </GridView>
        </ListView.View>
    </ListView>

【讨论】：

【解决方案5】：

我认为这是一个简单的解决方案，可以解决许多人在每条记录 2 行时遇到的问题，同时仍然能够使用 gridview 控件附带的分页和排序等。我会给你代码并尽力解释它。

    <Columns>                            
        <asp:BoundField DataField="CPTCode" HeaderText="CPTCode" ItemStyle-CssClass="center" SortExpression="CPTCode" >
            <ItemStyle CssClass="center" />
        </asp:BoundField>

            <asp:BoundField DataField="InsPlanCode" HeaderText="InsPlanCode" ItemStyle-CssClass="center" SortExpression="InsPlanCode" >
            <ItemStyle CssClass="center" />
        </asp:BoundField>

            <asp:BoundField DataField="StartDate" HeaderText="Start Date" ItemStyle-CssClass="center" SortExpression="StartDate" >
            <ItemStyle CssClass="center" />
        </asp:BoundField>

            <asp:BoundField DataField="EndDate" HeaderText="End Date" ItemStyle-CssClass="center" SortExpression="EndDate" >
            <ItemStyle CssClass="center" />
        </asp:BoundField>

        <asp:BoundField DataField="UserName" HeaderText="UserName" ItemStyle-CssClass="center" >
            <ItemStyle CssClass="center" />
        </asp:BoundField>   

        <asp:TemplateField HeaderText=" " ItemStyle-CssClass="center" HeaderStyle-BackColor="AliceBlue" ItemStyle-BackColor="AliceBlue">                                
            <ItemTemplate>        

                </td>
                </tr>
                <tr>
                    <td align="center" nowrap>&nbsp;<b>Message</b>&nbsp;</td>
                    <td colspan="10"><TABLE cellpadding=5><tr><td><%# Eval("carveOutMessage")%></td></tr></TABLE>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>

</asp:GridView>

诀窍在于自定义 TemplateField ItemTemplate。

首先要知道的是，当您创建 TemplateField 时，在 html 源代码中呈现的是一个新的打开和关闭 TD 标记。在创建最后一列后，它会使用结束标记关闭该行。因此，创建打开和关闭的模板字段以及打开和关闭 ItemTemplate 标记。在里面，你要做的第一件事是关闭打开的 td 标记“”，然后关闭打开的 tr 标记“”。然后创建一个新行和一个新列标签。现在，如果该列需要为某种描述或注释列加宽。使用 columnspan = 10 或你需要的任何数量。因为 Templatefield 将关闭 TD 标签，所以您的最后一个 td 标签不应该有一个结束标签，您的最后一行也不应该有一个结束 TR 标签，因为这将在结束标签所在的位置被关闭。

我希望这会有所帮助，并且足够清晰以供人们理解。您可以使用此方法为每条记录创建任意数量的行。如果您对 html 和表格有任何好处，也可以做任何其他格式的事情。关键是要记住，当您开始时，您在打开的 td 和 tr 标记内进行格式化，最后它将写入关闭的 td 和 tr 标记，因此您的最后一列和最后一行保持打开状态。

【讨论】：