Элемент управления IntegerUpDown Изменение фона, когда текстовое поле IsFocused

Question

Я создаю приложение WPF и использую библиотеку WPF Extended Toolkit. Я добавил элемент управления IntegerUpDown в свой UserControl, и когда пользователь нажимает внутри текстового поля, я хочу, чтобы цвет фона изменился с темно-серого на светло-серый.

Я попытался добавить триггер стиля в xaml, который срабатывает, когда элемент управления IntegerUpDown IsFocused для изменения фона. Однако, похоже, это не сработало.

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

Благодаря стилю, который я добавил, я ожидал, что фон элемента управления изменится с темно-серого на светло-серый, но ничего не произошло. Как я могу это сделать?

Answer 1

Тот же триггер в исходном коде IntegerUpDown, поэтому внешний триггер больше не действует.

Исходный код IntegerUpDown:

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

Я пытался использовать GotFocus иСобытия LostFocus.

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 код:

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);
}

Answer 2

После просмотра ответа от @ J.B.D я отредактировал ControlTemplate для элемента управления IntegerUpDown, чтобы изменить обратную сторону

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

Пожалуйста, посмотрите на начало шаблона элемента управления и WatermarkTextBox. WatermarkTextBox.Style - это то, что я добавил, чтобы изменить фон, когда текстовое поле сфокусировано.

Чтобы переопределить шаблон COntrolTemplate, щелкните правой кнопкой мыши элемент управления IntegerUpDown и нажмите Редактировать шаблон

Answer 3

Я пробовал эту проблему в своем собственном приложении, и оно закончено. Вот код:

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

Для получения дополнительной информации посмотрите этот линк: Проблема с зависимостью анимации WPF