изменение размера кнопки поля со списком в wpf

Question

Есть ли способ увеличить размер кнопки [с символом стрелки вниз] внутри поля со списком? Я увеличил высоту и ширину поля со списком, но кнопка со стрелкой не пропорциональна общим размерам.

Спасибо заранее, Джон.

Answer 1

Вы говорите о редактируемом ComboBox?В обычном ComboBox «кнопка» - это полный размер (нерасширенного) ComboBox.Поэтому я думаю, что вы говорите о редактируемом ComboBox, где кнопка выровнена по правому краю с текстовым полем, занимающим оставшееся пространство.

Звучит так, как будто вы хотите, чтобы ширина кнопки была пропорциональной, скореечем просто занять место, которое нужно занять.

Если я прав в этом отношении, тогда вы захотите отредактировать ControlTemplate, как предложено Расселом Тройвестом ниже.В частности, я думаю, вы захотите изменить способ определения определений столбцов в Placement Grid.В настоящее время они определены как * для столбца, содержащего текстовое поле, и Auto для столбца, содержащего кнопку.Вы, вероятно, захотите изменить их, скажем, на 3* и *, соответственно (что сделает текстовое поле всегда 75% ширины, а кнопка - 25% ширины).

Пока вы там, вы также можете изменить способ рисования маленькой выпадающей стрелки (это просто объект Path), потому что это может быть немного странно, если вы видите такую ​​маленькую кнопку, когда у вас есть сама кнопка.такой большой.

Редактировать:

Я добавляю еще немного информации, но я не уверен, что вы ищете.

Когда вы редактируете шаблон для ComboBox (я рекомендую использовать Blend, это очень легко извлечь из этого материала - просто щелкните правой кнопкой мыши по нему, выберите Edit Template, затем Edit a Copy и 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>

Это ControlTemplate для состояния Editable ComboBox.Ключевая часть, на которую стоит обратить внимание - это 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, который необходимо отредактировать, чтобы изменить размер маленькой стрелки, если вы решите это сделать.

Answer 2

Хотите ли вы, чтобы все поле со списком было больше, включая текст, кнопку раскрывающегося списка и стрелку раскрывающегося списка?Это может быть полезно, например, для киоска или сенсорного экрана.

Если это так, то вы можете использовать масштабное преобразование - просто сделайте так, чтобы весь комбинированный список отображался с размером 200% от его первоначального размера, или 300%, или любым другим,WPF является векторным, поэтому он хорошо масштабируется.

Для этого вы должны использовать ScaleTransform в качестве LayoutTransform .Это увеличит ваш ComboBox в 3 раза по сравнению с его обычным размером:

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

, который будет выглядеть следующим образом (до и после применения ScaleTransform):

Вы также можете заглянуть в Окно просмотра , если ваша цель - взять несколько элементов управления и растянуть их, чтобы заполнить весь экран.По сути, он такой же, как ScaleTransform, но вместо жесткого кодирования уровня масштабирования вы позволяете Viewbox автоматически масштабировать содержимое, чтобы заполнить его родительский элемент.

Answer 3

Думаю, вам нужно будет возиться с шаблоном управления.Этот вопрос делает нечто подобное, поэтому ответы могут подтолкнуть вас в правильном направлении.

Answer 4

Я уверен, что вам придется изменить размер шрифта поля со списком, который также изменит все элементы списка