2015-11-11 37 views
2

基於一個我在這裏已經工作的自定義組合框風格:自定義組合框樣式不能看到所選項目的文本

https://gist.github.com/HalidCisse/50df055a0c02714a9e3f

我遇到的問題是,所選擇的項目當我選擇一個項目或設置一些默認顯示的文本時,文本不會顯示。但是,如果我將它設置爲使組合框可編輯,我可以看到一個藍色輪廓,即我的文本的長度,它應該在哪裏。這讓我覺得文本實際上是被綁定和顯示的,它只是隱形或隱藏。不幸的是,我一直在搞這個工作幾個小時,我沒有試圖取消隱藏它的運氣。

What it looks like when something is selected

這是我怎麼也得組合框設置:

<ComboBox  Style="{StaticResource ComboBoxFlatStyle}" 
       Height="40" 
       FontSize="16" 
       Margin="10 0 10 0" 
       IsEnabled="True" 
       IsEditable="True" 
       IsReadOnly="True" 
       Text="Testing Text"> 
     <ComboBoxItem Content="Test 0"/> 
     <ComboBoxItem Content="Test 1"/> 
    </ComboBox> 

這是我有:

<SolidColorBrush x:Key="ComboBoxNormalBorderBrush" 
       Color="#333333" /> 
<SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush" 
       Color="#222222" /> 
<SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush" 
       Color="White" /> 
<SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush" 
       Color="#222222" /> 
<SolidColorBrush x:Key="ComboBoxDisabledBorderBrush" 
       Color="#333333" /> 
<SolidColorBrush x:Key="DropDownBackgroundBrush" 
       Color="#111111" /> 
<SolidColorBrush x:Key="DropDownTextFillBrush" 
       Color="#FFFFB83D" /> 
<SolidColorBrush x:Key="ArrowFillBrush" 
       Color="#FFFFB83D" /> 

<ControlTemplate x:Key="ComboBoxToggleButtonTemplate" 
       TargetType="ToggleButton"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition Width="20" /> 
     </Grid.ColumnDefinitions> 
     <Border Name="Border" 
       Grid.ColumnSpan="2" 
       Background="{StaticResource ComboBoxNormalBackgroundBrush}" 
       BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" 
       BorderThickness="1, 1, 1, 1" 
       CornerRadius="0" /> 
     <Border Name="ButtonBorder" 
       Grid.Column="1" 
       Margin="1, 1, 1, 1" 
       Background="{StaticResource ComboBoxNormalBackgroundBrush}" 
       BorderBrush="#444" 
       BorderThickness="0, 0, 0, 0" 
       CornerRadius="0, 0, 0, 0" /> 

     <Path Name="Arrow" 
       Grid.Column="1" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" 
       Fill="{StaticResource ArrowFillBrush}" /> 
    </Grid> 
    <ControlTemplate.Triggers> 
     <Trigger Property="UIElement.IsMouseOver" Value="True"> 
      <Setter TargetName="ButtonBorder" Property="Panel.Background" Value="#111111" /> 
     </Trigger> 
     <Trigger Property="ToggleButton.IsChecked" Value="True"> 
      <Setter TargetName="Arrow" Property="Shape.Fill" Value="{StaticResource ArrowFillBrush}" /> 
      <Setter TargetName="ButtonBorder" Property="Panel.Background" Value="#111111" /> 
     </Trigger> 
     <Trigger Property="UIElement.IsEnabled" Value="False"> 
      <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}" /> 
      <Setter TargetName="Arrow" Property="Shape.Fill" Value="#999" /> 
      <Setter TargetName="Border" Property="Panel.Background" Value="{StaticResource ComboBoxDisabledBackgroundBrush}" /> 
      <Setter TargetName="ButtonBorder" Property="Border.BorderBrush" Value="{StaticResource ComboBoxDisabledBorderBrush}" /> 
      <Setter TargetName="ButtonBorder" Property="Panel.Background" Value="{StaticResource ComboBoxDisabledBackgroundBrush}" /> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

