Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
360
Combo Editor Hover Font Colour Issue
posted

Hi Team,

I have got an requirement to change font color to white when user focuses over the selection in Dropdown of combo editor.Below mentioned is the style i have applied can you please help me out with this.

Parents
No Data
Reply
  • 360
    Suggested Answer
    posted

    Hi Team,

    I have got an requirement to change font color to white when user focuses over the selection in Dropdown of combo editor.Below mentioned is the style i have applied can you please help me out with this.

    <Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}">
    <Setter Property="Width" Value="150" />
    <Setter Property="Padding" Value="6,5,6,3" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="FontFamily" Value="Segoe UI Light" />
    <Setter Property="MinHeight" Value="28" />
    <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
    <Setter Property="Background" Value="{StaticResource TransparentBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource ComboBoxBorderBrush}" />
    <Setter Property="ItemContainerStyle" Value="{StaticResource ComboBoxItemStyle}" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
    <Setter Property="ScrollViewer.PanningMode" Value="Both" />
    <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type ComboBox}">
    <Grid x:Name="MainGrid" SnapsToDevicePixels="true">
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition MinWidth="30" Width="0" />
    </Grid.ColumnDefinitions>
    <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Normal" />
    <VisualState x:Name="MouseOver">
    <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="hover">
    <DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
    <Visibility>Visible</Visibility>
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    </VisualState>
    <VisualState x:Name="Disabled">
    <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="disabled">
    <DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
    <Visibility>Visible</Visibility>
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    </VisualState>
    </VisualStateGroup>
    <VisualStateGroup x:Name="FocusStates">
    <VisualState x:Name="Unfocused" />
    <VisualState x:Name="Focused">
    <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="focused">
    <DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
    <Visibility>Visible</Visibility>
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    </VisualState>

    <VisualState x:Name="FocusedDropDown">
    <Storyboard>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="focused">
    <DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>

    <ColorAnimation Storyboard.TargetName="ForegroundColor" Storyboard.TargetProperty="Color" To="White" Duration="0:0:0.0" />
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    </VisualState>
    </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Rectangle x:Name="normal" Fill="{StaticResource ComboBoxBackgroundBrush}" Stroke="{StaticResource ComboBoxBorderBrush}" StrokeThickness="1" Grid.ColumnSpan="2" />
    <Rectangle x:Name="hover" Fill="{StaticResource ComboBoxHoverBackgroundBrush}" Stroke="{StaticResource ComboBoxHoverBorderBrush}" StrokeThickness="1" Visibility="Collapsed" Grid.ColumnSpan="2" />
    <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1"
    PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
    <Border x:Name="DropDownBorder" HorizontalAlignment="Stretch" Background="{StaticResource PopupBackgroundBrush}" BorderBrush="{StaticResource PopupBorderBrush}" BorderThickness="1"
    MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}" CornerRadius="2">
    <ScrollViewer x:Name="DropDownScrollViewer" Style="{StaticResource ScrollViewerStyle}" Margin="0,3,3,3" >
    <Grid RenderOptions.ClearTypeHint="Enabled">
    <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0" >
    <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}" />
    </Canvas>
    <TextBlock Foreground="White" Padding="3"/>

    <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" >
    <ItemsPresenter.Resources>

    </ItemsPresenter.Resources>
    </ItemsPresenter>
    </Grid>
    </ScrollViewer>
    </Border>
    </Popup>
    <ToggleButton BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButtonStyle}" />
    <ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}"
    ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false"
    Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    <Rectangle x:Name="focused" Stroke="{StaticResource ComboBoxFocusedBorderBrush}" StrokeThickness="1" Visibility="Collapsed" Grid.ColumnSpan="2" />
    <Rectangle x:Name="disabled" Fill="{StaticResource ComboBoxDisabledBackgroundBrush}" Visibility="Collapsed" Grid.ColumnSpan="2" />
    </Grid>
    <ControlTemplate.Triggers>
    <Trigger Property="HasItems" Value="false">
    <Setter Property="Height" TargetName="DropDownBorder" Value="95" />
    </Trigger>

    <Trigger Property="IsEnabled" Value="false">
    <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
    <Setter Property="Background" Value="{StaticResource ComboBoxBackgroundBrush}" />
    </Trigger>
    <Trigger Property="IsGrouping" Value="true">
    <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
    </Trigger>
    <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
    <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}" />
    <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}" />
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    <Style.Triggers>
    <Trigger Property="IsEditable" Value="true">
    <Setter Property="IsTabStop" Value="false" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}" />
    </Trigger>
    </Style.Triggers>
    </Style>

Children