在资源字典中有标题的多项目组合框？ [英] Multiple item combo box with headers in resource dictionary?

问题描述

我已遵循此问题的接受答案来定义多个-column combobox with headers。

它不适合我，所以我对它做了一些修改，现在它的工作原理。下面是xaml创建一个带有标题的多列组合框。

 < Page.DataContext> 
< vm：ItemsViewModel /> 
< /Page.DataContext> 
 
< Page.Resources> 
< CollectionViewSource x：Key =UnitsCollectionSource ={Binding Units}/> 
< /Page.Resources> 
 
< ComboBox Grid.Row =0Grid.Column =4Grid.ColumnSpan =2Grid.IsSharedSizeScope =True
x：Name =cbUnitsItemsSource ={DynamicResource Items}IsEditable =TrueTextSearch.TextPath =Symbol
 SelectedValue ={Binding SelectedUnit}SelectedValuePath =UnitID> 
< ComboBox.Resources> 
< CompositeCollection x：Key =Items> 
< ComboBoxItem IsEnabled =False> 
< Grid TextElement.FontWeight =Bold> 
< Grid.ColumnDefinitions> 
< ColumnDefinition SharedSizeGroup =A/> 
< ColumnDefinition Width =50/> 
< ColumnDefinition SharedSizeGroup =B/> 
< /Grid.ColumnDefinitions> 
< Grid.Children> 
< TextBlock Grid.Column =0Text =Name/> 
< TextBlock Grid.Column =2Text =Symbol/> 
< /Grid.Children> 
< / Grid> 
< / ComboBoxItem> 
< Separator /> 
< CollectionContainer Collection ={Binding Source = {StaticResource UnitsCollection}}/> 
< / CompositeCollection> 
 
< DataTemplate DataType ={x：Type models：Unit}> 
< Grid> 
< Grid.ColumnDefinitions> 
< ColumnDefinition SharedSizeGroup =A/> 
< ColumnDefinition Width =50/> 
< ColumnDefinition SharedSizeGroup =B/> 
< /Grid.ColumnDefinitions> 
< Grid.Children> 
< TextBlock Grid.Column =0Text ={Binding Name}/> 
< TextBlock Grid.Column =2Text ={Binding Symbol}/> 
< /Grid.Children> 
< / Grid> 
< / DataTemplate> 
< /ComboBox.Resources> 
< / ComboBox> 
 
< / Page> 
  

现在，我想定义< ComboBox.Resources> ; 在资源字典中，这样我就不必一次又一次地写。我还想为资源字典添加两个功能：

1. 将列名和列值以某种方式绑定（我不知道），所以任何两列组合框可以使用这个资源字典。




2. 如果可能，我想在资源中添加一些逻辑字典，以便相同的资源字典可以用于任何数量的列的任何组合框。

指导我走向正确的方向，如果有人在过去做了这件事，我可以得到一些帮助，这是另一个意见提出这个问题。

如果我的上面的quesitons不是只使用xaml解决，那么我也会很乐意接受解决方案。

解决方案

尝试这可能是这将帮助

b

 < Window.Resources> 
<！ -  header text  - > 
< TextBlock x：Key =header1Text =Index>< / TextBlock> 
< TextBlock x：Key =header2Text =Name>< / TextBlock> 
< TextBlock x：Key =header3Text =Symbol>< / TextBlock> 
 
<！ - 切换按钮模板 - > 
< ControlTemplate x：Key =ComboBoxToggleButtonTargetType =ToggleButton> 
< Grid x：Name =gd> 
< Grid.ColumnDefinitions> 
< ColumnDefinition /> 
< ColumnDefinition Width =30/> 
< /Grid.ColumnDefinitions> 
< Border x：Name =BorderSnapsToDevicePixels =TrueGrid.ColumnSpan =2Background =WhiteBorderBrush =LightGrayBorderThickness =1/& 
< Border x：Name =Boredr1SnapsToDevicePixels =TrueGrid.Column =0Margin =1Background =WhiteBorderBrush =LightGrayBorderThickness =0,0,1， 0/> 
< Path x：Name =ArrowSnapsToDevicePixels =TrueGrid.Column =1Fill =BlackHorizo​​ntalAlignment =CenterVerticalAlignment =CenterData =M 0 0 L 6 6 L 12 0 Z/> 
< ContentPresenter Grid.Column =0TextElement.Foreground =Orange>< / ContentPresenter> 
< / Grid> 
< ControlTemplate.Triggers> 
< Trigger Property =ToggleButton.IsMouseOverValue =True> 
< Setter TargetName =BorderProperty =BorderBrushValue =Black/> 
< Setter TargetName =Boredr1Property =BorderBrushValue =Black/> 
< / Trigger> 
< Trigger Property =ToggleButton.IsCheckedValue =True> 
< Setter TargetName =ArrowProperty =DataValue =M 0 0 L 5 5 L 10 0/> 
< Setter TargetName =ArrowProperty =FillValue =White/> 
< Setter TargetName =ArrowProperty =StrokeValue =Black/> 
< Setter TargetName =ArrowProperty =StrokeThicknessValue =1.5/> 
< / Trigger> 
< Trigger Property =IsEnabledValue =False> 
< Setter TargetName =gdProperty =VisibilityValue =Visible/> 
< / Trigger> 
< /ControlTemplate.Triggers> 
< / ControlTemplate> 
 
