c# - 更改wpf中组合框的按钮大小

Question

有什么方法可以增加组合框中按钮[具有向下箭头符号]的大小吗？我增加了组合框的高度和宽度，但箭头按钮与整体尺寸不成比例。

提前致谢，约翰。

Answer 1

您是在谈论可编辑的 ComboBox 吗？在普通的 ComboBox 中，“按钮”是(未展开的)ComboBox 的整个大小。所以我认为您一定是在谈论可编辑的 ComboBox，其中按钮右对齐，文本框占据其余空间。

听起来您希望按钮的宽度成比例，而不是只占用它必须占用的空间。

如果我在这方面是正确的，那么您将需要按照下面 Russell Troywest 的建议编辑 ControlTemplate。特别是，我认为您会想要更改 Placement Grid 定义其列定义的方式。它们当前定义为包含文本框的列的 * 和包含按钮的列的 Auto。您可能希望分别将它们更改为 3* 和 *(这将使文本框始终占宽度的 75%，按钮始终占宽度的 25%的宽度)。

当你在那里的时候，你可能还想改变小下拉箭头的绘制方式(它只是一个 Path 对象)，因为看起来这么小可能有点奇怪当按钮本身有那么大时。

编辑:

我正在添加更多信息，但不确定您要查找什么。

当您编辑 ComboBox 的模板时(我推荐使用 Blend，它可以非常容易地把这些东西拉出来 - 只需右键单击它，选择编辑模板，然后编辑一个副本并混合将拉出所有默认样式/模板供您编辑)，您会在某处找到这段代码:

<ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}">
    <Grid x:Name="Placement" SnapsToDevicePixels="true">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
            <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=Placement}">
                    <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
                        <ScrollViewer x:Name="DropDownScrollViewer">
                            <Grid RenderOptions.ClearTypeHint="Enabled">
                                <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                    <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
                                </Canvas>
                                <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Grid>
                        </ScrollViewer>
                    </Border>
                </Microsoft_Windows_Themes:SystemDropShadowChrome>
            </Popup>
            <Microsoft_Windows_Themes:ListBoxChrome x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}"/>
            <TextBox x:Name="PART_EditableTextBox" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" Margin="{TemplateBinding Padding}" Style="{StaticResource ComboBoxEditableTextBox}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
            <ToggleButton Grid.Column="1" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsKeyboardFocusWithin" Value="true">
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
            <Trigger Property="IsDropDownOpen" Value="true">
                <Setter Property="RenderFocused" TargetName="Border" Value="true"/>
            </Trigger>
            <Trigger Property="HasItems" Value="false">
                <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                <Setter Property="Background" Value="#FFF4F4F4"/>
            </Trigger>
            <Trigger Property="IsGrouping" Value="true">
                <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
            </Trigger>
            <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
                <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
                <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
            </Trigger>
            <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
                <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
                <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

这是 ComboBox 可编辑状态的 ControlTemplate。要查看的关键部分是顶部放置网格的 ColumnDefinitions。它们当前定义为:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

这意味着 ToggleButton(在第二列中)得到它需要的任何空间，而 TextBox(在第一列中)得到剩余的空间您为 ComboBox 提供的空间。

您只需将该部分更改为:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="3*"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

出于我上面描述的原因(如果 3:1 的比例不适合您，显然您需要确定正确的比例)。

您还会看到 ToggleButton 的 Style 为 ComboBoxToggleButton，它也可以在 Blend 生成的资源中找到。这将包含 Path 对象，如果您选择这样做，您需要编辑该对象以更改小箭头的大小。