How i change Foreground Color of selected wpf combo item

Question

How i change Foreground Color of selected wpf combo item I have a data template for combo item with text block with foreground black where item is selected i like the foreground to change to white

<ComboBox  view:ComboBoxDropdownBehavior.OpenDropDownAutomatically="True"  OverridesDefaultStyle="False"
                  ItemsSource="{Binding TopButtonMenuItems}"   IsEditable="False"  >
            <ComboBox.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}">Transparent</SolidColorBrush>
            </ComboBox.Resources>
            <ComboBox.Template>
                <ControlTemplate TargetType="ComboBox">
                    <Grid>
                    <Border FocusVisualStyle="{x:Null}" x:Name="Border" Grid.ColumnSpan="2" CornerRadius="2" BorderThickness="1" BorderBrush="#647887">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush>#FFFFFF</SolidColorBrush>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked" />
                                <VisualState x:Name="Indeterminate" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <!--<Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStopCollection>
                                        <GradientStop Color="#FFFFFF" />
                                        <GradientStop Color="#D3D8DD" Offset="1.0" />
                                    </GradientStopCollection>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Border.Background>-->
                    </Border>
                    <StackPanel>                       
                        <view:SmartAgentPopup PlacementTarget="{Binding ElementName=ContentSite}" 
                                   x:Name="PART_Popup" Placement="Bottom" StaysOpen="True"
                                   IsOpen="{TemplateBinding IsDropDownOpen}"
                                   AllowsTransparency="True" Focusable="False" PopupAnimation="Slide"
                                   VerticalOffset="-1">
                            <Grid x:Name="DropDown" SnapsToDevicePixels="True" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                <Border Width="180" x:Name="DropDownBorder" SnapsToDevicePixels="True" BorderThickness="1" 
                                        BorderBrush="White"  Background="#E6E6E6">
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                    <!--Margin="4,6,4,6"-->
                                </Border>
                            </Grid>

                    </view:SmartAgentPopup>
                    <Button >
                        <Button.Template>
                            <ControlTemplate>
                                <StackPanel>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup Name ="CommonStates">
                                            <VisualState Name="Normal"/>
                                            <VisualState Name="MouseOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ActiveImage" Storyboard.TargetProperty="Visibility">
                                                        <DiscreteObjectKeyFrame KeyTime="0" >
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Collapsed</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MouseOverImage" Storyboard.TargetProperty="Visibility">
                                                        <DiscreteObjectKeyFrame KeyTime="0" >
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Visible</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState Name="Pressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ActiveImage" Storyboard.TargetProperty="Visibility">
                                                        <DiscreteObjectKeyFrame KeyTime="0" >
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Collapsed</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedImage" Storyboard.TargetProperty="Visibility">
                                                        <DiscreteObjectKeyFrame KeyTime="0" >
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Visible</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState Name="Disabled">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ActiveImage" Storyboard.TargetProperty="Visibility">
                                                        <DiscreteObjectKeyFrame KeyTime="0" >
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Collapsed</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledImage" Storyboard.TargetProperty="Visibility">
                                                        <DiscreteObjectKeyFrame KeyTime="0" >
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Visible</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Image FocusVisualStyle="{x:Null}" Name="ActiveImage" Height="50" Width="16"   Source="/dbMotion.SmartAgent.Client.Viewer;component/Resources/TopButtonMenu.PNG"/>
                                    <Image FocusVisualStyle="{x:Null}" Name="MouseOverImage" Height="50" Width="16" Source="/dbMotion.SmartAgent.Client.Viewer;component/Resources/TopButtonMenuPressed.PNG" Visibility="Collapsed"/>
                                    <Image FocusVisualStyle="{x:Null}" Name="PressedImage" Height="50" Width="16" Source="/dbMotion.SmartAgent.Client.Viewer;component/Resources/TopButtonMenuPressed.PNG" Visibility="Collapsed"/>
                                    <Image FocusVisualStyle="{x:Null}" Name="DisabledImage" Height="50" Width="16" Source="/dbMotion.SmartAgent.Client.Viewer;component/Resources/TopButtonMenu.PNG" Visibility="Collapsed"/>

                                </StackPanel>

                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </StackPanel>
                </Grid>
            </ControlTemplate>

        </ComboBox.Template>
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Button  HorizontalAlignment="Stretch">
                    <Button.Template>
                        <ControlTemplate>
                            <Grid  MinWidth="{TemplateBinding ActualWidth}"  Focusable="False" HorizontalAlignment="Stretch">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup Name="CommonStates">
                                        <VisualState Name="Normal"/>
                                        <VisualState Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MouseOverRect" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" >
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Rectangle Name="MouseOverRect" Visibility="Hidden"  Fill="{StaticResource HighlightBrush}" />
                                <Border Background="Transparent">
                                    <StackPanel Margin="2" Orientation="Vertical">
                                                                                 <view:SmartAgentTextBlock x:Name="Text" Foreground="Black"  
                                                                  Text="{x:Static Viewer:Messages.CollaborateMenuItem}" VerticalAlignment="Center" Margin="4,0,0,0"
                                                                  FontFamily="{Binding Source={x:Static Properties:Settings.Default}, Path=VPOFontFamily, Mode=OneTime}"
                                                                  FontSize="12" 
                                                                  MinWidth="76"/>
                                        <Rectangle Height="1" Margin="2" Fill="#FFCECBCB" Width="178" />

                                    </StackPanel>
                                </Border>
                            </Grid>

                        </ControlTemplate>
                    </Button.Template>
                </Button>

            </DataTemplate>

        </ComboBox.ItemTemplate>


    </ComboBox>

Thanks

Tomer Trojman Tomer Trojman · Accepted Answer · 2014-07-15T11:37:54

The solution is easy. i have just added another ObjectAnimationUsingKeyFrames in Control Template of the button that in the comobo box item template.The ObjectAnimationUsingKeyFrames will set foreground white where MouseOver

 <ComboBox.ItemTemplate>
            <DataTemplate>
                <Button Name="btn"  HorizontalAlignment="Stretch">
                    <Button.Template>
                        <ControlTemplate>
                            <Grid  MinWidth="{TemplateBinding ActualWidth}"  Focusable="False" HorizontalAlignment="Stretch">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup Name="CommonStates">
                                        <VisualState Name="Normal"/>
                                        <VisualState Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MouseOverRect" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" >
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" >
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Brush>White</Brush>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Rectangle Name="MouseOverRect" Visibility="Hidden"  Fill="{StaticResource HighlightBrush}" />
                                <Border Background="Transparent">
                                    <StackPanel Margin="2"  Name="MainGrid"  Orientation="Vertical">
                                        <TextBlock Name="Text" Foreground="Black"  
                                                                  Text="{x:Static Viewer:Messages.CollaborateMenuItem}" VerticalAlignment="Center" Margin="4,0,0,0"
                                                                  FontFamily="{Binding Source={x:Static Properties:Settings.Default}, Path=VPOFontFamily, Mode=OneTime}"
                                                                  FontSize="12" 
                                                                  MinWidth="76"/>
                                        <Rectangle Height="1" Margin="2" Fill="#FFCECBCB" Width="178" />

                                    </StackPanel>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </DataTemplate>
        </ComboBox.ItemTemplate>

How i change Foreground Color of selected wpf combo item

1 Answers