<！ -  TextBox Template  - > 
< ControlTemplate x：Key =ComboBoxTextBoxTargetType =TextBox> 
< ScrollViewer x：Name =PART_ContentHostFocusable =False/> 
< / ControlTemplate> 
 
<！ -  2 column combobox  - > 
< Style x：Key =2_Column_CmbTargetType =ComboBox> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType =ComboBox> 
< Grid> 
< ToggleButton Name =ToggleButtonForeground =BlackTemplate ={StaticResource ComboBoxToggleButton}Focusable =falseIsChecked ={Binding Path = IsDropDownOpen，Mode = TwoWay，RelativeSource = {RelativeSource TemplatedParent}} ClickMode =按>> 
< / ToggleButton> 
< ContentPresenter Name =ContentSiteIsHitTestVisible =FalseContent ={TemplateBinding SelectionBoxItem}ContentTemplate ={TemplateBinding SelectionBoxItemTemplate}ContentTemplateSelector ={TemplateBinding ItemTemplateSelector}Margin =3,3,23， 3VerticalAlignment =CenterHorizo​​ntalAlignment =Left/> 
< TextBox OverridesDefaultStyle =TrueSelectionBrush =GrayCaretBrush =BlackMargin =0,0,30,0TextWrapping =NoWrapx：Name =PART_EditableTextBoxFontFamily =Segoe UI黑色Foreground =BlackStyle ={x：Null}Template ={StaticResource ComboBoxTextBox}Horizo​​ntalAlignment =LeftFocusable =TrueVerticalAlignment =CenterFontSize =15Visibility =HiddenIsReadOnly ={TemplateBinding IsReadOnly}/> 
< Popup Name =PopupGrid.ColumnSpan =2Placement =BottomIsOpen ={TemplateBinding IsDropDownOpen}AllowTransparency =TrueFocusable =FalsePopupAnimation =Slide 
< Grid Name =DropDownSnapsToDevicePixels =TrueMaxWidth ={TemplateBinding ActualWidth}MinWidth ={TemplateBinding ActualWidth}MaxHeight ={TemplateBinding MaxDropDownHeight}& 
< Grid.ColumnDefinitions> 
< ColumnDefinition>< / ColumnDefinition> 
< ColumnDefinition>< / ColumnDefinition> 
< /Grid.ColumnDefinitions> 
< Grid.RowDefinitions> 
< RowDefinition Height =30>< / RowDefinition> 
< RowDefinition Height =Auto>< / RowDefinition> 
< /Grid.RowDefinitions> 
< Grid Background =LightGrayGrid.Row =0Grid.Column =0> 
< TextBlock Text ={Binding Source = {StaticResource header2}，Path = Text}Horizo​​ntalAlignment =CenterVerticalAlignment =CenterForeground =BlackFontFamily =Segoe Ui DarkFontSize =15 >< / TextBlock> 
< / Grid> 
< Grid Background =LightGrayGrid.Row =0Grid.Column =1> 
< TextBlock Text ={Binding Source = {StaticResource header3}，Path = Text}Background =LightGrayHorizo​​ntalAlignment =CenterVerticalAlignment =CenterForeground =BlackFontFamily =Segoe Ui Dark FontSize =15>< / TextBlock> 
< / Grid> 
< Border Grid.ColumnSpan =2Grid.RowSpan =2x：Name =DropDownBorderSnapsToDevicePixels =TrueBackground =TransparentMaxWidth ={TemplateBinding ActualWidth}BorderThickness =1 BorderBrush =LightGray/> 
< ScrollViewer Grid.ColumnSpan =2ScrollViewer.CanContentScroll =FalseGrid.Row =1SnapsToDevicePixels =True> 
< StackPanel IsItemsHost =TrueBackground =Transparent> 
< / StackPanel> 
< / ScrollViewer> 
< / Grid> 
< / Popup> 
< / Grid> 
< ControlTemplate.Triggers> 
< Trigger Property =IsEditableValue =true> 
< Setter Property =IsTabStopValue =false/> 
< Setter TargetName =PART_EditableTextBoxProperty =BackgroundValue =White/> 
< Setter TargetName =PART_EditableTextBoxProperty =VisibilityValue =Visible/> 
< Setter TargetName =PART_EditableTextBoxProperty =ForegroundValue =Black/> 
< Setter TargetName =ContentSiteProperty =VisibilityValue =Hidden/> 
< / Trigger> 
< Trigger Property =HasItemsValue =false> 
< Setter TargetName =DropDownBorderProperty =MinHeightValue =95/> 
< / Trigger> 
< Trigger Property =IsEnabledValue =false> 
< Setter Property =IsTabStopValue =false/> 
< Setter TargetName =PART_EditableTextBoxProperty =VisibilityValue =Visible/> 
< Setter TargetName =PART_EditableTextBoxProperty =ForegroundValue =Black/> 
< Setter TargetName =PART_EditableTextBoxProperty =IsEnabledValue =False/> 
< Setter TargetName =PART_EditableTextBoxProperty =BackgroundValue =White/> 
< Setter TargetName =ContentSiteProperty =VisibilityValue =Hidden/> 
< / Trigger> 
< Trigger Property =IsGroupingValue =true> 
< Setter Property =ScrollViewer.CanContentScrollValue =false/> 
< / Trigger> 
< Trigger SourceName =PopupProperty =Popup.AllowsTransparencyValue =true> 
< Setter TargetName =DropDownBorderProperty =MarginValue =0,2,0,0/> 
< / Trigger> 
< /ControlTemplate.Triggers> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< Style.Triggers> 
< / Style.Triggers> 
< / Style> 
 
