Making a WPF combobox with rounded corners

Question

In my application, I need to make the combobox that I am using have rounded corners. I started with the XAML posted in the answer to this question and have made some modifications. I decided I didn't like the way that one looked as much, so I tried to style it and make it look a bit more like the default combobox. Now my combobox looks like this: ,

and when dropped down:

The issue is that when the user places their mouse over the combobox, it looks like this: . If I use Snoop, I can see this info:

It says that the value of that border background is being set to "#FFBEE6FD", which is the color that shows when the mouse is over the combobox. The value source is "ParentTemplateTrigger". My issue is that I don't know where this border is coming from or why it's getting that value. I have tried to add template triggers with setters to set the background to white, but I don't know where to set the value for this mysterious border.

Here is the XAML for my ComboBox:

<ComboBox x:Name="ScanSizesComboBox"
              Style="{StaticResource roundedCornersComboBox}"
              Grid.ZIndex="4"
              ItemsSource="{Binding ScanSizes}"
              SelectedItem="{Binding SelectedScanSize, Mode=TwoWay}"
              ToolTip="{Binding (Validation.Errors)[0].ErrorContent}"
              Margin="0,10,89,0"
              HorizontalAlignment="Right"
              Width="61"
              Height="26"
              VerticalAlignment="Top"
              Grid.Row="4">

    </ComboBox>

And here is the style:

<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Grid>
                    <Border Name="ComboBoxTextBoxStyleBorder" CornerRadius="2"
                        BorderThickness="0,1,0,1"
                            Margin="0,0,1,1"
                        Background="{TemplateBinding Background}">
                        <Border.Style>
                            <Style TargetType="Border">
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="true">
                                        <Setter Property="Background" Value="White"/>
                                    </Trigger>

                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                        <ScrollViewer x:Name="PART_ContentHost"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="IsReadOnly" Value="True"/>
</Style>

<!--Rounded corners combo box-->
<Style TargetType="{x:Type ComboBox}" x:Key="roundedCornersComboBox">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                <Border Name="roundedCornerComboBoxBorder" BorderBrush="#CCCCCC" BorderThickness="1" CornerRadius="3" ClipToBounds="True" Background="White">
                    <Border.Style>
                        <Style TargetType="Border">
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Background" Value="White"/>
                                </Trigger>

                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <Canvas>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <TextBox Name="PART_EditableTextBox"
                                     Panel.ZIndex="0"
                                     Style="{StaticResource ComboBoxTextBoxStyle}"
                                     Padding="0,0,0,0"
                                     IsHitTestVisible="False"
                                     Height="{TemplateBinding Height}">
                            </TextBox>
                            <ToggleButton Grid.Column="1" Margin="0, 0, 0, 0"
                                         Panel.ZIndex="1"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
                                         BorderBrush="Transparent"
                                         Background="Transparent"
                                         Height="{TemplateBinding Height}"
                                         Width="60"
                                         IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                         HorizontalContentAlignment="Right"
                                         ClickMode="Press">

                                <ToggleButton.Style>
                                    <Style TargetType="ToggleButton">
                                        <Style.Triggers>
                                            <Trigger Property="IsMouseOver"
                                                    Value="true">
                                                <Setter Property="Background"
                                                        Value="White" />
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </ToggleButton.Style>

                                <Path Grid.Column="1"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Data="M 0 0 L 4 4 L 8 0 Z"
                                      Fill="DodgerBlue" />
                            </ToggleButton>
                            <ContentPresenter Name="ContentSite"
                                              Cursor="Arrow"
                                          Content="{TemplateBinding SelectionBoxItem}"
                                          ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                          VerticalAlignment="Center"
                                          HorizontalAlignment="Left"
                                          Margin="3,0,0,0">
                            </ContentPresenter>
                            <Popup Name="Popup"
                                   Placement="Bottom"
                                   IsOpen="{TemplateBinding IsDropDownOpen}"
                                   AllowsTransparency="True" 
                                   Focusable="False"
                                   PopupAnimation="Slide">
                                <Grid Name="DropDown"
                                      SnapsToDevicePixels="True"                
                                      MinWidth="{TemplateBinding ActualWidth}"
                                      MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                    <Border 
                                        x:Name="DropDownBorder"
                                        BorderThickness="1"
                                        CornerRadius="5"
                                        Background="White"
                                        BorderBrush="Black"/>
                                    <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                    </ScrollViewer>
                                </Grid>
                            </Popup>
                        </Grid>
                    </Canvas>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Ultimately, I would like for the user to be able to place his/her mouse over the combobox, and have it just look the same as it does when it is not highlighted. Any help is appreciated. Thanks.

Answer 1

<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                        <Border CornerRadius="5,0,0,5"
                            BorderThickness="1"
                            Background="{TemplateBinding Background}"
                                BorderBrush="Black">
                            <ScrollViewer x:Name="PART_ContentHost"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type ComboBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition MaxWidth="18"/>
                        </Grid.ColumnDefinitions>
                        <TextBox Name="PART_EditableTextBox"
                                 Style="{StaticResource ComboBoxTextBoxStyle}"
                                 Padding="5,0,0,0"
                                 Height="{TemplateBinding Height}"/>
                        <ToggleButton Grid.Column="1" Margin="0"
                                     Height="{TemplateBinding Height}"
                                     Style="{StaticResource ComboBoxButtonStyle}"
                                     Focusable="False"
                                     IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                      ClickMode="Press">
                            <Path Grid.Column="1"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  Data="M 0 0 L 4 4 L 8 0 Z"
                                  Fill="DodgerBlue" />
                        </ToggleButton>
                        <ContentPresenter Name="ContentSite"
                                      Content="{TemplateBinding SelectionBoxItem}"
                                      ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                      ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Left"
                                      Margin="5,0,0,0"/>
                        <Popup Name="Popup"
                               Placement="Bottom"
                               IsOpen="{TemplateBinding IsDropDownOpen}"
                               AllowsTransparency="True" 
                               Focusable="False"
                               PopupAnimation="Slide">
                            <Grid Name="DropDown"
                                  SnapsToDevicePixels="True"                
                                  MinWidth="{TemplateBinding ActualWidth}"
                                  MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                <Border 
                                    x:Name="DropDownBorder"
                                    BorderThickness="1"
                                    CornerRadius="5"
                                    Background="Azure"
                                    BorderBrush="Black"/>
                                <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 2

Continuing from our comments conversation (which generally SO tries to avoid so much noise) this may get on you track.

So if I grab just all the template stuff to a bare bones basic default ComboBox and ComboBoxItem from a fresh WPF app, this is the output. Granted you won't need all of it, but it should ensure to an extent all expected functionality and DOM parts are here for reference so you have all the stuff like Triggers, Template Binding pieces etc, all available.

Notice the various Border and Rectangle elements in the various parts that would need to be altered in order to achieve the rounding of everything. I can't however provide any insight into how it would effect anything with MahApps as my experience with that is pretty limited since I've always just made my own stuff to accomplish what it essentially does.

Hope it helps. It's too long for SO's submission requirements though so here's the PasteBin link.