Search code examples
.netwpfcomboboxmargin

Combobox WPF not in line popup items

I have a question... I cannot have the items from the combobox inline. I tried to move the margins, but it does not make sense... I attach the images: enter image description here

This is the normal status (not adding any margin)

enter image description here

This is the status if I add a margin to the Grid in the combobox.

My code is the following:

<!-- ComboBox Styles  -->

<Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
    <Setter Property="TextElement.Foreground" Value="{StaticResource WindowTextColorBrush}" />
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="Height" Value="60" />
    <Setter Property="FontSize" Value="16" />
    <Setter Property="Foreground" Value="{StaticResource SelectedRowColorBrush}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Border
                    BorderBrush="{StaticResource TextBoxBorderColorBrush}"
                    BorderThickness="2">
                    <Grid>
                        <ToggleButton
                            Name="ToggleButton"
                            Grid.Column="0"
                            ClickMode="Press"
                            Focusable="False"
                            IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                            Template="{StaticResource ComboBoxToggleButtonTemplate}" />
                       <ContentPresenter
                            Name="ContentSite"
                            Margin="10"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center"
                            Content="{TemplateBinding ComboBox.SelectionBoxItem}"
                            ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
                            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                            IsHitTestVisible="False" />
                        <!-- Popup showing items -->
                        <Popup
                            Name="Popup"
                            AllowsTransparency="True"
                            Focusable="False"
                            IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
                            Placement="Bottom"
                            PopupAnimation="Slide">
                            <Grid
                                Name="DropDown"
                                MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                                MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"
                                SnapsToDevicePixels="True">
                                <Border
                                    Name="DropDownBorder"
                                    Background="{StaticResource MainLightColorBrush}"
                                    BorderBrush="{StaticResource SecondaryLightColorBrush}"
                                    BorderThickness="2"/>
                                <ScrollViewer SnapsToDevicePixels="True">
                                    <ItemsPresenter
                                        Margin="0"
                                        HorizontalAlignment="Stretch"
                                        KeyboardNavigation.DirectionalNavigation="Contained" />
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="ItemsControl.HasItems" Value="False">
                        <Setter TargetName="DropDownBorder" Property="FrameworkElement.MinHeight" Value="95" />
                    </Trigger>
                    <Trigger Property="UIElement.IsEnabled" Value="False">
                        <Setter Property="Opacity" Value="0.5" />
                        <Setter Property="Background" Value="{StaticResource SelectedRowColorBrush}" />
                    </Trigger>
                    <Trigger Property="ItemsControl.IsGrouping" Value="True">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="False" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- ComboBox Item Styles  -->

<Style TargetType="{x:Type ComboBoxItem}">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontSize" Value="16" />
    <Setter Property="BorderBrush" Value="{StaticResource SelectedRowColorBrush}" />
    <Setter Property="Foreground" Value="{StaticResource SelectedRowColorBrush}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBoxItem">
               <Border
                    Name="Border"
                    Margin="0"
                    Padding="10"
                    BorderThickness="1">
                    <TextBlock
                        Height="30"
                        VerticalAlignment="Center"
                        TextAlignment="Left">
                        <ContentPresenter />
                    </TextBlock>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted" Value="True">
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource HoverRowColorBrush}" />
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource HoverRowColorBrush}" />
                        <Setter TargetName="Border" Property="Margin" Value="2" />
                        <Setter Property="Foreground" Value="{StaticResource SelectedRowColorBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Has anyone idea of what could be happening?

Thanks in advance...

Edit: colorstyles.xaml is required, so:

