Search code examples
c#wpfxamlcomboboxavalonia

Add border below text in combobox WPF


I need to add a line below every popped up line in Combobox. So now I have Combobox that looks like this: Existing Combobox

And poped up lines implemented with this XAML code:

          <Popup Name="PART_Popup"
             WindowManagerAddShadowHint="False"
             IsOpen="{TemplateBinding IsDropDownOpen, Mode=TwoWay}"
             MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
             MaxHeight="{TemplateBinding MaxDropDownHeight}"
             PlacementTarget="{TemplateBinding}"
             IsLightDismissEnabled="True">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="5*"/>
            <RowDefinition Height="10*"/>
          </Grid.RowDefinitions>
          <Border x:Name="PopupBorder"
                  Grid.Row="1"
                  Background="#00A9FF"
                  BorderBrush="Black"
                  BorderThickness="{DynamicResource ComboBoxDropdownBorderThickness}"
                  Margin="0,-1,0,-1"
                  Padding="0"
                  HorizontalAlignment="Stretch"
                  CornerRadius="0"
                  Grid.Column="2"
                  >
           
            <ScrollViewer>
              <ItemsPresenter Name="PART_ItemsPresenter"
                              Items="{TemplateBinding Items}"
                              Margin="{DynamicResource ComboBoxDropdownContentMargin}"
                              ItemsPanel="{TemplateBinding ItemsPanel}"
                              ItemTemplate="{TemplateBinding ItemTemplate}"
                              VirtualizationMode="{TemplateBinding VirtualizationMode}"
                              />
             
            </ScrollViewer>
            
          </Border>
          
         
        </Grid>
      </Popup>

And I need to make Combobox similar to this one: Desired Combobox

I couldn't insert some additional borders to make lines appear, so I have no idea what to do.


Solution

  • You need to modify the style/control template of ComboBoxItem instead of ComboBox.

    You can modify the control template of ComboBoxItem and put the line there.

    Another option is to create a default ItemTemplate for the ComboBox's style, but that could be easily overridden by developers.