IntegerUpDown Control Changing Background When Textbox IsFocused

Question

I'm creating a WPF application and am using the WPF Extended Toolkit library . I have added the IntegerUpDown control to my UserControl and when the user presses inside the textbox I want the background color to change from a dark grey to a light grey.

I have tried adding a style trigger in the xaml that triggers when the IntegerUpDown control IsFocused for the background to change. However, this did not seem to work.

<xctk:IntegerUpDown x:Name="Day" Value="{Binding DayText, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" Style="{StaticResource IntegerUpDownStyle}" Minimum="{Binding MinimumDateSelection}" Maximum="{Binding MaximumDateSelection}">
                            <xctk:IntegerUpDown.Watermark>
                                <TextBlock Text="Day" Foreground="{StaticResource OffsetWhiteBrush}" Margin="0,0,60,0"/>
                            </xctk:IntegerUpDown.Watermark>
                        </xctk:IntegerUpDown>




<!-- Textbox and PasswordBox base styling for login boxes -->
    <Style x:Key="IntegerUpDownStyle" TargetType="{x:Type Control}" BasedOn="{StaticResource BaseTextStyle}">
        <Setter Property="MaxWidth" Value="400" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="FontSize" Value="{StaticResource FontSize20}" />
        <Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
        <Setter Property="Background" Value="{StaticResource DarkGreyBrush}" />
        <Setter Property="Margin" Value="0,20,0,0" />
        <Style.Triggers>
            <Trigger Property="IsFocused" Value="True">
                <Setter Property="Background" Value="{StaticResource LightGreyBrush}" />
            </Trigger>
            <Trigger Property="Validation.HasError" Value="True">
                <Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}" />
            </Trigger>
        </Style.Triggers>
    </Style>

With the styling I've added I expected the background of the control to change from a dark grey to a light grey but nothing happened. How can I make this happen?

score 0 · Answer 1 · answered Jan 16 '19 at 03:20

I tried this problem in my own app,and it's finished.Here's code:

<Window
x:Class="WpfApp16.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp16"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Title="MainWindow"
Width="800"
Height="450"
mc:Ignorable="d">
<Window.Resources>
    <Style x:Key="IntegerUpDownStyle" TargetType="xctk:IntegerUpDown">
        <Style.Triggers>
            <EventTrigger RoutedEvent="ValueChanged">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation
                                Storyboard.TargetProperty="Background.Color"
                                From="DarkGray"
                                To="Transparent"
                                Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>

            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<StackPanel>

    <xctk:IntegerUpDown Width="200" Style="{StaticResource IntegerUpDownStyle}">
        <xctk:IntegerUpDown.Background>
            <SolidColorBrush Color="Transparent" />
        </xctk:IntegerUpDown.Background>
    </xctk:IntegerUpDown>
</StackPanel>

For more Information ,look this linke:WPF Animation dependency issue

J.B.D · Answer 2 · 2019-01-16T05:44:28.807

The same trigger in IntegerUpDown source code, so the outside trigger was no longer effective.

IntegerUpDown source code:

<Trigger Property="IsFocused" Value="True">
    <Setter TargetName="PART_TextBox"
          Property="FocusManager.FocusedElement"
          Value="{Binding ElementName=PART_TextBox}" />
</Trigger>

I tried using GotFocus and LostFocus events.

xaml:

<xctk:IntegerUpDown x:Name="Day" 
     LostFocus="IntegerUpDown_LostFocus" 
     GotFocus="IntegerUpDown_GotFocus"  
     Focusable="True"  
     Value="{Binding DayText, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" Style="{StaticResource IntegerUpDownStyle}" Minimum="{Binding MinimumDateSelection}" Maximum="{Binding MaximumDateSelection}">
   <xctk:IntegerUpDown.Watermark>
        <TextBlock Text="Day" Foreground="{StaticResource OffsetWhiteBrush}" Margin="0,0,60,0"/>
    </xctk:IntegerUpDown.Watermark>
</xctk:IntegerUpDown>

cs code:

private void IntegerUpDown_GotFocus(object sender, RoutedEventArgs e)
{
    Day.Background = new SolidColorBrush(Colors.Gray);
}