<!--  Light  Colors  -->
    <Color x:Key="MainLightColor">#f8f9fa</Color>
    <Color x:Key="SecondaryLightColor">#008ecf</Color>
    <Color x:Key="TextLightColor">White</Color>

    <!--  Dark  Colors  -->
    <Color x:Key="MainDarkColor">Black</Color>
    <Color x:Key="SecondaryDarkColor">#d1e4ff</Color>
    <Color x:Key="TextDarkColor">Black</Color>

    <!--  Messages  -->
    <Color x:Key="WarningColor">Orange</Color>
    <Color x:Key="InfoColor">Green</Color>
    <Color x:Key="ErrorColor">Red</Color>

    <!--  Loading  -->
    <Color x:Key="LoadingAnimationColor">#f7f7f7</Color>
    <Color x:Key="InlineLoadingAnimationColor">#d1e4ff</Color>


    <!--  Zoom Control  -->
    <Color x:Key="ZoomControlColor">LightGray</Color>

    <!--#region Colors-->
    <SolidColorBrush x:Key="MainLightColorBrush" Color="{StaticResource MainLightColor}" />
    <SolidColorBrush x:Key="SecondaryLightColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <SolidColorBrush x:Key="TextLightColorBrush" Color="{StaticResource TextLightColor}" />
    <SolidColorBrush x:Key="TextDarkColorBrush" Color="{StaticResource TextDarkColor}" />
    <!--#endregion-->


    <!--#region  Window-->
    <SolidColorBrush x:Key="WindowBackgroundColorBrush" Color="{StaticResource MainLightColor}" />
    <SolidColorBrush x:Key="WindowTextColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <!--#endregion-->

    <!--#region  Popup-->
    <SolidColorBrush x:Key="PopUpBackgroundColorBrush" Color="{StaticResource MainLightColor}" />
    <SolidColorBrush x:Key="PopUpTextColorBrush" Color="{StaticResource TextLightColor}" />
    <SolidColorBrush x:Key="PopUpBorderColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <!--#endregion-->

    <!--#region  Forms-->
    <SolidColorBrush x:Key="FormsBackgroundColorBrush" Color="{StaticResource MainLightColor}" />
    <SolidColorBrush x:Key="TabFormBackgroundColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <SolidColorBrush x:Key="FormsTextColorBrush" Color="{StaticResource TextLightColor}" />
    <SolidColorBrush x:Key="FormsErrorTextColorBrush" Color="{StaticResource ErrorColor}" />
    <SolidColorBrush x:Key="FormsBorderColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <!--#endregion-->

    <!--#region  Buttons-->
    <!--#region Normal Button-->
    <SolidColorBrush x:Key="BtnBackgroundColorBrush" Color="{StaticResource MainLightColor}" />
    <SolidColorBrush x:Key="BtnTextColorBrush" Color="{StaticResource TextLightColor}" />
    <SolidColorBrush x:Key="BtnBorderColorBrush" Color="{StaticResource MainLightColor}" />
    <!--#endregion-->
    <!--#region Action Button-->
    <SolidColorBrush x:Key="BtnActionBackgroundColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <SolidColorBrush x:Key="BtnActionTextColorBrush" Color="{StaticResource MainLightColor}" />
    <SolidColorBrush x:Key="BtnActionBorderColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <SolidColorBrush x:Key="BtnNextBackTextColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <!--#endregion-->
    <!--#region Disable-->
    <SolidColorBrush x:Key="BtnDisableBackgroundColorBrush" Color="{StaticResource MainLightColor}" />
    <SolidColorBrush x:Key="BtnDisableTextColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <SolidColorBrush x:Key="BtnDisableBorderColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <!--#endregion-->
    <!--#region Selected-->
    <SolidColorBrush x:Key="BtnSelectedBackgroundColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <SolidColorBrush x:Key="BtnSelectedTextColorBrush" Color="{StaticResource TextLightColor}" />
    <SolidColorBrush x:Key="BtnSelectedBorderColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <!--#endregion-->
    <!--#endregion-->

    <!--#region ListItem-->
    <SolidColorBrush x:Key="ListItemEnableBackgroundColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <SolidColorBrush x:Key="ListItemEnableTextColorBrush" Color="{StaticResource TextDarkColor}" />
    <SolidColorBrush x:Key="ListItemEnableBorderColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <SolidColorBrush x:Key="SelectedRowColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <SolidColorBrush x:Key="HoverRowColorBrush" Color="{StaticResource SecondaryDarkColor}" />
    <!--#endregion-->

    <!--#region TextBox-->
    <SolidColorBrush x:Key="TextBoxBackgroundColorBrush" Color="{StaticResource MainLightColor}" />
    <SolidColorBrush x:Key="TextBoxTextColorBrush" Color="{StaticResource TextLightColor}" />
    <SolidColorBrush x:Key="TextInputColorBrush" Color="{StaticResource MainDarkColor}" />
    <SolidColorBrush x:Key="TextBoxBorderColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <!--#endregion-->

    <!--#region Icon-->
    <SolidColorBrush x:Key="IconLightColorBrush" Color="{StaticResource MainLightColor}" />
    <SolidColorBrush x:Key="IconDarkColorBrush" Color="{StaticResource MainDarkColor}" />
    <SolidColorBrush x:Key="IconColorBrush" Color="{StaticResource SecondaryLightColor}" />

    <!--#endregion-->

    <!--#region Messages-->
    <SolidColorBrush x:Key="WarningColorBrush" Color="{StaticResource WarningColor}" />
    <SolidColorBrush x:Key="InfoColorBrush" Color="{StaticResource InfoColor}" />
    <SolidColorBrush x:Key="ErrorColorBrush" Color="{StaticResource ErrorColor}" />
    <!--#endregion-->

    <!--#region Overview Forms-->
    <SolidColorBrush x:Key="OverviewFormBorderColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <!--#endregion-->

    <!--#region Selected-->
    <SolidColorBrush x:Key="FontButtonColorBrush" Color="{StaticResource TextLightColor}" />
    <SolidColorBrush x:Key="FontGenericColorBrush" Color="{StaticResource SecondaryLightColor}" />
    <!--#endregion-->

    <!--#region Material Design Colors -->
    <SolidColorBrush x:Key="PrimaryHueMidBrush2" Color="{StaticResource SecondaryLightColor}" />
    <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="{StaticResource MainLightColor}" />
    <!--#endregion-->