<！ -  3列组合框 - > 
< Style x：Key =3_Column_CmbTargetType =ComboBox> 
< Setter Property =SnapsToDevicePixelsValue =true/> 
< Setter Property =OverridesDefaultStyleValue =true/> 
< Setter Property =ScrollViewer.Horizo​​ntalScrollBarVisibilityValue =Auto/> 
< Setter Property =ScrollViewer.VerticalScrollBarVisibilityValue =Disabled/> 
< Setter Property =HeightValue =40/> 
< Setter Property =MinWidthValue =120/> 
< Setter Property =MinHeightValue =20/> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType =ComboBox> 
< Grid> 
< ToggleButton Name =ToggleButtonForeground =BlackTemplate ={StaticResource ComboBoxToggleButton}Focusable =falseIsChecked ={Binding Path = IsDropDownOpen，Mode = TwoWay，RelativeSource = {RelativeSource TemplatedParent}} ClickMode =Press> 
< / ToggleButton> 
< ContentPresenter Name =ContentSiteIsHitTestVisible =FalseContent ={TemplateBinding SelectionBoxItem}ContentTemplate ={TemplateBinding SelectionBoxItemTemplate}ContentTemplateSelector ={TemplateBinding ItemTemplateSelector}Margin =3,3,23， 3VerticalAlignment =CenterHorizo​​ntalAlignment =Left/> 
< TextBox OverridesDefaultStyle =TrueSelectionBrush =GrayCaretBrush =BlackMargin =0,0,30,0TextWrapping =NoWrapx：Name =PART_EditableTextBoxFontFamily =Segoe UI黑色Foreground =BlackStyle ={x：Null}Template ={StaticResource ComboBoxTextBox}Horizo​​ntalAlignment =LeftFocusable =TrueVerticalAlignment =CenterFontSize =15Visibility =HiddenIsReadOnly ={TemplateBinding IsReadOnly}/> 
< Popup Name =PopupGrid.ColumnSpan =2Placement =BottomIsOpen ={TemplateBinding IsDropDownOpen}AllowTransparency =TrueFocusable =FalsePopupAnimation =Slide 
< ContentControl Name =DropDownSnapsToDevicePixels =TrueMaxWidth ={TemplateBinding ActualWidth}MinWidth ={TemplateBinding ActualWidth}MaxHeight ={TemplateBinding MaxDropDownHeight}& 
< Grid> 
< Grid.ColumnDefinitions> 
< ColumnDefinition>< / ColumnDefinition> 
< ColumnDefinition>< / ColumnDefinition> 
< ColumnDefinition>< / ColumnDefinition> 
< /Grid.ColumnDefinitions> 
< Grid.RowDefinitions> 
< RowDefinition Height =30>< / RowDefinition> 
< RowDefinition Height =Auto>< / RowDefinition> 
< /Grid.RowDefinitions> 
< Grid Background =LightGrayGrid.Row =0Grid.Column =0> 
< TextBlock Text ={Binding Source = {StaticResource header1}，Path = Text}Horizo​​ntalAlignment =CenterVerticalAlignment =CenterForeground =BlackFontFamily =Segoe Ui DarkFontSize =15 >< / TextBlock> 
< / Grid> 
< Grid Background =LightGrayGrid.Row =0Grid.Column =1> 
< TextBlock Text ={Binding Source = {StaticResource header2}，Path = Text}Background =LightGrayHorizo​​ntalAlignment =CenterVerticalAlignment =CenterForeground =BlackFontFamily =Segoe Ui Dark FontSize =15>< / TextBlock> 
< / Grid> 
< Grid Background =LightGrayGrid.Row =0Grid.Column =2> 
< TextBlock Text ={Binding Source = {StaticResource header3}，Path = Text}Background =LightGrayHorizo​​ntalAlignment =CenterVerticalAlignment =CenterForeground =BlackFontFamily =Segoe Ui Dark FontSize =15>< / TextBlock> 
< / Grid> 
< Border Grid.ColumnSpan =3Grid.RowSpan =2x：Name =DropDownBorderSnapsToDevicePixels =TrueBackground =TransparentMaxWidth ={TemplateBinding ActualWidth}BorderThickness =1 BorderBrush =LightGray/> 
< ScrollViewer Grid.ColumnSpan =3ScrollViewer.CanContentScroll =FalseGrid.Row =1Margin =0,0,0,0SnapsToDevicePixels =True> 
< StackPanel IsItemsHost =TrueBackground =Transparent> 
< / StackPanel> 
< / ScrollViewer> 
< / Grid> 
< / ContentControl> 
< / Popup> 
< / Grid> 
< ControlTemplate.Triggers> 
< Trigger Property =IsEditableValue =true> 
< Setter Property =IsTabStopValue =false/> 
< Setter TargetName =PART_EditableTextBoxProperty =BackgroundValue =White/> 
< Setter TargetName =PART_EditableTextBoxProperty =VisibilityValue =Visible/> 
< Setter TargetName =PART_EditableTextBoxProperty =ForegroundValue =Black/> 
< Setter TargetName =ContentSiteProperty =VisibilityValue =Hidden/> 
< / Trigger> 
< Trigger Property =HasItemsValue =false> 
< Setter TargetName =DropDownBorderProperty =MinHeightValue =95/> 
< / Trigger> 
< Trigger Property =IsEnabledValue =false> 
< Setter Property =IsTabStopValue =false/> 
< Setter TargetName =PART_EditableTextBoxProperty =VisibilityValue =Visible/> 
< Setter TargetName =PART_EditableTextBoxProperty =ForegroundValue =Black/> 
< Setter TargetName =PART_EditableTextBoxProperty =IsEnabledValue =False/> 
< Setter TargetName =PART_EditableTextBoxProperty =BackgroundValue =White/> 
< Setter TargetName =ContentSiteProperty =VisibilityValue =Hidden/> 
< / Trigger> 
< Trigger Property =IsGroupingValue =true> 
< Setter Property =ScrollViewer.CanContentScrollValue =false/> 
< / Trigger> 
< Trigger SourceName =PopupProperty =Popup.AllowsTransparencyValue =true> 
< Setter TargetName =DropDownBorderProperty =MarginValue =0,2,0,0/> 
< / Trigger> 
< /ControlTemplate.Triggers> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< Style.Triggers> 
< / Style.Triggers> 
< / Style> 
 
