VisualStateManager 클래스

Visual State : 비주얼 상태
  - 컨트롤들의 현재 보여지는 상태

버튼은 여러가지 상태로 보여진다.
  - 기본 버튼 모양
  - 마우스 오버시 버튼 모양
  - 마우스 클릭시 버튼 모양

컨트롤 상태 : 위 3가지 상태에 해당하는 키워드
  - Normal
  - MouseOver
  - Pressed






[MainPage.xaml]

<UserControl x:Class="RiaVisualState.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:red="clr-namespace:System.Windows;assembly=System.Windows"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.Resources>

            <Style x:Key="myTextBox" TargetType="TextBox">

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="TextBox">

                            <Grid x:Name="grd">

                                <Border x:Name="ContentElement" BorderBrush="Blue" BorderThickness="1" />

                                <Border x:Name="bdrFocused" BorderBrush="Red" BorderThickness="1" Opacity="0" />

                                <red:VisualStateManager.VisualStateGroups>

                                    <red:VisualStateGroup x:Name="CommonStates">

                                        <red:VisualState x:Name="Normal" />

                                    </red:VisualStateGroup>

                                    <red:VisualStateGroup x:Name="FocusStates">

                                        <red:VisualState x:Name="Focused">

                                            <Storyboard>

                                                <DoubleAnimation

                                                    Storyboard.TargetName="bdrFocused"

                                                                                                                                                                                                                                      Storyboard.TargetProperty="(UIElement.Opacity)"

                                                    Duration="0" To="1" />

                                            </Storyboard>

                                        </red:VisualState>

                                        <red:VisualState x:Name="Unfocused">

                                            <Storyboard>

                                                <DoubleAnimation 

                                                    Storyboard.TargetName="bdrFocused"

                                                                                                                                                                                                                                      Storyboard.TargetProperty="(UIElement.Opacity)"

                                                                                                                                                                                                                                      Duration="0" To="0" />

                                            </Storyboard>

                                        </red:VisualState>

                                    </red:VisualStateGroup>

                                </red:VisualStateManager.VisualStateGroups>

                            </Grid>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

        </Grid.Resources>

        <StackPanel>

            <TextBox Style="{StaticResource myTextBox}" />

            <TextBox />

        </StackPanel>

    </Grid>

</UserControl>