2015-11-11 39 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"

相关问题