Expand TextBox on MouseOver using VisualStateManager

Viewed 36

i am defining my own ControlTemplate in RecourceDictionary. I have a problem with defining VisualStateManager, here is my code:

<Style x:Key="SchedulerTextBox" TargetType="TextBox">
    <Setter Property="SnapsToDevicePixels" 
            Value="True" />
    <Setter Property="OverridesDefaultStyle" 
            Value="True" />
    <Setter Property="KeyboardNavigation.TabNavigation"
            Value="None" />
    <Setter Property="AllowDrop"
            Value="True" />
    <Setter Property="Foreground"
            Value="{StaticResource TextForeground}" />
    <Setter Property="Background"
            Value="{StaticResource TextBoxBackground}" />
    <Setter Property="Width"
            Value="50" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox" >
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="Red"
                        BorderThickness="1"
                        CornerRadius="5"
                        x:Name="Border" 
                        Width="{TemplateBinding Width}"
                        Height="{TemplateBinding Height}">
                    <ScrollViewer Margin="0" x:Name="PART_ContentHost" />

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates" >
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:2"
                                                    By="100" From="{TemplateBinding Width}"
                                                    Storyboard.TargetProperty="Width" />
                                    <DoubleAnimation Duration="0:0:2"
                                                         By="100" From="{TemplateBinding Height}"
                                                         Storyboard.TargetProperty="Height" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I dont know why but textbox appears like this: On Hover

without mouse over textbox looks like this: WithoutHover

Does anyone knows why is textbox showing partly, and how can i fix this? Thank you for help!

0 Answers
Related