使用 Style 稍微修改控件模板

Question

我只需要在ComboBox 周围添加一个粗边框。您可能已经知道，ComboBox 的BorderThickness 属性没有多大用处。所以我尝试使用以下样式修改Template，但无法弄清楚我需要在Border 标签内写什么来表示ComoboBox 本身：

<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>

我尝试过ContentPresenter 和ContentControl，但老实说，我不太了解它们在这种特殊情况下的用法。

Answer 1

好吧，如果我猜对了，你想把原来的ComboBox 放在那个Border 中，对吧？您可以找到一个示例模板自定义here。
因此，如果您将重要部分（Grid）复制到您的Border 中，它应该看起来像标准的ComboBox，带有更厚的Border。也许您将不得不做一些小的修改，以使其看起来完美。顺便说一句，MS Blend 在这里会很有帮助。

Answer 2

您必须编辑完整的 controlTemplate。这是一个你可以随意扩展的小例子。 首先是打开组合框的 ToggleButton 的 controlTemplate：

 <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>

这是使用此模板的组合框的样式。

<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>

希望对你有帮助。