private void IntegerUpDown_LostFocus(object sender, RoutedEventArgs e)
{
    Day.Background = new SolidColorBrush(Colors.DarkGray);
}

Thanks for the quick and easy solution. – Craig Martin Jan 16 '19 at 21:43 — Craig Martin, Jan 16 '19 at 21:43

score 0 · Answer 3 · answered Jan 16 '19 at 22:37

After seeing the answer from @J.B.D I edited the ControlTemplate for the IntegerUpDown control to change the back

<ControlTemplate x:Key="ControlControlTemplate1" TargetType="{x:Type Control}">
            <xctk:ButtonSpinner x:Name="PART_Spinner" AllowSpin="{Binding AllowSpin, RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ButtonSpinnerLocation="{Binding ButtonSpinnerLocation, RelativeSource={RelativeSource TemplatedParent}}" Background="{TemplateBinding Background}" HorizontalContentAlignment="Stretch" IsTabStop="False" ShowButtonSpinner="{Binding ShowButtonSpinner, RelativeSource={RelativeSource TemplatedParent}}" VerticalContentAlignment="Stretch">
                <xctk:WatermarkTextBox x:Name="PART_TextBox" AutoMoveFocus="{Binding AutoMoveFocus, RelativeSource={RelativeSource TemplatedParent}}" AutoSelectBehavior="{Binding AutoSelectBehavior, RelativeSource={RelativeSource TemplatedParent}}" AcceptsReturn="False" BorderThickness="0" ContextMenu="{TemplateBinding ContextMenu}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="True" IsUndoEnabled="True" MinWidth="20" MaxLength="{Binding MaxLength, RelativeSource={RelativeSource TemplatedParent}}" Padding="{TemplateBinding Padding}" TextAlignment="{Binding TextAlignment, RelativeSource={RelativeSource TemplatedParent}}" TextWrapping="NoWrap" TabIndex="{TemplateBinding TabIndex}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" WatermarkTemplate="{Binding WatermarkTemplate, RelativeSource={RelativeSource TemplatedParent}}" Watermark="{Binding Watermark, RelativeSource={RelativeSource TemplatedParent}}">
                    <xctk:WatermarkTextBox.Style>
                        <Style TargetType="{x:Type xctk:WatermarkTextBox}">
                            <Setter Property="Background" Value="{StaticResource DarkGreyBrush}" />
                            <Style.Triggers>
                                <Trigger Property="IsFocused" Value="True">
                                    <Setter Property="Background" Value="{StaticResource LightGreyBrush}" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </xctk:WatermarkTextBox.Style>
                </xctk:WatermarkTextBox>

            </xctk:ButtonSpinner>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="{DynamicResource {ComponentResourceKey ResourceId=ControlMouseOverBorderKey, TypeInTargetAssembly={x:Type Themes:ResourceKeys}}}"/>
                </Trigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding IsReadOnly, RelativeSource={RelativeSource Self}}" Value="False"/>
                        <Condition Binding="{Binding AllowTextInput, RelativeSource={RelativeSource Self}}" Value="False"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="IsReadOnly" TargetName="PART_TextBox" Value="True"/>
                </MultiDataTrigger>
                <DataTrigger Binding="{Binding IsReadOnly, RelativeSource={RelativeSource Self}}" Value="True">
                    <Setter Property="IsReadOnly" TargetName="PART_TextBox" Value="True"/>
                </DataTrigger>
                <Trigger Property="IsKeyboardFocusWithin" Value="True">
                    <Setter Property="BorderBrush" Value="{DynamicResource {ComponentResourceKey ResourceId=ControlSelectedBorderKey, TypeInTargetAssembly={x:Type Themes:ResourceKeys}}}"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                </Trigger>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="FocusManager.FocusedElement" TargetName="PART_TextBox" Value="{Binding ElementName=PART_TextBox}"/>
                    <Setter TargetName="PART_TextBox" Property="Visibility" Value="Hidden" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

Please look at the start of the control template and the WatermarkTextBox. The WatermarkTextBox.Style is what I added to make the background change when the textbox is focused.

To override the COntrolTemplate, right click on the IntegerUpDown Control and then press Edit Template

IntegerUpDown Control Changing Background When Textbox IsFocused

3 Answers3