<Style x:Key="ComboBoxFlatStyle" 
     TargetType="{x:Type ComboBox}"> 
    <Setter Property="Control.Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ComboBox"> 
       <ControlTemplate.Resources> 
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" 
            Color="#222222" /> 
       </ControlTemplate.Resources> 
       <Grid> 
        <ContentPresenter x:Name="ContentSite" 
             Margin="5, 3, 23, 3" 
             HorizontalAlignment="Stretch" 
             VerticalAlignment="Center" 
             Content="{TemplateBinding ComboBox.SelectionBoxItem}" 
             ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}" 
             ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
             IsHitTestVisible="False" /> 
        <TextBox Name="PART_EditableTextBox" 
          Margin="3, 3, 23, 3" 
          HorizontalAlignment="Left" 
          VerticalAlignment="Center" 
          Background="Transparent" 
          Focusable="True" 
          IsReadOnly="{TemplateBinding IsReadOnly}" 
          Visibility="Hidden"> 
         <TextBox.Template> 
          <ControlTemplate TargetType="TextBox"> 
           <Border x:Name="PART_ContentHost" 
             Focusable="False" /> 
          </ControlTemplate> 
         </TextBox.Template> 
        </TextBox> 
        <!-- Popup showing items --> 
        <Popup Name="Popup" 
          AllowsTransparency="True" 
          Focusable="False" 
          IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}" 
          Placement="Bottom" 
          PopupAnimation="Slide"> 
         <Grid Name="DropDown" 
           MinWidth="{TemplateBinding FrameworkElement.ActualWidth}" 
           MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}" 
           SnapsToDevicePixels="True"> 
          <Border Name="DropDownBorder" 
            Margin="0, 1, 0, 0" 
            Background="{StaticResource DropDownBackgroundBrush}" 
            BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" 
            BorderThickness="1,1,1,1" 
            CornerRadius="0" /> 
          <ScrollViewer Margin="4" 
              SnapsToDevicePixels="True"> 
           <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" /> 
          </ScrollViewer> 
         </Grid> 
        </Popup> 
        <ToggleButton Name="ToggleButton" 
            Grid.Column="2" 
            ClickMode="Press" 
            Focusable="False" 
            IsChecked="{Binding Path=IsDropDownOpen, 
                 RelativeSource={RelativeSource TemplatedParent}, 
                 Mode=TwoWay}" 
            Template="{StaticResource ComboBoxToggleButtonTemplate}" /> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="ItemsControl.HasItems" Value="False"> 
         <Setter TargetName="DropDownBorder" Property="FrameworkElement.MinHeight" Value="95" /> 
        </Trigger> 
        <Trigger Property="UIElement.IsEnabled" Value="False"> 
         <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}" /> 
        </Trigger> 
        <Trigger Property="ItemsControl.IsGrouping" Value="True"> 
         <Setter Property="ScrollViewer.CanContentScroll" Value="False" /> 
        </Trigger> 
        <Trigger Property="ComboBox.IsEditable" Value="True"> 
         <Setter Property="KeyboardNavigation.IsTabStop" Value="False" /> 
         <Setter TargetName="ContentSite" Property="UIElement.Visibility" Value="Hidden" /> 
         <Setter TargetName="PART_EditableTextBox" Property="UIElement.Visibility" Value="Visible" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}" /> 
    <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True" /> 
    <Setter Property="ScrollViewer.CanContentScroll" Value="True" /> 
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" /> 
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> 
    <Setter Property="TextElement.Foreground" Value="{StaticResource DropDownTextFillBrush}" /> 
    <Setter Property="UIElement.SnapsToDevicePixels" Value="True" /> 
</Style> 

回答

1

好了,所以這個問題是在該項目的順序組合框。我一直使用vs2013的XAML樣式器擴展,這可以自動格式化你的xaml,使它看起來更好。然而,我有一個設置自動命令我的元素,這意味着這些元素被按照錯誤的順序放置在一個空的網格上,這使得文本變得模糊。

僅供參考正確的順序是:

切換按鈕

ContentPresenter

文本框

彈出

+0

XAML斯泰勒不會因爲'Grid.Column =「2」'的'ToggleButton'(所有其他人將默認此到'Grid.Column =「0」') - 所以當保存XAML Styler的時候會根據'Grid.Row'和'Grid.Column'對XAML進行重新排序。 – toadflakz

0
Focusable="true" 

讓這個假的,你會看到選中的文本出現。我不明白爲什麼是這樣,我也曾經有過類似的問題,和它的工作去設置Focusable="False"

相關問題