<！ - 组合框项目样式 - > 
< Style x：Key =Column_CmbItemTargetType =ComboBoxItem> 
< Setter Property =SnapsToDevicePixelsValue =True/> 
< Setter Property =OverridesDefaultStyleValue =True/> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType =ComboBoxItem> 
< Grid x：Name =BorderGrid.ColumnSpan =2Margin =1,0,1,1Background =White> 
< ContentPresenter>< / ContentPresenter> 
< / Grid> 
< ControlTemplate.Triggers> 
< Trigger Property =ComboBoxItem.IsSelectedValue =True> 
< Setter TargetName =BorderProperty =BackgroundValue =Gray>< / Setter> 
< / Trigger> 
< Trigger Property =ComboBoxItem.IsMouseOverValue =True> 
< Setter TargetName =BorderProperty =BackgroundValue =LightBlue>< / Setter> 
< / Trigger> 
< /ControlTemplate.Triggers> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 
 
< /Window.Resources> 
 

您可以在资源中编写此combobox datatemplate。也可以使用combobox datatempalate多次。没有写入资源。

 < Grid> 
< ComboBox x：Name =ComboboxMargin =50,0,0,0IsEditable =TrueHorizo​​ntalAlignment =LeftIsTextSearchEnabled =TrueTextSearch.TextPath =symbolItemsSource = {Binding cmb}Style ={StaticResource 2_Column_Cmb}Height =30ItemContainerStyle ={StaticResource Column_CmbItem}Width =200Tag =Item1> 
< ComboBox.ItemTemplate> 
< DataTemplate> 
< Grid Background =TransparentSnapsToDevicePixels =True> 
< Grid.ColumnDefinitions> 
< ColumnDefinition>< / ColumnDefinition> 
< ColumnDefinition>< / ColumnDefinition> 
< /Grid.ColumnDefinitions> 
< TextBlock Text ={Binding name}Horizo​​ntalAlignment =CenterVerticalAlignment =CenterGrid.Column =0FontSize =15TextTrimming =CharacterEllipsisForeground =Black/> 
< TextBlock Text ={Binding symbol}Grid.Column =1VerticalAlignment =CenterHorizo​​ntalAlignment =CenterFontSize =20Foreground =Black/& 
< / Grid> 
< / DataTemplate> 
< /ComboBox.ItemTemplate> 
< / ComboBox> 
 
