CODEWITHSUNDEEP
wpfxamlcomboboxstyles
Toadums
Toadums

Reputation: 2812

Changing the border colors of a WPF combobox

So I am trying to change the style of my combobox in Expression blend.

What I did was create a combobox, and went RightClick > Edit Template > Edit a Copy

And I can change the colors of the combobox, except there is a white border in between the background of the combobox, and the border of the combobox. Here is a screen so you can see:

enter image description here

As you can see, there is a while border between the blue and red. As far as I can tell, the code to change the color of combobox is the following:

<ToggleButton Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, 
RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource 
ComboBoxReadonlyToggleButton}" BorderBrush="Red" Background="Blue"/>

But no matter what, there is always a white border. How do i get rid of it?

Upvotes: 8

Views: 9383

Answers (2)

praiseHellRaiseDale
praiseHellRaiseDale

Reputation: 2270

I know this is an old question, and it's specific to blend but when googling for this problem, this is one of the first things I found.

A really simple example of a way to fix this, that is a little less complex than the first answer mentioned is to set "Style" Properties. (Not sure this applies to blend since I don't use blend, but for simple wpf in visual studio, this works)

For example, this code below creates a window just like the one mentioned in the question, but with the white lines (in the drop down items) editable.

<ComboBox Background="Blue" BorderBrush="Red">
    <ComboBox.ItemContainerStyle>
        <!-- Without this style section, there are white lines around the borders.  Even if you set these properties in the comboBoxItem areas -->
        <Style TargetType="ComboBoxItem">
            <Setter Property="Background" Value="Green"/>
            <Setter Property="BorderBrush" Value="Purple"></Setter>
        </Style>
     </ComboBox.ItemContainerStyle>
     <ComboBoxItem MouseMove="schedule" Name="cbi1">schedule</ComboBoxItem>
</ComboBox>

Upvotes: 1

VLTII
VLTII

Reputation: 338

The problem is when you Edit a Copy, you're editing a copy with Microsoft's built-in chrome components. In order to change that outside border, you'll need to replace those bits with normal WPF controls so that you can change the values. For a combo box, you would want use the code here: http://msdn.microsoft.com/en-us/library/ms752094

e: This is the part you want to edit

 <Border x:Name="Border"
        Grid.ColumnSpan="2"
        CornerRadius="2"
        BorderThickness="1">
  <Border.BorderBrush>
    <LinearGradientBrush EndPoint="0,1"
                         StartPoint="0,0">
      <GradientStop Color="{DynamicResource BorderLightColor}"
                    Offset="0" />
      <GradientStop Color="{DynamicResource BorderDarkColor}"
                    Offset="1" />
    </LinearGradientBrush>
  </Border.BorderBrush>

Upvotes: 0

Related Questions