Modify control template slightly using Style

Question

I just need to add a thick border around the ComboBox. As you may already know, ComboBox's BorderThickness property is not of much use. So I'm trying to modify the Template using following style, but can't figure out what I need to write inside the Border tag to represent the ComoboBox itself:

<Style TargetType="{x:Type ComboBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Border BorderBrush="Black" BorderThickness="2">
                    WHAT GOES HERE?
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I have tried ContentPresenter and ContentControl but honestly don't know much about their usage in this particular scenario.

Answer 1

You have to edit the complete controlTemplate. Here is a small example you can extend at will. First of all a controlTemplate for the ToggleButton that opens the combobox:

 <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="15" />
            </Grid.ColumnDefinitions>
            <Border x:Name="Border"  Grid.ColumnSpan="2" BorderThickness="1" />
            <Path x:Name="Arrow" 
              Fill="Black" 
              SnapsToDevicePixels="True" 
              StrokeThickness="1" 
              VerticalAlignment="Center" 
              HorizontalAlignment="Center" 
              Grid.Column="1" 
              Data="M0,0 L0,3 L1,3 L1,4 L2,4 L2,5 L3,5 L3,6 L4,6 L4,5 L5,5 L5,4 L6,4 L6,3 L7,3 L7,0 L6,0 L6,1 L5,1 L5,2 L4,2 L4,3 L3,3 L3,2 L2,2 L2,1 L1,1 L1,0 L0,0 Z" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Gray" TargetName="Border"/>
                <Setter Property="BorderBrush" Value="DarkGray" TargetName="Border"/>
            </Trigger>
            <Trigger Property="IsFocused" Value="true">
                <Setter Property="BorderBrush" Value="DarkGray" TargetName="Border"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

And here is the style for the combobox that uses this template.

<Style TargetType="{x:Type ComboBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Border CornerRadius="5" BorderThickness="2" BorderBrush="Red">
                        <Grid>
                        <ToggleButton x:Name="ToggleButton" 
                                      Grid.Column="2"
                                      Focusable="false"
                                      ClickMode="Press"
                                      IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                      Template="{StaticResource ComboBoxToggleButton}"/>
                        <ContentPresenter x:Name="ContentSite"
                                        IsHitTestVisible="False"
                                        Content="{TemplateBinding SelectionBoxItem}"
                                        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                        Margin="3,3,21,3"
                                        VerticalAlignment="Stretch"
                                        HorizontalAlignment="Left">
                        </ContentPresenter>
                        <TextBox x:Name="PART_EditableTextBox"
                               Style="{x:Null}"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Bottom"
                               Margin="3,3,21,3"
                               Focusable="True"
                               Background="Transparent"
                               Visibility="Hidden"
                               IsReadOnly="{TemplateBinding IsReadOnly}" />
                        <Popup x:Name="Popup"
                             Placement="Bottom"
                             IsOpen="{TemplateBinding IsDropDownOpen}"
                             AllowsTransparency="True"
                             Focusable="False"
                             PopupAnimation="Slide">
                            <Grid x:Name="DropDown"
                                  Background="WhiteSmoke"
                                  SnapsToDevicePixels="True"
                                  MinWidth="{TemplateBinding ActualWidth}"
                                  MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                    <Border x:Name="DropDownBorder"  BorderThickness="1" Margin="0 0 2 0" />
                                    <ScrollViewer SnapsToDevicePixels="True">
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                    </ScrollViewer>
                            </Grid>
                        </Popup>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Hope it helps.

Answer 2

Well if I get you right, you want to put the original ComboBox in that Border, right? You can find an example template customization here.
So if you copy the important part (the Grid) in your Border it should look like the standard ComboBox with a thicker Border. Perhaps you will have to do some minor modifications, so that it looks perfect. Btw, MS Blend would be a great help here.