사용자 지정 드롭 다운 상자에서 텍스트 오버플로

Question

WPF에서 콤보 상자의 스타일을 지정하는 동안 문제가 있습니다. 올바르게 렌더링되지만 텍스트가 포함 된 텍스트 상자보다 크면 선택된 옵션의 텍스트가 토글 버튼 이상으로 흘러갑니다. 이 문제를 해결할 수있는 방법이 있습니까?

<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으로 변경하여 텍스트 상자의 오른쪽과 단추 사이에 3 픽셀을 갖도록했습니다.