< ComboBox x：Name =Combobox1Margin =0,0,50,0Horizo​​ntalAlignment =RightIsEditable =TrueIsTextSearchEnabled =TrueTextSearch.TextPath =symbol ItemsSource ={Binding cmb}Style ={StaticResource 3_Column_Cmb}Height =30ItemContainerStyle ={StaticResource Column_CmbItem}Width =200Tag =Item1> 
< ComboBox.ItemTemplate> 
< DataTemplate> 
< Grid Background =TransparentSnapsToDevicePixels =True> 
< Grid.ColumnDefinitions> 
< ColumnDefinition>< / ColumnDefinition> 
< ColumnDefinition>< / ColumnDefinition> 
< ColumnDefinition>< / ColumnDefinition> 
< /Grid.ColumnDefinitions> 
< TextBlock Text ={Binding index}Horizo​​ntalAlignment =CenterVerticalAlignment =CenterGrid.Column =0FontSize =15TextTrimming =CharacterEllipsisForeground =Black/> 
< TextBlock Text ={Binding name}Horizo​​ntalAlignment =CenterVerticalAlignment =CenterGrid.Column =1FontSize =15TextTrimming =CharacterEllipsisForeground =Black/> 
< TextBlock Text ={Binding symbol}Grid.Column =2VerticalAlignment =CenterHorizo​​ntalAlignment =CenterFontSize =20Foreground =Black/& 
< / Grid> 
< / DataTemplate> 
< /ComboBox.ItemTemplate> 
< / ComboBox> 
< / Grid> 
   

c＃c​​ode

  InitializeComponent（）; 
 List< ComboboxData> cmb = new List< ComboboxData>（）; 
 cmb.Add（new ComboboxData（1。，Tidle，〜））; 
 cmb.Add（new ComboboxData（2。，Exclamation，！））; 
 cmb.Add（new ComboboxData（3。，Ampersat，@））; 
 cmb.Add（new ComboboxData（4。，Ampersand，&））; 
 cmb.Add（new ComboboxData（5。，Dollar，$））; 
 Combobox.ItemsSource = cmb; 
 Combobox1.ItemsSource = cmb; 
 
 public class ComboboxData 
 {
 public string index {get;组; } 
 public string name {get;组; } 
 public string symbol {get;组; } 
 public ComboboxData（字符串索引，字符串名称，字符串符号）
 {
 this.index = index; 
 this.name = name; 
 this.symbol = symbol; 
} 
} 
  

同样，您可以编辑4列5列的模板

I have followed the accepted answer of this question to define a multi-column combobox with headers.

