WPF - изменение фонового текстового поля с градиентом

Question

Как изменить фон текстового поля с заполнением градиентом, когда он имеет фокус?

Я пытаюсь создать стиль для пользовательского элемента управления TextBox, который будет иметь фон градиента, когда пользователь дает ему фокус, вот что я до сих пор.

<Style TargetType="{x:Type TextBox}" x:Key="TextBoxNormal" > 
<Setter Property="SnapsToDevicePixels" Value="True"/> 
<Setter Property="OverridesDefaultStyle" Value="True"/> 
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/> 
<Setter Property="FocusVisualStyle" Value="{x:Null}"/> 
<!--<Setter Property="MinWidth" Value="100"/>--> 
<Setter Property="Height" Value="25"/> 
<Setter Property="AllowDrop" Value="true"/> 
<Setter Property="FontFamily" Value="Verdana"/> 
<Setter Property="FontSize" Value="12" /> 
<Setter Property="Padding" Value="3"/> 
<Setter Property="Validation.ErrorTemplate"> 
    <Setter.Value> 
     <ControlTemplate> 
      <DockPanel LastChildFill="true"> 
       <Border x:Name="errorBorder" Background="Red" DockPanel.Dock="right" Margin="5,0,0,0" Width="10" Height="10" CornerRadius="10" 
         ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"> 
        <TextBlock Text="!" VerticalAlignment="center" HorizontalAlignment="center" FontWeight="Bold" FontSize="8" Foreground="white" /> 
       </Border> 
       <AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center" > 
        <Border BorderBrush="red" BorderThickness="1" /> 
       </AdornedElementPlaceholder> 
      </DockPanel> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter> 

<Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type TextBoxBase}"> 
      <Border x:Name="Border" 
       BorderThickness="1" 
       CornerRadius="3" 
       Padding="0"> 
       <Border.BorderBrush> 
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> 
         <GradientStop Color="#AAAAA1" Offset="0" /> 
         <GradientStop Color="#AAAAA1" Offset=".2" /> 
        </LinearGradientBrush> 
       </Border.BorderBrush> 
       <ScrollViewer x:Name="PART_ContentHost" Margin="0"> 
        <ScrollViewer.Background> 
         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
          <GradientStop Offset="0" Color="#ededed"/> 
          <GradientStop Offset=".91" Color="White"/> 
         </LinearGradientBrush> 
        </ScrollViewer.Background> 
       </ScrollViewer> 
      </Border> 

      <ControlTemplate.Triggers> 
       <Trigger Property="IsEnabled" Value="False"> 
        <Setter TargetName="Border" Property="Background" Value="#EEEEEE"/> 
        <Setter TargetName="Border" Property="BorderBrush" Value="#EEEEEE"/> 
        <Setter Property="Foreground" Value="#888888"/> 
       </Trigger> 
       <Trigger Property="Validation.HasError" Value="true"> 
        <Setter Property="Margin" Value="0 0 15 0" /> 
       </Trigger>       
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter> 

Answer 1

Вот довольно прямо вперед способ сделать это в Xaml, используя LinearGradientBrush установить TextBox.Background свойство, когда TextBox.IsFocused верно.

<TextBox Width="100" Height="20"> 
    <TextBox.Style> 
     <Style TargetType="TextBox"> 
      <Style.Triggers> 
       <Trigger Property="IsFocused" Value="True"> 
        <Setter Property="Background"> 
         <Setter.Value> 
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
           <GradientStop Color="Yellow" Offset="0.0" /> 
           <GradientStop Color="Red" Offset="0.25" /> 
           <GradientStop Color="Blue" Offset="0.75" /> 
           <GradientStop Color="LimeGreen" Offset="1.0" /> 
          </LinearGradientBrush> 
         </Setter.Value> 
        </Setter> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </TextBox.Style> 
</TextBox> 

Edit: В ваших ControlTemplate.Triggers вам нужно добавить триггер, который устанавливает фон вашей ScrollViewer, попробуйте добавить следующий триггер ControlTemplate.Triggers Вашего стиля в.

<Trigger Property="IsFocused" Value="True"> 
    <Setter TargetName="PART_ContentHost" Property="Background"> 
     <Setter.Value> 
      <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
       <GradientStop Color="Yellow" Offset="0.0" /> 
       <GradientStop Color="Red" Offset="0.25" /> 
       <GradientStop Color="Blue" Offset="0.75" /> 
       <GradientStop Color="LimeGreen" Offset="1.0" /> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
</Trigger>