CODEWITHSUNDEEP
wpfxamlanimationcontroltemplatevisualstatemanager
user3797840
user3797840

Reputation: 3

Animating two nested Border elements in WPF ControlTemplate

I am tryting to create new ControlTemplate for textbox. At the end it should use several custom states, that changes the appearence of the control. The ControlTemplate in the code snippet is stripped to bone just to ilustrate my problem.

I want to use two nested border elements and animate their borders and background color in various visual states.

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

This is almost basic example of usage of visualstates in control template that can be found on internet. When comes to mouseover event, is is not working and the background does not change. If I remove the inner border, it will work just as expected.

If anyone is able to help me with this template, I would very much apprecite it.

Upvotes: 0

Views: 572

Answers (1)

Sheridan
Sheridan

Reputation: 69959

Your problem was that you attached the VisualStateManager.VisualStateGroups collection to the inner Border element, so when you removed the inner Border, the VisualStateGroups collection became attached to the outer Border again, which is why it still worked . All you need to do to fix it is to move it into the outer 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>

Upvotes: 2

Related Questions