It was not working for me, so I made some changes to it and now it works. Here is the xaml to create a multi-column comboBox with headers.

   <Page.DataContext>
       <vm:ItemsViewModel />
   </Page.DataContext>

   <Page.Resources>
       <CollectionViewSource x:Key="UnitsCollection" Source="{Binding Units}" />
   </Page.Resources>

   <ComboBox Grid.Row="0" Grid.Column="4" Grid.ColumnSpan="2" Grid.IsSharedSizeScope="True" 
              x:Name="cbUnits" ItemsSource="{DynamicResource Items}" IsEditable="True" TextSearch.TextPath="Symbol"
              SelectedValue="{Binding SelectedUnit}" SelectedValuePath="UnitID">
        <ComboBox.Resources>
            <CompositeCollection x:Key="Items">
                <ComboBoxItem IsEnabled="False">
                    <Grid TextElement.FontWeight="Bold">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition SharedSizeGroup="A" />
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition SharedSizeGroup="B" />
                        </Grid.ColumnDefinitions>
                        <Grid.Children>
                            <TextBlock Grid.Column="0" Text="Name" />
                            <TextBlock Grid.Column="2" Text="Symbol" />
                        </Grid.Children>
                    </Grid>
                </ComboBoxItem>
                <Separator />
                <CollectionContainer Collection="{Binding Source={StaticResource UnitsCollection}}" />
            </CompositeCollection>

            <DataTemplate DataType="{x:Type models:Unit}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="A" />
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition SharedSizeGroup="B" />
                    </Grid.ColumnDefinitions>
                    <Grid.Children>
                        <TextBlock Grid.Column="0" Text="{Binding Name}" />
                        <TextBlock Grid.Column="2" Text="{Binding Symbol}" />
                    </Grid.Children>
                </Grid>
            </DataTemplate>
        </ComboBox.Resources>
    </ComboBox>

</Page>

Now, I would like to define the section between <ComboBox.Resources> in a resource dictionary, so that I would not have to write it again and again. I also want to add two more functionalities to the resource dictionary:

