Animación de dos elementos de borde anidados en la plantilla de control de WPF: wpf, xaml, animation, controltemplate, visualstatemanager

Estoy tratando de crear un nuevo ControlTemplate paracaja de texto. Al final debe usar varios estados personalizados, que cambian la apariencia del control. La plantilla ControlTemplate en el fragmento de código se elimina completamente para ilustrar mi problema.

Quiero usar dos elementos de borde anidados y animar sus bordes y color de fondo en varios estados visuales.

<Style TargetType="{x:Type TextBox}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border" CornerRadius="2" BorderThickness="1" Margin="2">
<Border.Background>
<SolidColorBrush Color="White" />
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="Black" />
</Border.BorderBrush>
<Border Name="Inner" CornerRadius="2" Padding="2" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="Blue" />
</Border.BorderBrush>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled" />
<VisualState x:Name="ReadOnly" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FFE8EDF9" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Este es un ejemplo casi básico de uso deVisualstates en plantilla de control que se pueden encontrar en internet. Cuando llega el evento mouseover, no está funcionando y el fondo no cambia. Si quito el borde interno, funcionará como se esperaba.

Si alguien puede ayudarme con esta plantilla, lo agradecería mucho.

Respuestas

Tu problema fue que adjuntaste el VisualStateManager.VisualStateGroups colección al interior Border elemento, por lo que cuando se quita el interior Border, el VisualStateGroups colección se unió a la externa Border De nuevo, por eso aún funcionaba. Todo lo que necesita hacer para solucionarlo es moverlo hacia el exterior Border:

<Style TargetType="{x:Type TextBox}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border" CornerRadius="2" BorderThickness="1" Margin="2" Background="White" BorderBrush="Black">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled" />
<VisualState x:Name="ReadOnly" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FFE8EDF9" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="Inner" CornerRadius="2" Padding="2" BorderThickness="1" BorderBrush="Blue" Background="{x:Null}">
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>