获得焦点时如何设置组合框背景颜色

Question

我对 WPF 比较陌生，所以请耐心等待。

我正在尝试设置组合框获得焦点时的背景颜色。我在控制模板中设置了一个触发器，它的切换按钮在鼠标悬停时改变颜色，当它获得焦点时。鼠标悬停可以正常工作，但是当我进入组合框时，直到我第二次点击时才会发生任何事情（然后它会改变颜色）。

所以我想要的是当用户第一次进入选项卡时改变背景颜色。

任何帮助将不胜感激。

<SolidColorBrush x:Key="ComboBoxNormalBorderBrush" Color="Black" />
<SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush" Color="#fff" />
<SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush" Color="#eee" />
<SolidColorBrush x:Key="ComboBoxDisabledBorderBrush" Color="#888" />



<ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Border 
            Grid.ColumnSpan="2"
            Name="Border"
            BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" 
            CornerRadius="0" BorderThickness="0.6" 
            Background="{StaticResource YellowBrush}">

        </Border>
        <Border 
            Grid.Column="1" 
            Margin="1" 
            BorderBrush="#444" 
            Name="ButtonBorder"
            CornerRadius="0, 0, 0, 0" 
            BorderThickness="2" 
            Background="Gray" />

        <Path Name="Arrow" Grid.Column="1" 
        Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
        HorizontalAlignment="Center" Fill="White"
        VerticalAlignment="Center" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="ToggleButton.IsMouseOver" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource YellowBrush1}" />
        </Trigger>
        <Trigger Property="ToggleButton.IsFocused" Value="True">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource YellowBrush1}" />
        </Trigger>

        <Trigger Property="UIElement.IsMouseOver" Value="True">
            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="DarkGray"/>
        </Trigger>
        <Trigger Property="ToggleButton.IsChecked" Value="True">
            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="LightGray"/>

            <Setter Property="Shape.Fill" TargetName="Arrow" Value="Black"/>
        </Trigger>
        <Trigger Property="UIElement.IsEnabled" Value="False">
            <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
            <Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>
            <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
            <Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<Style TargetType="{x:Type ComboBox}">
    <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
    <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
    <Setter Property="TextElement.Foreground" Value="Black"/>
    <Setter Property="Height" Value="25"/>
    <Setter Property="Margin" Value="0,0,0,4"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="IsEditable" Value="False"/>
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Background" Value="{StaticResource NouvemYellowBrush}"/>
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid>
                    <ToggleButton Name="ToggleButton"
                                  ClickMode="Press" 
                                  Focusable="True"
                                  IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                  Template="{StaticResource ComboBoxToggleButtonTemplate}"/>

                    <ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False"
                          HorizontalAlignment="Left" VerticalAlignment="Center"  
                 Focusable="False"
                          Content="{TemplateBinding ComboBox.SelectionBoxItem}" 
                          ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
                          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>

                    <TextBox Name="PART_EditableTextBox" Margin="3, 3, 23, 3"                     
                             IsReadOnly="{TemplateBinding IsReadOnly}"
                             Visibility="Hidden" Background="Transparent"
                             HorizontalAlignment="Left" VerticalAlignment="Center"
                             Focusable="False">
                        <TextBox.Template>
                            <ControlTemplate TargetType="TextBox">
                                <Border Name="PART_ContentHost" Focusable="False"/>
                            </ControlTemplate>
                        </TextBox.Template>
                    </TextBox>

                    <!-- Popup showing items -->
                    <Popup Name="Popup"
                           Placement="Bottom"
                           Focusable="False" 
                           AllowsTransparency="True"
                           IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
                           PopupAnimation="Slide">

                        <Grid Name="DropDown" SnapsToDevicePixels="True"
                              MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                              Focusable="False"
                              MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
                            <Border Name="DropDownBorder" 
                                Background="White" 
                                    Focusable="False"
                                Margin="0, 1, 0, 0"
                                CornerRadius="0" 
                                BorderThickness="1" 
                                BorderBrush="Black"/>
                            <ScrollViewer Margin="4" SnapsToDevicePixels="True" Focusable="False">
                                <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" Focusable="False"/>
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>

                    <Trigger Property="ItemsControl.HasItems" Value="False">
                        <Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" 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 Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
                        <Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>


</Style>

编辑：显示相关视图

<i:Interaction.Triggers>
    <i:EventTrigger EventName="Loaded">
        <command:EventToCommand Command="{Binding OnLoadingCommand}" PassEventArgsToCommand="True"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="Unloaded">
        <command:EventToCommand Command="{Binding OnClosingCommand}" PassEventArgsToCommand="True"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

<Grid>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="11*"/>
        <ColumnDefinition Width="14*"/>
        <ColumnDefinition Width="14*"/>
        <ColumnDefinition Width="14*"/>
        <ColumnDefinition Width="14*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height=".2*"/>
        <RowDefinition Height="3.5*"/>
        <RowDefinition Height="8*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid x:Name="GridGlobalData" Grid.Row="1" Grid.ColumnSpan="6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--left side-->
        <Label Content="Code _________________________________________________________________________________________________________________"/>
        <Label Content="Name _________________________________________________________________________________________________________________" Grid.Row="1"/>
        <Label Content="Business Partner Type ________________________________________________________________________" Grid.Row="2"/>
        <Label Content="Group _________________________________________________________________________________________________________________" Grid.Row="3"/>
        <Label Content="Currency ___________________________________________________________________________________________________________" Grid.Row="4"/>


        <TextBox x:Name="TextBoxCode" Text="{Binding PartnerCode, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1">
            <TextBox.InputBindings>
                <KeyBinding Command="{Binding ControlButtonCommand}" CommandParameter="Add" Key="A"  Modifiers="Control" />
                <KeyBinding Command="{Binding FindBusinessPartnerCommand}" CommandParameter="Code"  Key="Enter"/>
            </TextBox.InputBindings>
        </TextBox>

        <TextBox Text="{Binding PartnerName, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="1">
            <TextBox.InputBindings>
                <KeyBinding Command="{Binding FindBusinessPartnerCommand}" CommandParameter="Name"  Key="Enter"/>
            </TextBox.InputBindings>
        </TextBox>
        <ComboBox ItemsSource="{Binding BusinessPartnerTypes}" DisplayMemberPath="Type" SelectedItem="{Binding PartnerType}" SelectedIndex="0" Grid.Column="1" Grid.Row="2"/>
        <ComboBox ItemsSource="{Binding BusinessPartnerGroups}" DisplayMemberPath="BPGroupName" SelectedItem="{Binding PartnerGroup}" SelectedIndex="0" Grid.Column="1" Grid.Row="3"/>
        <ComboBox ItemsSource="{Binding BusinessPartnerCurrencies}" DisplayMemberPath="Name" SelectedItem="{Binding PartnerCurrency}" SelectedIndex="0" Grid.Column="1" Grid.Row="4"/>


        <!--right side-->
        <Label Content="Display Currency _________________________________________________________________________________________________________________" Grid.Column="3" />
        <Label Content="Invoices _________________________________________________________________________________________________________________" Grid.Column="3" Grid.Row="1"/>
        <Label Content="Deliveries _________________________________________________________________________________________________________________" Grid.Column="3" Grid.Row="2"/>
        <Label Content="Orders _________________________________________________________________________________________________________________" Grid.Column="3" Grid.Row="3"/>
        <ComboBox ItemsSource="{Binding BusinessPartnerCurrencies}" DisplayMemberPath="Name" SelectedItem="{Binding DisplayCurrency}" Style="{StaticResource StyleComboBoxReadonly}" SelectedIndex="0" Grid.Column="4"/>
        <TextBox Style="{StaticResource StyleTextBoxNonEditable}" Grid.Column="4" Grid.Row="1"/>
        <TextBox Style="{StaticResource StyleTextBoxNonEditable}" Grid.Column="4" Grid.Row="2"/>
        <TextBox Style="{StaticResource StyleTextBoxNonEditable}" Grid.Column="4" Grid.Row="3"/>

    </Grid>

    <TabControl SelectedIndex="{Binding SelectedPartnerView}" Grid.Row="2" Grid.ColumnSpan="6" >
        <TabItem Header="General">
            <BusinessPartner:BPGeneralView />    
        </TabItem>

        <TabItem Header="Contacts">
            <BusinessPartner:BPContactView />
        </TabItem>

        <TabItem Header="Addresses">
            <BusinessPartner:BPAddressesView />
        </TabItem>

        <TabItem Header="Payment Terms"> 
            <BusinessPartner:BPPaymentTerms />
        </TabItem>

        <TabItem Header="Properties">
            <BusinessPartner:BPPropertiesView />
        </TabItem>

        <TabItem Header="Remarks">
            <BusinessPartner:BPRemarksView />
        </TabItem>

        <TabItem Header="Attachments">
            <BusinessPartner:BPAttachmentsView />
        </TabItem>

    </TabControl>

    <Grid x:Name="GridCrontrolButtons" Grid.Row="3" Grid.ColumnSpan="6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="7*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <data:CrudView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"/>
    </Grid>
</Grid>

Answer 1

您应该能够通过在ToggleButton 控件模板中的MouseOver 和IsFocused 触发器旁边添加一个额外的IsKeyboardFocused 触发器来实现此目的：

<Trigger Property="IsKeyboardFocused" Value="True">
    <Setter TargetName="Border" Property="Background" Value="{StaticResource YellowBrush1}" />
</Trigger>

MSDN：https://msdn.microsoft.com/en-us/library/bb613567%28v=vs.110%29.aspx（向下滚动到 IsKeyboardFocused 部分）

更新：

在这种情况下，问题在于您设置触发器的位置。您依靠 ToggleButton 获得焦点，以便您可以更改它的背景颜色 - 但实际上您希望组合框的 content 获得焦点。

您必须 TAB 两次才能明显获得焦点的原因是，对于每个 ComboBox，您都在控件的 ToggleButton 和 ComboBox 选定项之间切换（通过 ContentPresenter）。

一种可能的解决方法：首先，您需要防止 ComboBox 模板中的 ToggleButton 获得焦点：

<ToggleButton Name="ToggleButton"
    ClickMode="Press" 
    Focusable="False"
    IsTabStop="False" ... >

实际上，我已经从您的 ToggleButton 模板中删除了 所有 个 Focusable="False" 设置器，因为它们不是必需的。

然后让您的 ToggleButton 模板透明 (Border.Background)，并移除影响 Border.Background 颜色的现有触发器。

现在转到您的 ComboBox 模板并为根 <Grid> 命名。在我的示例中，我将其称为 templateRoot。

<Setter.Value>
    <ControlTemplate TargetType="ComboBox">
        <Grid Name="templateRoot">
            <ToggleButton Name="ToggleButton" ... >

现在使用templateRoot 为您的组合框设置背景颜色。您可以将您从 ToggleButton 模板中移除的触发器添加到 ComboBox 模板中：

<Trigger Property="IsKeyboardFocused" Value="True">
    <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource YellowBrush1}" />
</Trigger>
... and the other triggers.

使用这种方法，您可以依靠 ComboBox 控件在获得焦点时触发您的更改。

如果此解决方案不能满足您的需求，那么我希望您至少可以看到问题出在哪里。

Answer 2

您不需要为此编辑模板，只需编辑样式即可：

<ComboBox>
    <ComboBoxItem>Apple</ComboBoxItem>
    <ComboBoxItem>Banana</ComboBoxItem>
    <ComboBoxItem>Pear</ComboBoxItem>
    <ComboBox.Style>
        <Style TargetType="{x:Type ComboBox}">
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="Background" Value="Violet" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ComboBox.Style>
</ComboBox>