Solution

  • The offset comes from your border surrounding the template not the button, thus adding to its thicknes.

    this will work for you:

     <Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}">
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="TextElement.Foreground" Value="{StaticResource WindowTextColorBrush}" />
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="Height" Value="60" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Foreground" Value="{StaticResource SelectedRowColorBrush}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                            <Grid>
                                <ToggleButton
                            Name="ToggleButton"
                            Grid.Column="0"
                            ClickMode="Press"
                            Focusable="False"
                            IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                            Template="{StaticResource ComboBoxToggleButtonTemplate}" />
                        <Border
                    BorderBrush="{StaticResource TextBoxBorderColorBrush}"
                    BorderThickness="2">
                                <ContentPresenter
                            Name="ContentSite"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center"
                            Content="{TemplateBinding ComboBox.SelectionBoxItem}"
                            ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
                            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                            IsHitTestVisible="False" />
                                <!-- Popup showing items -->
                        </Border>
                                <Popup
                            Name="Popup"
                            AllowsTransparency="True"
                            Focusable="False"
                            IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
                            Placement="Bottom"
                            PopupAnimation="Slide">
                                    <Grid
                                Name="DropDown"
                                MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                                MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
                                        <Border
                                    Name="DropDownBorder"
                                    Background="{StaticResource MainLightColorBrush}"
                                    BorderBrush="{StaticResource SecondaryLightColorBrush}"
                                    BorderThickness="2"/>
                                        <ScrollViewer SnapsToDevicePixels="True">
                                            <ItemsPresenter
                                        Margin="0"
                                        HorizontalAlignment="Stretch"
                                        KeyboardNavigation.DirectionalNavigation="Contained" />
                                        </ScrollViewer>
                                    </Grid>
                                </Popup>
                            </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ItemsControl.HasItems" Value="False">
                                <Setter TargetName="DropDownBorder" Property="FrameworkElement.MinHeight" Value="95" />
                            </Trigger>
                            <Trigger Property="UIElement.IsEnabled" Value="False">
                                <Setter Property="Opacity" Value="0.5" />
                                <Setter Property="Background" Value="{StaticResource SelectedRowColorBrush}" />
                            </Trigger>
                            <Trigger Property="ItemsControl.IsGrouping" Value="True">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="False" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>