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>

编辑：在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>

WPF - 使用渐变更改背景文本框

1 个答案: