带标题的多项目组合框？ [英] Multiple item combo box with headers?

问题描述

是否可能在组合框上的列标题绑定到多个项目？例如，显示人员姓名的组合框。组合框将显示John Doe。但我想显示列标题：

 第一页最后
 John Doe 
 Jane Doe 
 Jimmy Doe 
  

这是否可以不使用数据网格？
一个简单的解决方案，包括使用数据网格呢？我发现一个解决方案嵌入数据网格到组合框，但它看起来很困难，需要MS混合。

我会很高兴，如果我只能得到一些标题

这是我的xaml代码与HB的尝试，产生一个

  xmlns =http://schemas.microsoft.com/winfx/2006/xaml / presentation
 xmlns：x =http://schemas.microsoft.com/winfx/2006/xaml
 xmlns：dg =http://schemas.microsoft.com/wpf/2008 / toolkit
  

 < ComboBox Name =cboPlaceNamesGrid.IsSharedSizeScope =TrueItemsSource ={DynamicResource items}Height =22Width =285Margin =0,6,165,0SelectedIndex = 0Horizo​​ntalAlignment =RightVerticalAlignment =TopSelectionChanged =cboPlaceNames_SelectionChanged> 
< ComboBox.Resources> 
< CompositeCollection x：Key =items> 
< ComboBoxItem IsEnabled =False> 
< Grid TextElement.FontWeight =Bold> 
< Grid.ColumnDefinitions> 
< ColumnDefinition SharedSizeGroup =A/> 
< ColumnDefinition Width =5/> 
< ColumnDefinition SharedSizeGroup =B/> 
< ColumnDefinition Width =5/> 
< ColumnDefinition SharedSizeGroup =C/> 
< /Grid.ColumnDefinitions> 
< Grid.Children> 
< TextBlock Grid.Column =0Text =Name/> 
< TextBlock Grid.Column =2Text =CLLI/> 
< TextBlock Grid.Column =4Text =Street/> 
< /Grid.Children> 
< / Grid> 
< / ComboBoxItem> 
< Separator /> 
< CollectionContainer Collection ={Binding Source = {x：Reference cboPlaceNames}，Path = DataContext.Data}/> 
< / CompositeCollection> 
 
< DataTemplate DataType =x：Type obj：PlaceName> 
< Grid> 
< Grid.ColumnDefinitions> 
< ColumnDefinition SharedSizeGroup =A/> 
< ColumnDefinition Width =5/> 
< ColumnDefinition SharedSizeGroup =B/> 
< ColumnDefinition Width =5/> 
< ColumnDefinition SharedSizeGroup =C/> 
< /Grid.ColumnDefinitions> 
< Grid.Children> 
< TextBlock Grid.Column =0Text ={Binding Name}/> 
< TextBlock Grid.Column =2Text ={Binding CLLI}/> 
< TextBlock Grid.Column =4Text ={Binding Street}/> 
< /Grid.Children> 
< / Grid> 
< / DataTemplate> 
< /ComboBox.Resources> 
< / ComboBox> 
  

解决方案

示例：

 < ComboBox Name =cbGrid.IsSharedSizeScope =TrueItemsSource ={DynamicResource items}> 
< ComboBox.Resources> 
< CompositeCollection x：Key =items> 
< ComboBoxItem IsEnabled =False> 
< Grid TextElement.FontWeight =Bold> 
< Grid.ColumnDefinitions> 
< ColumnDefinition SharedSizeGroup =A/> 
< ColumnDefinition Width =5/> 
< ColumnDefinitions SharedSizeGroup =B/> 
< /Grid.ColumnDefinitions> 
< Grid.Children> 
< TextBlock Grid.Column =0Text =Name/> 
< TextBlock Grid.Column =2Text =Occupation/> 
< /Grid.Children> 
< / Grid> 
< / ComboBoxItem> 
< Separator /> 
< CollectionContainer Collection ={Binding Source = {x：Reference cb}，Path = DataContext.Data}/> 
< / CompositeCollection> 
 
< DataTemplate DataType ={x：Type obj：Employee}> 
< Grid> 
< Grid.ColumnDefinitions> 
< ColumnDefinition SharedSizeGroup =A/> 
< ColumnDefinition Width =5/> 
< ColumnDefinition SharedSizeGroup =B/> 
< /Grid.ColumnDefinitions> 
< Grid.Children> 
< TextBlock Grid.Column =0Text ={Binding Name}/> 
< TextBlock Grid.Column =2Text ={Binding Occupation}/> 
< /Grid.Children> 
< / Grid> 
< / DataTemplate> 
< /ComboBox.Resources> 
< / ComboBox> 
  

请注意，获取 Collection 绑定权因为没有 DataContext 或VisualTree依赖， ElementName 和 RelativeSource 不起作用，这是因为 CompositeCollection 只是一个集合，而不是FrameworkElement。

