Переполнение текста на пользовательском выпадающем списке

Question

У меня проблема при попытке создать combobox в WPF. Он отображается правильно, но текст выбранного варианта разливается по кнопке toggleton и дальше, если текст больше, чем содержащее текстовое поле. Есть ли способ исправить это?

<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

Шаблон управления для текстового поля должен иметь ScrollViewer под названием «PART_ContentHost», чтобы работать правильно. В настоящее время у вас есть Border в качестве замены, и поэтому рендеринг неправильный. Измените его на ScrollViewer, и проблема должна быть решена.

Кроме того, незначительная проблема, стрелка в шаблоне кнопки имеет ширину 25, но в текстовом поле имеется только 23 справа. изменил границу на 3,3,28,3, чтобы иметь три пикселя между правой стороной текстового поля и кнопкой.