Question

尝试在WPF中设置组合框样式时遇到问题。它正确呈现，但如果文本大于包含的文本框，则所选选项的文本会溢出togglebutton及其后的内容。有办法解决这个问题吗？

<Style x:Key="cmbToggle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">

                    <Border Name="cmbBorder" CornerRadius="3" BorderBrush="Silver" BorderThickness="1">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="White" Offset="0" />
                                <GradientStop Color="#FFE9E9E9" Offset="1" />
                            </LinearGradientBrush>
                        </Border.Background>

                        <Border BorderBrush="#FFADADAD" BorderThickness="0,0,0,0" Width="25" Height="25" HorizontalAlignment="Right">
                            <!--The polygon is the triangle for dropdown-->
                            <Image Source="/Images/dropdown-arrow.png" VerticalAlignment="Center" HorizontalAlignment="Left" />                                
                        </Border>

                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="CornerRadius" TargetName="cmbBorder" Value="4,4,0,0"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="ComboBoxTextBox"
             TargetType="{x:Type TextBox}">
        <Border x:Name="PART_ContentHost"
      Focusable="False"
      Background="{TemplateBinding Background}" />
    </ControlTemplate>

<!--The combobox consist of two parts, a toggle button and a popup control-->
        <Style TargetType="{x:Type ComboBox}">
            <Setter Property="Foreground" Value="black"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="4,3"/>
            <Setter Property="MinHeight" Value="25" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>

                            <!--Binding explanation follows-->
                            <!--The SystemParameters.ComboBoxPopupAnimationKey is the standard roll-down animation for dropdowns-->
                            <Popup Margin="1" x:Name="PART_Popup" AllowsTransparency="true"
                            IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
                            Placement="Bottom"
                            PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
                            Grid.ColumnSpan="2"
                            MinWidth="{TemplateBinding ActualWidth}">

                                <Border Name="DropDownBorder" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4" BorderBrush="#FFC4DEFF">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFDEEDFF" Offset="0" />
                                            <GradientStop Color="#C1FFFFFF" Offset="1" />
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <ScrollViewer CanContentScroll="true">
                                        <ItemsPresenter  />
                                    </ScrollViewer>
                                </Border>

                            </Popup>

                            <TextBox x:Name="PART_EditableTextBox"
                               Style="{x:Null}"
                               Template="{StaticResource ComboBoxTextBox}"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Bottom"
                               Margin="3,3,23,3"
                               Focusable="True"
                               Background="Transparent"
                               Visibility="Hidden"
                               IsReadOnly="{TemplateBinding IsReadOnly}" />

                            <!--
                    Here's some explanation needed:
                    To tell the tooglebutton what to do if it gets checked, we need to bind his property to a source
                    at least, 3 parameters are needed:

                    PATH:   The path to the property we want to bind (isDropDownOpen)
                    MODE:   We want the popup to open AND close EVERYTIME, so we use TwoWay
                    SOURCE: Where to apply the style to? To its parent, the combobox-template!
                    -->
                            <ToggleButton Style="{StaticResource cmbToggle}" Grid.ColumnSpan="2"
                                    IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>

                            <ContentPresenter HorizontalAlignment="Left"
                                        Margin="5,0,0,0"
                                        VerticalAlignment="Center"
                                        IsHitTestVisible="false"
                                        Content="{TemplateBinding SelectionBoxItem}"
                                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                        />

                        </Grid>

                    </ControlTemplate>
                </Setter.Value>

            </Setter>

        </Style>

Answer 1

文本框的控件模板必须有一个名为“PART_ContentHost”的ScrollViewer才能正常工作。目前您有一个Border替换，这就是渲染错误的原因。将其更改回ScrollViewer，问题应该得到解决。

另外，一个小问题，按钮模板中的箭头宽度为25，但文本框右边的边距仅为23。将边距更改为3,3,28,3，使文本框右侧和按钮之间有三个像素。

自定义下拉框中的文本溢出

1 个答案: