如何在焦点处设置组合框背景色

时间:2015-04-24 09:27:44

标签: wpf combobox setfocus

我对WPF比较新,所以请耐心等待。

我尝试在获得焦点时设置组合框的背景颜色。我在控件模板中设置了一个触发器,以便它在togglebutton上改变鼠标悬停时的颜色,以及何时获得焦点。鼠标悬停工作正常,但当我进入组合框时,没有任何事情发生,直到我第二次选中它(然后它会改变颜色)。

所以我想要的是在用户第一次发布标签时更改背景颜色。

非常感谢任何帮助。

<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>

2 个答案:

答案 0 :(得分:0)

您应该可以通过在IsKeyboardFocused控件模板中的MouseOverIsFocused触发器旁添加额外的ToggleButton触发器来实现此目的:

<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来获得焦点,以便您可以更改它的背景颜色 - 但实际上您希望组合框的内容具有焦点。

你必须 TAB 两次以显然实现焦点的原因是因为对于每个ComboBox你在控件的ToggleButton之间进行选项,然后是ComboBox选中的项目(通过ContentPresenter)。

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

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

我实际上已经从您的ToggleButton模板中删除了{strong>所有 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控件在焦点有效时触发更改。

如果此解决方案无法满足您的需求,那么我希望至少您可以看到您所遇到的问题所在。

答案 1 :(得分:0)

您不需要为此编辑模板,只需要样式:

<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>