ComboBox Grouping

  • WPF

Es gibt 6 Antworten in diesem Thema. Der letzte Beitrag () ist von MichaHo.

    ComboBox Grouping

    Hi,
    Ich versuche gerade, die Items einer ComboBox zu gruppieren.
    Das Gruppieren an sich funktioniert, nur leider werden mir dann keine Items in den Gruppen angezeigt.
    Ich finde den Fehler nicht...:-(

    Ich hab in den Resourcen des Controls folgende Einstellungen gesetzt:
    Erstmal die CollectionViewSource:

    XML-Quellcode

    1. <CollectionViewSource x:Key="cvsGraduations" Source="{Binding AppViewModel.Graduations, Source={x:Static local:ViewModelLocator.Instance}}">
    2. <CollectionViewSource.GroupDescriptions>
    3. <PropertyGroupDescription PropertyName="MemberGraduation"/>
    4. </CollectionViewSource.GroupDescriptions>
    5. </CollectionViewSource>


    Graduations ist eine Liste der Graduation Klasse und wird im ApplicationViewModel gefüllt.
    MemberGraduation ist ein Enum aus der Graduation Klasse welches anzeigt ob es eine Schüler Graduierung (Student) oder eine Meister Graduierung (Master) ist.
    Sortiert werden muss nicht.

    Dann hab ich 2 DatatTemplates, 1 für den Header und 1 für die Items:

    XML-Quellcode

    1. <DataTemplate x:Key="GroupHeader">
    2. <TextBlock Text="{Binding Name}"/>
    3. </DataTemplate>
    4. <DataTemplate x:Key="ComboItem">
    5. <StackPanel Orientation="Horizontal">
    6. <TextBlock Text="{Binding Description}"/>
    7. <TextBlock Text=" - "/>
    8. <TextBlock Text="{Binding Degree}"/>
    9. </StackPanel>
    10. </DataTemplate>


    Dann hab ich noch einen Style erstellt:

    XML-Quellcode

    1. <Style TargetType="{x:Type GroupItem}" x:Key="ComboStyle">
    2. <Setter Property="Template">
    3. <Setter.Value>
    4. <ControlTemplate TargetType="{x:Type GroupItem}">
    5. <Expander IsExpanded="False" x:Name="ComboExpander"
    6. Header="{TemplateBinding Content}"
    7. HeaderTemplate="{TemplateBinding ContentTemplate}">
    8. <ItemsPresenter/>
    9. </Expander>
    10. </ControlTemplate>
    11. </Setter.Value>
    12. </Setter>
    13. </Style>


    Und zum Schluß die ComboBox ansich:

    XML-Quellcode

    1. <ComboBox Grid.Column="1" Grid.Row="2"
    2. Margin="10"
    3. ItemsSource="{Binding Source={StaticResource cvsGraduations}}"
    4. SelectedValue="{Binding SelectedGraduation, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
    5. FontSize="{StaticResource FontSizeAverage}"
    6. ItemTemplate="{StaticResource ComboItem}">
    7. <ComboBox.GroupStyle>
    8. <GroupStyle ContainerStyle="{StaticResource ComboStyle}"
    9. HeaderTemplate="{StaticResource GroupHeader}">
    10. </GroupStyle>
    11. </ComboBox.GroupStyle>
    12. </ComboBox>


    In der Anwendung sieht es dann so aus:
    Das Gruppieren geht, in der Box wird auch die Graduierung angezeigt, nur eben keine Items...

    Nehme ich allerings das Grouping raus, passt alles:

    ComboBox:

    XML-Quellcode

    1. <ComboBox Grid.Column="1" Grid.Row="2"
    2. Margin="10"
    3. ItemsSource="{Binding Source={StaticResource cvsGraduations}}"
    4. SelectedValue="{Binding SelectedGraduation, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
    5. FontSize="{StaticResource FontSizeAverage}"/>



    Wo hab ich den Fehler?

    Danke Euch
    "Hier könnte Ihre Werbung stehen..."
    Hallo Micha

    Also wenn ich das alles so übernehme wie du es hast funktioniert das. Du hast alles soweit richtig gemacht. Ich dachte schon ich finde den Fehler nicht aber es funktioniert tatsächlich wie von dir gewollt.



    Versuche mal das DataTemplate des GroupHeaders wie folgt abzuändern um zu sehen ob überhaupt Items zum Anzeigen vorhanden wären...

    XML-Quellcode

    1. <DataTemplate x:Key="GroupHeader">
    2. <StackPanel Orientation="Horizontal">
    3. <TextBlock Text="{Binding Name}"/>
    4. <TextBlock>
    5. <Run Text=" ("/>
    6. <Run Text="{Binding ItemCount,Mode=OneWay}"/>
    7. <Run Text=")"/>
    8. </TextBlock>
    9. </StackPanel>
    10. </DataTemplate>


    Werden dir in der Ausgabe Bindingfehler angezeigt?????

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    Hi,
    ich glaub ich hab den Fehler gefunden.
    Ich hab den ComboBox Style überschrieben und einen eigenen Style gebaut, das scheint sich zu beißen.

    XML-Quellcode

    1. <Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
    2. <Setter Property="SnapsToDevicePixels" Value="true"/>
    3. <Setter Property="OverridesDefaultStyle" Value="true"/>
    4. <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    5. <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    6. <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    7. <Setter Property="MinWidth" Value="120"/>
    8. <Setter Property="MinHeight" Value="20"/>
    9. <Setter Property="Foreground" Value="{DynamicResource DarkBrush}"/>
    10. <Setter Property="Template">
    11. <Setter.Value>
    12. <ControlTemplate TargetType="{x:Type ComboBox}">
    13. <Grid>
    14. <ToggleButton
    15. Name="ToggleButton"
    16. Template="{StaticResource ComboBoxToggleButton}"
    17. Grid.Column="2"
    18. Focusable="false"
    19. IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
    20. ClickMode="Press">
    21. </ToggleButton>
    22. <ContentPresenter Name="ContentSite" IsHitTestVisible="False"
    23. Content="{TemplateBinding SelectionBoxItem}"
    24. ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
    25. ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
    26. Margin="3,3,23,3"
    27. VerticalAlignment="Center"
    28. HorizontalAlignment="Left" />
    29. <TextBox x:Name="PART_EditableTextBox"
    30. Style="{x:Null}"
    31. Template="{StaticResource ComboBoxTextBox}"
    32. HorizontalAlignment="Left"
    33. VerticalAlignment="Center"
    34. Margin="3,3,23,3"
    35. Focusable="True"
    36. Background="{DynamicResource VeryVeryLightBrush}"
    37. Foreground="{DynamicResource DarkBrush}"
    38. Visibility="Hidden"
    39. IsReadOnly="{TemplateBinding IsReadOnly}"/>
    40. <Popup
    41. Name="Popup"
    42. Placement="Bottom"
    43. IsOpen="{TemplateBinding IsDropDownOpen}"
    44. AllowsTransparency="True"
    45. Focusable="False"
    46. PopupAnimation="Slide">
    47. <Grid Name="DropDown"
    48. SnapsToDevicePixels="True"
    49. MinWidth="{TemplateBinding ActualWidth}"
    50. MaxHeight="{TemplateBinding MaxDropDownHeight}">
    51. <Border
    52. x:Name="DropDownBorder"
    53. Background="{DynamicResource DarkBrush}"
    54. BorderThickness="1"
    55. BorderBrush="{DynamicResource DarkBrush}"/>
    56. <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
    57. <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
    58. </ScrollViewer>
    59. </Grid>
    60. </Popup>
    61. </Grid>
    62. <ControlTemplate.Triggers>
    63. <Trigger Property="HasItems" Value="false">
    64. <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
    65. </Trigger>
    66. <Trigger Property="IsEnabled" Value="false">
    67. <Setter Property="Foreground" Value="#888888"/>
    68. </Trigger>
    69. <Trigger Property="IsGrouping" Value="true">
    70. <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
    71. </Trigger>
    72. <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
    73. <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0"/>
    74. <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
    75. </Trigger>
    76. <Trigger Property="IsEditable" Value="true">
    77. <Setter Property="IsTabStop" Value="false"/>
    78. <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
    79. <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
    80. </Trigger>
    81. </ControlTemplate.Triggers>
    82. </ControlTemplate>
    83. </Setter.Value>
    84. </Setter>
    85. <Style.Triggers>
    86. </Style.Triggers>
    87. </Style>


    wenn ich diesen Style auskommentiere klappt es einwandfrei.
    Was muss ich in dem Style oben ändern damit es auch mit dem Style funktioniert?
    Ich vermute es liegt an dem ContentPresenter, nur alles was ich getestet habe brachte nichts.
    "Hier könnte Ihre Werbung stehen..."

    MichaHo schrieb:

    Was muss ich in dem Style oben ändern damit es auch mit dem Style funktioniert?


    Da musst du beim definieren des Styles (des zweiten Styles) diesen mit "BasedOn" definieren.

    Habe ich glaube ich in meinem Tut auch drinnen. aber schau mal hier: docs.microsoft.com/en-us/dotne…don?view=netframework-4.8

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    Nofear23m schrieb:

    Versuche mal das DataTemplate des GroupHeaders wie folgt abzuändern um zu sehen ob überhaupt Items zum Anzeigen vorhanden wären...

    hab ich gemacht, das sind definitiv Items drin:

    EDIT:
    BasedOn kenne ich, aber ich hab ja keine 2 ComboStyles. Ich habe doch nur einen zusätzlichen GroupStyle definiert.
    Hier mal der komplette Style aus den Resourcen für eine ComboBox:
    Spoiler anzeigen

    XML-Quellcode

    1. <!--#region ComboBox -->
    2. <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
    3. <Grid>
    4. <Grid.ColumnDefinitions>
    5. <ColumnDefinition />
    6. <ColumnDefinition Width="30" />
    7. </Grid.ColumnDefinitions>
    8. <Border
    9. x:Name="Border"
    10. Grid.ColumnSpan="2"
    11. CornerRadius="0"
    12. Background="{DynamicResource BlueBrush}"
    13. BorderBrush="{DynamicResource DarkBrush}"
    14. BorderThickness="1" />
    15. <Border
    16. Grid.Column="0"
    17. CornerRadius="0"
    18. Margin="0"
    19. BorderThickness="1"
    20. Background="{DynamicResource VeryVeryLightBrush}" />
    21. <Path
    22. x:Name="Arrow"
    23. Grid.Column="1"
    24. Fill="White"
    25. HorizontalAlignment="Center"
    26. VerticalAlignment="Center"
    27. Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
    28. />
    29. </Grid>
    30. <ControlTemplate.Triggers>
    31. <Trigger Property="ToggleButton.IsMouseOver" Value="true">
    32. <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource OrangeBrush}"/>
    33. </Trigger>
    34. <!--<Trigger Property="ToggleButton.IsChecked" Value="true">
    35. <Setter TargetName="Border" Property="Background" Value="#E0E0E0" />
    36. </Trigger>-->
    37. <Trigger Property="IsEnabled" Value="False">
    38. <Setter TargetName="Border" Property="Background" Value="#EEEEEE" />
    39. <Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" />
    40. <Setter Property="Foreground" Value="#888888"/>
    41. <Setter TargetName="Arrow" Property="Fill" Value="#888888" />
    42. </Trigger>
    43. </ControlTemplate.Triggers>
    44. </ControlTemplate>
    45. <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
    46. <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
    47. </ControlTemplate>
    48. <Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}" >
    49. <Setter Property="SnapsToDevicePixels" Value="true"/>
    50. <Setter Property="OverridesDefaultStyle" Value="true"/>
    51. <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    52. <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    53. <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    54. <Setter Property="MinWidth" Value="120"/>
    55. <Setter Property="MinHeight" Value="20"/>
    56. <Setter Property="Foreground" Value="{DynamicResource DarkBrush}"/>
    57. <Setter Property="Template">
    58. <Setter.Value>
    59. <ControlTemplate TargetType="{x:Type ComboBox}">
    60. <Grid>
    61. <ToggleButton
    62. Name="ToggleButton"
    63. Template="{StaticResource ComboBoxToggleButton}"
    64. Grid.Column="2"
    65. Focusable="false"
    66. IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
    67. ClickMode="Press">
    68. </ToggleButton>
    69. <ContentPresenter Name="ContentSite" IsHitTestVisible="False"
    70. Content="{TemplateBinding SelectionBoxItem}"
    71. ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
    72. ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
    73. Margin="3,3,23,3"
    74. VerticalAlignment="Center"
    75. HorizontalAlignment="Left" />
    76. <TextBox x:Name="PART_EditableTextBox"
    77. Style="{x:Null}"
    78. Template="{StaticResource ComboBoxTextBox}"
    79. HorizontalAlignment="Left"
    80. VerticalAlignment="Center"
    81. Margin="3,3,23,3"
    82. Focusable="True"
    83. Background="{DynamicResource VeryVeryLightBrush}"
    84. Foreground="{DynamicResource DarkBrush}"
    85. Visibility="Hidden"
    86. IsReadOnly="{TemplateBinding IsReadOnly}"/>
    87. <Popup
    88. Name="Popup"
    89. Placement="Bottom"
    90. IsOpen="{TemplateBinding IsDropDownOpen}"
    91. AllowsTransparency="True"
    92. Focusable="False"
    93. PopupAnimation="Slide">
    94. <Grid Name="DropDown"
    95. SnapsToDevicePixels="True"
    96. MinWidth="{TemplateBinding ActualWidth}"
    97. MaxHeight="{TemplateBinding MaxDropDownHeight}">
    98. <Border
    99. x:Name="DropDownBorder"
    100. Background="{DynamicResource DarkBrush}"
    101. BorderThickness="1"
    102. BorderBrush="{DynamicResource DarkBrush}"/>
    103. <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
    104. <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
    105. </ScrollViewer>
    106. </Grid>
    107. </Popup>
    108. </Grid>
    109. <ControlTemplate.Triggers>
    110. <Trigger Property="HasItems" Value="false">
    111. <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
    112. </Trigger>
    113. <Trigger Property="IsEnabled" Value="false">
    114. <Setter Property="Foreground" Value="#888888"/>
    115. </Trigger>
    116. <Trigger Property="IsGrouping" Value="true">
    117. <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
    118. </Trigger>
    119. <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
    120. <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0"/>
    121. <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
    122. </Trigger>
    123. <Trigger Property="IsEditable" Value="true">
    124. <Setter Property="IsTabStop" Value="false"/>
    125. <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
    126. <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
    127. </Trigger>
    128. </ControlTemplate.Triggers>
    129. </ControlTemplate>
    130. </Setter.Value>
    131. </Setter>
    132. <Style.Triggers>
    133. </Style.Triggers>
    134. </Style>
    135. <Style TargetType="{x:Type GroupItem}" x:Key="ComboStyle" >
    136. <Setter Property="Template">
    137. <Setter.Value>
    138. <ControlTemplate TargetType="{x:Type GroupItem}">
    139. <Expander IsExpanded="False" x:Name="ComboExpander"
    140. Header="{TemplateBinding Content}"
    141. HeaderTemplate="{TemplateBinding ContentTemplate}">
    142. <ItemsPresenter/>
    143. </Expander>
    144. </ControlTemplate>
    145. </Setter.Value>
    146. </Setter>
    147. </Style>
    148. <Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}" >
    149. <Setter Property="SnapsToDevicePixels" Value="true"/>
    150. <Setter Property="Foreground" Value="{DynamicResource DarkBrush}"/>
    151. <Setter Property="OverridesDefaultStyle" Value="True"/>
    152. <Setter Property="Template">
    153. <Setter.Value>
    154. <ControlTemplate TargetType="{x:Type ComboBoxItem}">
    155. <Border Name="Border"
    156. Padding="2"
    157. SnapsToDevicePixels="true">
    158. <ContentPresenter />
    159. </Border>
    160. <ControlTemplate.Triggers>
    161. <Trigger Property="IsHighlighted" Value="true">
    162. <Setter TargetName="Border" Property="Background" Value="{DynamicResource LightBrush}"/>
    163. </Trigger>
    164. <Trigger Property="IsEnabled" Value="false">
    165. <Setter Property="Foreground" Value="#888888"/>
    166. </Trigger>
    167. </ControlTemplate.Triggers>
    168. </ControlTemplate>
    169. </Setter.Value>
    170. </Setter>
    171. </Style>
    172. <!--#endregion-->

    "Hier könnte Ihre Werbung stehen..."
    Ja, da ist was im argen mit deinem Template.
    Kommentiert man das Template aus ist alles in Ordnung.

    Ich kann dir morgen mal nachsehen was ich in meinen Projekten für ein Template verwende und dir bescheid geben.
    Komisch ist es trotzdem.

    Sorry, finde den Fehler auf die schnelle auch nicht, kann man nur rumprobieren. Ich schau dir morgen mal nach, bin nur heute sehr viel Unterwegs.

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##