changing the button size of the combo box in wpf

Is there any way to increase the size of the button[which have the down arrow symbol] inside the combo box? 开发者_JAVA百科I increased the height and width of the combo box but the arrow button is not propotional to the overall dimensions.

Thanks in advance, John.

Are you talking about an editable ComboBox? In a normal ComboBox, the "button" is the entire size of the (unexpanded) ComboBox. So I think you must be talking about an editable ComboBox where the button is right-justified with a textbox taking up the rest of the space.

It sounds like you want the width of the button to be proportional, rather than just taking up the space that it has to take.

If I'm right in that regard, then you'll want to edit the ControlTemplate, as suggested by Russell Troywest below. In particular, I think you'll want to change the way the Placement Grid has its column definitions defined. They are currently defined as * for the column containing the textbox and Auto for the column containing the button. You'll probably want to change those to, say, 3* and *, respectively (which would make the textbox always 75% of the width and the button always 25% of the width).

While you're in there, you may also want to change the way the little dropdown arrow is drawn (it's just a Path object) because it might be a little odd looking to be that small when you've got the button itself that large.

Edit:

I'm adding some more information, but I'm not sure what you're looking for.

When you edit the Template for the ComboBox (I recommend using Blend, makes it super easy to pull this stuff out - just right click on it, choose Edit Template, then Edit a Copy and Blend will pull out all the default styles/templates for you to edit), you'll find this piece of code in there somewhere:

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

This is the ControlTemplate for the Editable state of the ComboBox. The key part to look at is the ColumnDefinitions for the Placement grid at the top. They're current defined as:

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

Which means that the ToggleButton (Which is in the second column) gets just whatever space it needs and the TextBox (which is in the first column) gets the rest of the space that you've given the ComboBox.

You'll want to change just that section to something like:

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

for the reasons I described above (obviously you need to determine the correct proportions if a 3:1 ratio isn't correct for you).

You'll also see the ToggleButton has a Style of ComboBoxToggleButton, which will also be found in the resources generated by Blend. That will contain the Path object that you need to edit to change the size of the little arrow if you choose to do so.

Do you want the whole combo box to be bigger, including the text and the dropdown button and the dropdown arrow? This could be useful e.g. for a kiosk or touch screen.

If so, then you could use a scale transform -- just make the entire combobox appear at 200% of its original size, or 300%, or whatever. WPF is vector so it scales well.

To do this, you would use a ScaleTransform as your LayoutTransform. This would scale your ComboBox up to 3x its normal size:

<ComboBox ItemsSource="...">
    <ComboBox.LayoutTransform>
        <ScaleTransform ScaleX="3" ScaleY="3"/>
    </ComboBox.LayoutTransform>
</ComboBox>

which would look like this (before and after applying the ScaleTransform):

You might also look into the Viewbox, if your goal is to take a few controls and stretch them to fill the whole screen. It's effectively the same as the ScaleTransform, but instead of hard-coding a zoom level, you let the Viewbox automatically scale your content to fill its parent.

I think you will need to mess with the control template. This question is doing something similar so the answers might push you in the right direction.

i'm pretty sure you would have to change the font size of the combo box which which also change all list items