1. Bind the Column-names and the Column-values somehow to something(I don't know), so that any two column combobox can use this resource dictionary.

2. If possible I would like to add some logic in resource dictionary so that the same resource dictionary can be used for any combobox with any number of columns.

I think somebody could guide me to the right direction and if someone has done this thing in past then I may get some help for that, which is another intension of asking this question.

If my above quesitons are not solved using only xaml, then also I would happily accept the solution.

解决方案

Try this may be this will help you.I have just edited combobox style.Please run this code separatly.

Xaml code

<Window.Resources>
    <!--header text-->
    <TextBlock x:Key="header1" Text="Index"></TextBlock>
    <TextBlock x:Key="header2" Text="Name"></TextBlock>
    <TextBlock x:Key="header3" Text="Symbol"></TextBlock>

    <!--Toggle Button Template-->
    <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
        <Grid x:Name="gd">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>
            <Border x:Name="Border" SnapsToDevicePixels="True" Grid.ColumnSpan="2" Background="White" BorderBrush="LightGray" BorderThickness="1"/>
            <Border x:Name="Boredr1" SnapsToDevicePixels="True" Grid.Column="0"  Margin="1" Background="White" BorderBrush="LightGray" BorderThickness="0,0,1,0" />
            <Path x:Name="Arrow" SnapsToDevicePixels="True" Grid.Column="1" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 6 6 L 12 0 Z"/>
            <ContentPresenter Grid.Column="0" TextElement.Foreground="Orange"></ContentPresenter>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="ToggleButton.IsMouseOver" Value="True">
                <Setter TargetName="Border" Property="BorderBrush" Value="Black"/>
                <Setter TargetName="Boredr1" Property="BorderBrush" Value="Black"/>
            </Trigger>
            <Trigger Property="ToggleButton.IsChecked" Value="True">
                <Setter TargetName="Arrow" Property="Data" Value="M 0 0 L 5 5 L 10 0"/>
                <Setter TargetName="Arrow" Property="Fill" Value="White"/>
                <Setter TargetName="Arrow" Property="Stroke" Value="Black"/>
                <Setter TargetName="Arrow" Property="StrokeThickness" Value="1.5"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="gd" Property="Visibility" Value="Visible"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!--TextBox Template-->
    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
        <ScrollViewer x:Name="PART_ContentHost" Focusable="False" />
    </ControlTemplate>

    <!--2 column combobox-->
    <Style x:Key="2_Column_Cmb" TargetType="ComboBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="ComboBox">
                    <Grid>
                        <ToggleButton Name="ToggleButton" Foreground="Black" Template="{StaticResource ComboBoxToggleButton}" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
                        </ToggleButton>
                        <ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3"  VerticalAlignment="Center" HorizontalAlignment="Left" />
                        <TextBox OverridesDefaultStyle="True" SelectionBrush="Gray" CaretBrush="Black" Margin="0,0,30,0" TextWrapping="NoWrap"   x:Name="PART_EditableTextBox" FontFamily="Segoe UI Dark"   Foreground="Black" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" Focusable="True"  VerticalAlignment="Center"  FontSize="15"   Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}"/>
                        <Popup Name="Popup"  Grid.ColumnSpan="2" Placement="Bottom"  IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
                            <Grid Name="DropDown"   SnapsToDevicePixels="True" MaxWidth="{TemplateBinding ActualWidth}" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition></ColumnDefinition>
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30"></RowDefinition>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid Background="LightGray"  Grid.Row="0" Grid.Column="0">
                                    <TextBlock  Text="{Binding Source={StaticResource header2},Path=Text}"  HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe Ui Dark" FontSize="15" ></TextBlock>
                                </Grid>
                                <Grid Background="LightGray"  Grid.Row="0" Grid.Column="1">
                                    <TextBlock Text="{Binding Source={StaticResource header3},Path=Text}" Background="LightGray" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe Ui Dark" FontSize="15"></TextBlock>
                                </Grid>
                                <Border Grid.ColumnSpan="2" Grid.RowSpan="2" x:Name="DropDownBorder" SnapsToDevicePixels="True" Background="Transparent" MaxWidth="{TemplateBinding ActualWidth}" BorderThickness="1" BorderBrush="LightGray"/>
                                <ScrollViewer Grid.ColumnSpan="2" ScrollViewer.CanContentScroll="False" Grid.Row="1" SnapsToDevicePixels="True">
                                    <StackPanel IsItemsHost="True" Background="Transparent">
                                    </StackPanel>
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEditable" Value="true">
                            <Setter Property="IsTabStop" Value="false"/>
                            <Setter  TargetName="PART_EditableTextBox" Property="Background" Value="White"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="Black"/>
                            <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                        </Trigger>
                        <Trigger Property="HasItems" Value="false">
                            <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="IsTabStop" Value="false"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="Black"/>
                            <Setter  TargetName="PART_EditableTextBox" Property="IsEnabled" Value="False"/>
                            <Setter  TargetName="PART_EditableTextBox" Property="Background" Value="White"/>
                            <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </Trigger>
                        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                            <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
        </Style.Triggers>
    </Style>

    <!--3 column combobox-->
    <Style x:Key="3_Column_Cmb" TargetType="ComboBox">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="MinWidth" Value="120"/>
        <Setter Property="MinHeight" Value="20"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="ComboBox">
                    <Grid>
                        <ToggleButton Name="ToggleButton" Foreground="Black" Template="{StaticResource ComboBoxToggleButton}" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
                        </ToggleButton>
                        <ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3"  VerticalAlignment="Center" HorizontalAlignment="Left" />
                        <TextBox OverridesDefaultStyle="True" SelectionBrush="Gray" CaretBrush="Black" Margin="0,0,30,0" TextWrapping="NoWrap"   x:Name="PART_EditableTextBox" FontFamily="Segoe UI Dark"   Foreground="Black" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" Focusable="True"  VerticalAlignment="Center"  FontSize="15"   Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}"/>
                        <Popup Name="Popup"  Grid.ColumnSpan="2" Placement="Bottom"  IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
                            <ContentControl Name="DropDown"   SnapsToDevicePixels="True" MaxWidth="{TemplateBinding ActualWidth}" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="30"></RowDefinition>
                                        <RowDefinition Height="Auto"></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <Grid Background="LightGray"  Grid.Row="0" Grid.Column="0">
                                        <TextBlock  Text="{Binding Source={StaticResource header1},Path=Text}"  HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe Ui Dark" FontSize="15" ></TextBlock>
                                    </Grid>
                                    <Grid Background="LightGray"  Grid.Row="0" Grid.Column="1">
                                        <TextBlock Text="{Binding Source={StaticResource header2},Path=Text}" Background="LightGray" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe Ui Dark" FontSize="15"></TextBlock>
                                    </Grid>
                                    <Grid Background="LightGray"  Grid.Row="0" Grid.Column="2">
                                        <TextBlock Text="{Binding Source={StaticResource header3},Path=Text}" Background="LightGray" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe Ui Dark" FontSize="15"></TextBlock>
                                    </Grid>
                                    <Border Grid.ColumnSpan="3" Grid.RowSpan="2" x:Name="DropDownBorder" SnapsToDevicePixels="True" Background="Transparent" MaxWidth="{TemplateBinding ActualWidth}" BorderThickness="1" BorderBrush="LightGray"/>
                                    <ScrollViewer Grid.ColumnSpan="3" ScrollViewer.CanContentScroll="False" Grid.Row="1" Margin="0,0,0,0" SnapsToDevicePixels="True">
                                        <StackPanel IsItemsHost="True" Background="Transparent">
                                        </StackPanel>
                                    </ScrollViewer>
                                </Grid>
                            </ContentControl>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEditable" Value="true">
                            <Setter Property="IsTabStop" Value="false"/>
                            <Setter  TargetName="PART_EditableTextBox" Property="Background" Value="White"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="Black"/>
                            <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                        </Trigger>
                        <Trigger Property="HasItems" Value="false">
                            <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="IsTabStop" Value="false"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="Black"/>
                            <Setter  TargetName="PART_EditableTextBox" Property="IsEnabled" Value="False"/>
                            <Setter  TargetName="PART_EditableTextBox" Property="Background" Value="White"/>
                            <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </Trigger>
                        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                            <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
        </Style.Triggers>
    </Style>

    <!--combobox item style-->
    <Style x:Key="Column_CmbItem" TargetType="ComboBoxItem">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBoxItem">
                    <Grid x:Name="Border" Grid.ColumnSpan="2" Margin="1,0,1,1" Background="White">
                        <ContentPresenter></ContentPresenter>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ComboBoxItem.IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="Gray"></Setter>
                        </Trigger>
                        <Trigger Property="ComboBoxItem.IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="LightBlue"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

You can write this combobox datatemplate in resources also..so you can use combobox datatempalate multiple time.I haven't written in resource.

<Grid>
    <ComboBox x:Name="Combobox" Margin="50,0,0,0" IsEditable="True" HorizontalAlignment="Left" IsTextSearchEnabled="True" TextSearch.TextPath="symbol" ItemsSource="{Binding cmb }" Style="{StaticResource 2_Column_Cmb}" Height="30" ItemContainerStyle="{StaticResource Column_CmbItem}"  Width="200" Tag="Item1">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Grid Background="Transparent" SnapsToDevicePixels="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding name}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" FontSize="15" TextTrimming="CharacterEllipsis" Foreground="Black" />
                    <TextBlock Text="{Binding symbol}" Grid.Column="1" VerticalAlignment="Center"  HorizontalAlignment="Center" FontSize="20"  Foreground="Black"/>
                </Grid>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

    <ComboBox x:Name="Combobox1" Margin="0,0,50,0" HorizontalAlignment="Right"  IsEditable="True" IsTextSearchEnabled="True" TextSearch.TextPath="symbol" ItemsSource="{Binding cmb }" Style="{StaticResource 3_Column_Cmb}" Height="30" ItemContainerStyle="{StaticResource Column_CmbItem}"  Width="200" Tag="Item1">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Grid Background="Transparent" SnapsToDevicePixels="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding index}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" FontSize="15" TextTrimming="CharacterEllipsis" Foreground="Black" />
                    <TextBlock Text="{Binding name}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" FontSize="15" TextTrimming="CharacterEllipsis" Foreground="Black" />
                    <TextBlock Text="{Binding symbol}" Grid.Column="2" VerticalAlignment="Center"  HorizontalAlignment="Center" FontSize="20"  Foreground="Black"/>
                </Grid>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>
</Grid>

c# code

  InitializeComponent();
  List<ComboboxData> cmb = new List<ComboboxData>();
  cmb.Add(new ComboboxData("1.","Tidle", "~"));
  cmb.Add(new ComboboxData("2.", "Exclamation", "!"));
  cmb.Add(new ComboboxData("3.", "Ampersat", "@"));           
  cmb.Add(new ComboboxData("4.","Ampersand", "&"));
  cmb.Add(new ComboboxData("5.","Dollar", "$"));
  Combobox.ItemsSource = cmb;
  Combobox1.ItemsSource = cmb;

 public class ComboboxData
{
    public string index { get; set; }
    public string name { get; set; }
    public string symbol { get; set; }
    public ComboboxData(string index,string name,string symbol)
    {
        this.index = index;
        this.name = name;
        this.symbol = symbol;
    }
}

similarly you can edit template for 4 column, 5 column also.

output

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