如何让WPF中ComboBox的下拉箭头随控件大小缩放？

我的WPF应用运行在Windows IoT系统上，为适配触摸屏操作，把ComboBox放在UniformGrid里，控件尺寸拉得很大。目前文本、下拉项、按钮等元素都能正常随控件缩放，唯独下拉箭头图形固定大小，不跟着控件尺寸变化。之前尝试用LayoutTransform和ScaleTransform会把整个ComboBox都缩放，我只需要单独调整下拉箭头的大小。

当前ComboBox代码：

<UniformGrid Grid.Row="1" Columns="2" Rows="5">
<Label Content="{x:Static properties:Resources.UnitsSettings_Pressure}"/>
<ComboBox ItemsSource="{Binding Source={helpers:EnumBindingSource {x:Type settings:PRESSURE_UNITS}}}" SelectedItem="{Binding PressureUnits}"
          MaxDropDownHeight="600" 
          BorderBrush="#FF46AA2D" 
          BorderThickness="4" 
          Background="White" 
          Foreground="Black" 
          FontFamily="Microsoft Sans Serif" 
          FontSize="36" 
          HorizontalContentAlignment="Center" 
          VerticalContentAlignment="Center" 
          VerticalAlignment="Stretch" 
          HorizontalAlignment="Stretch" 
          Focusable="False"
          Margin="2"
          ScrollViewer.PanningMode="VerticalOnly"
          ScrollViewer.PanningDeceleration="0.001"
          ScrollViewer.PanningRatio="1">
</ComboBox>

之前尝试的缩放代码（会缩放整个ComboBox）：

<UniformGrid Grid.Row="1" Columns="2" Rows="5">
<Label Content="{x:Static properties:Resources.UnitsSettings_Pressure}"/>
<ComboBox ItemsSource="{Binding Source={helpers:EnumBindingSource {x:Type settings:PRESSURE_UNITS}}}" SelectedItem="{Binding PressureUnits}"
          MaxDropDownHeight="600" 
          BorderBrush="#FF46AA2D" 
          BorderThickness="4" 
          Background="White" 
          Foreground="Black" 
          FontFamily="Microsoft Sans Serif" 
          FontSize="36" 
          HorizontalContentAlignment="Center" 
          VerticalContentAlignment="Center" 
          VerticalAlignment="Stretch" 
          HorizontalAlignment="Stretch" 
          Focusable="False"
          Margin="2"
          ScrollViewer.PanningMode="VerticalOnly"
          ScrollViewer.PanningDeceleration="0.001"
          ScrollViewer.PanningRatio="1">
          
        <ComboBox.Resources>
            <Style TargetType="ComboBox">
                <Setter Property="LayoutTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleX="2.0" ScaleY="2"/>
                    </Setter.Value>
                </Setter>
            </Style>
        </ComboBox.Resources>
</ComboBox>

解决方法 #

方法一：重写模板实现自适应箭头（推荐） #

核心是重写ComboBox的ControlTemplate，单独定义下拉箭头的ToggleButton，让箭头图形随按钮大小自适应缩放。用Path绘制箭头并设置Stretch="Uniform"，这样箭头会自动匹配控件尺寸。

完整示例代码：

<UniformGrid Grid.Row="1" Columns="2" Rows="5">
    <Label Content="{x:Static properties:Resources.UnitsSettings_Pressure}"/>
    <ComboBox ItemsSource="{Binding Source={helpers:EnumBindingSource {x:Type settings:PRESSURE_UNITS}}}" SelectedItem="{Binding PressureUnits}"
              MaxDropDownHeight="600" 
              BorderBrush="#FF46AA2D" 
              BorderThickness="4" 
              Background="White" 
              Foreground="Black" 
              FontFamily="Microsoft Sans Serif" 
              FontSize="36" 
              HorizontalContentAlignment="Center" 
              VerticalContentAlignment="Center" 
              VerticalAlignment="Stretch" 
              HorizontalAlignment="Stretch" 
              Focusable="False"
              Margin="2"
              ScrollViewer.PanningMode="VerticalOnly"
              ScrollViewer.PanningDeceleration="0.001"
              ScrollViewer.PanningRatio="1">
        <!-- 重写ComboBox的ControlTemplate -->
        <ComboBox.Template>
            <ControlTemplate TargetType="ComboBox">
                <Grid>
                    <ToggleButton 
                        x:Name="toggleButton"
                        Template="{StaticResource ComboBoxToggleButtonTemplate}"
                        Grid.Column="2" 
                        Focusable="false"
                        IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                        ClickMode="Press"/>
                    <ContentPresenter
                        x:Name="contentPresenter"
                        IsHitTestVisible="False" 
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Content="{TemplateBinding SelectionBoxItem}"
                        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
                    <Popup
                        x:Name="popup"
                        Placement="Bottom"
                        IsOpen="{TemplateBinding IsDropDownOpen}"
                        AllowsTransparency="True" 
                        Focusable="False"
                        PopupAnimation="Slide">
                        <Grid 
                            x:Name="dropDown"
                            SnapsToDevicePixels="True"                
                            MinWidth="{TemplateBinding ActualWidth}"
                            MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border 
                                x:Name="dropDownBorder"
                                BorderThickness="1"
                                BorderBrush="#FF46AA2D"
                                Background="White"/>
                            <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="dropDownBorder" Property="MinHeight" Value="95"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#ADADAD"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ComboBox.Template>
    </ComboBox>
</UniformGrid>

<!-- 在窗口资源中定义下拉箭头的ToggleButton模板 -->
<Window.Resources>
    <ControlTemplate x:Key="ComboBoxToggleButtonTemplate" TargetType="ToggleButton">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="40"/>
            </Grid.ColumnDefinitions>
            <Border
                x:Name="Border" 
                Grid.ColumnSpan="2"
                CornerRadius="0"
                Background="White"
                BorderBrush="#FF46AA2D"
                BorderThickness="0"/>
            <Border 
                x:Name="Border2"
                Grid.Column="1"
                CornerRadius="0"
                Background="Transparent"
                BorderBrush="#FF46AA2D"
                BorderThickness="1,0,0,0"/>
            <!-- 自适应缩放的下拉箭头 -->
            <Path 
                x:Name="Arrow"
                Grid.Column="1"     
                Fill="Black"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Data="M 0 0 L 4 4 L 8 0 Z"
                Stretch="Uniform"
                Width="20" Height="20"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter TargetName="Border" Property="Background" Value="#F0F0F0"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="true">
                <Setter TargetName="Arrow" Property="Data" Value="M 0 4 L 4 0 L 8 4 Z"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
                <Setter TargetName="Arrow" Property="Fill" Value="#ADADAD"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>

方法二：单独对箭头应用缩放变换 #

如果不想完全重写模板，可以用Blend工具导出ComboBox的默认模板，找到箭头对应的Path元素，单独给它添加LayoutTransform，只缩放下拉箭头。

示例修改：

<Path x:Name="Arrow" ...>
    <Path.LayoutTransform>
        <ScaleTransform ScaleX="2" ScaleY="2"/>
    </Path.LayoutTransform>
</Path>

注意事项 #

• 用Blend提取默认模板可以保留原有样式，仅修改箭头部分，避免破坏ComboBox的默认交互逻辑
• 方法一的自适应方式更适合触摸屏场景，箭头大小会随ComboBox高度自动调整，无需手动设置缩放比例
• 记得在Windows IoT环境下测试，部分WPF特性在IoT系统中可能存在细微差异

内容的提问来源于stack exchange，提问作者Baddack