WPF - styling comboboxes

Question

I'm trying to style Comboboxes in WPF so that they are white, and have the same border as TextBoxes. I have the following style so far, but don't know how to set the border:

<Style TargetType="ComboBox">
    <Setter Property="Margin" Value="0,2,0,2" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Background" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                 ???
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

In between your controltemplate please implement something like this:

<Grid SnapsToDevicePixels="true">
    <Border
    x:Name="Bd"
    Background="Transparent"
    BorderBrush="#FF888888"
    Padding="1"
    CornerRadius="5" BorderThickness="2,2,2,2">
        <Grid
        Grid.IsSharedSizeScope="true">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" 
                   SharedSizeGroup="ComboBoxButton" />
            </Grid.ColumnDefinitions>
            <Border x:Name="SelectedItemBorder" Grid.ColumnSpan="2" />
            <ContentPresenter
              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
              Grid.Column="1"
              Content="{TemplateBinding SelectionBoxItem}"
              ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
              ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
              TextBlock.Foreground="White"
              Height="Auto"
              Margin="2,2,7,2"
              VerticalAlignment="Center" />
            <ToggleButton
              Style="{StaticResource ComboBoxTransparentButtonStyle}"
              Grid.ColumnSpan="3"
              IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, 
                          RelativeSource={RelativeSource TemplatedParent}}"
              Opacity="0.25" />
        </Grid>
    </Border>
    <Popup Focusable="false" AllowsTransparency="true"
      IsOpen="{Binding Path=IsDropDownOpen, 
               RelativeSource={RelativeSource TemplatedParent}}"
      Placement="Bottom" 
      PopupAnimation="{DynamicResource 
                      {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
      x:Name="PART_Popup">
        <Border CornerRadius="5" x:Name="DropDownBorder"
          MaxHeight="{TemplateBinding MaxDropDownHeight}"
          MinWidth="{TemplateBinding ActualWidth}"
          Background="#FF7E7E7E"
          BorderThickness="1">
            <ScrollViewer Foreground="#FFFFFFFF">
                <ItemsPresenter
                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                   KeyboardNavigation.DirectionalNavigation="Contained"
                   TextBlock.Foreground="White"
                   VerticalAlignment="Stretch" />
            </ScrollViewer>
        </Border>
    </Popup>
</Grid>
<ControlTemplate.Triggers>
    <Trigger Property="IsFocused" Value="True">
        <Setter Property="BorderBrush" TargetName="Bd" Value="#FFFFFFFF"/>
    </Trigger>
    <Trigger Property="IsMouseOver" Value="True">
    <Setter Property="BorderBrush" TargetName="Bd" Value="#FFD2ECCF"/>
    </Trigger>
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsSelectionBoxHighlighted" Value="true" />
            <Condition Property="IsDropDownOpen" Value="false" />
        </MultiTrigger.Conditions>
        <Setter Property="Foreground" Value="white" />
        <Setter Property="BorderBrush" Value="{x:Null}" />
    </MultiTrigger>
    <Trigger Property="IsSelectionBoxHighlighted" Value="true">
        <Setter Property="Background" TargetName="SelectedItemBorder"
           Value="Transparent" />
    </Trigger>
    <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
    </Trigger>
    <Trigger Property="HasItems" Value="false">
        <Setter Property="MinHeight" TargetName="DropDownBorder" Value="95" />
    </Trigger>
    <Trigger Property="IsEnabled" Value="false">
        <Setter Property="Foreground" 
           Value="{DynamicResource 
                  {x:Static SystemColors.GrayTextBrushKey}}" />
    <Setter Property="Background" TargetName="Bd" 
       Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
    </Trigger>
    <Trigger Property="IsGrouping" Value="true">
        <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
    </Trigger>
</ControlTemplate.Triggers>

Answer 2

Use Expression Blend. If you want ComboBox to look similar to TextBox, have a look at TextBox template by right clicking TextBlock and selecting Edit Template > Edit a Copy and use that to modify your ComboBox template!