除此之外，这是通过具有共享大小列的网格。 DataTemplate通过 DataType 自动应用。

编辑：设置标题ComboBoxItem IsHitTestVisible 属性到 False 是不够的，因为它仍然可以使用键盘进行选择。我现在将其更改为 IsEnabled =False，它淡出项目一点。你可能可以重新模板的项目，不这样做。或者如果你发现另一种方式禁用它的选择，当然也会解决。

Is it possible to have "column headers" on a combo box bound to multiple items? For example a combo box that displays a persons name. The combo box would display John Doe. But I'd like to display column headers:

First   Last
John    Doe
Jane    Doe
Jimmy   Doe

Is this possible without the use of a data grid? What about a simple solution that includes the use of a data grid? I found one solution for embedding a data grid into a combo box but it looks difficult and requires MS Blend.

I'd be happy if I could just get some headers as the first row in the drop down.

G

Here is my xaml code with HB's attempt that produces a compile error as mentioned in the comments.

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"

<ComboBox Name="cboPlaceNames" Grid.IsSharedSizeScope="True" ItemsSource="{DynamicResource items}" Height="22" Width="285" Margin="0,6,165,0" SelectedIndex="0" HorizontalAlignment="Right" VerticalAlignment="Top" SelectionChanged="cboPlaceNames_SelectionChanged">
  <ComboBox.Resources>
    <CompositeCollection x:Key="items">
      <ComboBoxItem IsEnabled="False">
        <Grid TextElement.FontWeight="Bold">
          <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="A"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition SharedSizeGroup="B"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition SharedSizeGroup="C"/>
          </Grid.ColumnDefinitions>
          <Grid.Children>
            <TextBlock Grid.Column="0" Text="Name"/>
            <TextBlock Grid.Column="2" Text="CLLI"/>
            <TextBlock Grid.Column="4" Text="Street"/>
          </Grid.Children>
        </Grid>
      </ComboBoxItem>
      <Separator/>
      <CollectionContainer Collection="{Binding Source={x:Reference cboPlaceNames}, Path=DataContext.Data}"/>
    </CompositeCollection>

    <DataTemplate DataType="x:Type obj:PlaceName">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition SharedSizeGroup="A"/>
          <ColumnDefinition Width="5"/>
          <ColumnDefinition SharedSizeGroup="B"/>
          <ColumnDefinition Width="5"/>
          <ColumnDefinition SharedSizeGroup="C"/>
        </Grid.ColumnDefinitions>
        <Grid.Children>
          <TextBlock Grid.Column="0" Text="{Binding Name}"/>
          <TextBlock Grid.Column="2" Text="{Binding CLLI}"/>
          <TextBlock Grid.Column="4" Text="{Binding Street}"/>
        </Grid.Children>
      </Grid>
    </DataTemplate>
  </ComboBox.Resources>
</ComboBox>      

解决方案

Example:

<ComboBox Name="cb" Grid.IsSharedSizeScope="True" ItemsSource="{DynamicResource items}">
    <ComboBox.Resources>
        <CompositeCollection x:Key="items">
            <ComboBoxItem IsEnabled="False">
                <Grid TextElement.FontWeight="Bold">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="A"/>
                        <ColumnDefinition Width="5"/>
                        <ColumnDefinition SharedSizeGroup="B"/>
                    </Grid.ColumnDefinitions>
                    <Grid.Children>
                        <TextBlock Grid.Column="0" Text="Name"/>
                        <TextBlock Grid.Column="2" Text="Occupation"/>
                    </Grid.Children>
                </Grid>
            </ComboBoxItem>
            <Separator/>
            <CollectionContainer Collection="{Binding Source={x:Reference cb}, Path=DataContext.Data}"/>
        </CompositeCollection>

        <DataTemplate DataType="{x:Type obj:Employee}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition SharedSizeGroup="A"/>
                    <ColumnDefinition Width="5"/>
                    <ColumnDefinition SharedSizeGroup="B"/>
                </Grid.ColumnDefinitions>
                <Grid.Children>
                    <TextBlock Grid.Column="0" Text="{Binding Name}"/>
                    <TextBlock Grid.Column="2" Text="{Binding Occupation}"/>
                </Grid.Children>
            </Grid>
        </DataTemplate>
    </ComboBox.Resources>
</ComboBox>

Note that getting the Collection-binding right is not that easy because there is neither DataContext nor VisualTree to rely on, ElementName and RelativeSource does not work, this is because CompositeCollection is just a collection, not a FrameworkElement.

Other than that the way this is done is via Grids that have shared size columns. The DataTemplate is applied automatically via the DataType.

Edit: Setting the header-ComboBoxItem's IsHitTestVisible property to False is not enough since it still can be selected using the keyboard. I now changed it to IsEnabled="False" which fades out the item a bit. You could probably re-template that item to not do that. Or if you find another way of disabling it from selection that would of course work out too.

这篇关于带标题的多项目组合框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！