将CustomControl的视觉状态管理器与其样式分开

Question

我遵循着awesome tutorial的有关自定义控件的内容，在播放列表的第四段视频中，肖恩（Sean）浏览了视觉状态。在他的AnalogClockStyle.xaml中，他演示了控件网格内的一个简单的可视状态管理器，但是我可以想象，如果您只想分析控件模板，那么对于更复杂设计的自定义控件是不可行的。

是否可以将视觉状态管理器与控件模板的样式文件分开？理想情况下，我想为自定义控件*.cs文件，控件模板*.xaml文件，各自的样式*.xaml文件以及最终的可视状态管理器文件（如果可能）创建文件夹。

这是当前控件模板的样子：

<Style TargetType="local:AnalogClock">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:AnalogClock">
                <ControlTemplate.Resources>
                    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
                    <converters:GreaterThanMultiConverter x:Key="GreaterThanMultiConverter"/>
                    <converters:DivisionConverter x:Key="DivisionConverter"/>
                </ControlTemplate.Resources>
                <Grid x:Name="Clock" RenderTransformOrigin="0.5 0.5">
                    <Grid.RenderTransform>
                        <RotateTransform Angle="90"/>
                    </Grid.RenderTransform>

<!-- Move the Visual State Manager code to a separate file? -->
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="TimeStates">
                            <VisualState x:Name="Day">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="ClockFill"
                                                Storyboard.TargetProperty="Color"
                                                To="SkyBlue"/>
                                    <ColorAnimation Storyboard.TargetName="HourStroke"
                                                Storyboard.TargetProperty="Color"
                                                To="Gold"/>
                                    <ColorAnimation Storyboard.TargetName="MinuteStroke"
                                                Storyboard.TargetProperty="Color"
                                                To="Gold"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Night">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="ClockFill"
                                                Storyboard.TargetProperty="Color"
                                                To="Black"/>
                                    <ColorAnimation Storyboard.TargetName="HourStroke"
                                                Storyboard.TargetProperty="Color"
                                                To="White"/>
                                    <ColorAnimation Storyboard.TargetName="MinuteStroke"
                                                Storyboard.TargetProperty="Color"
                                                To="White"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Christmas">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="ClockFill"
                                                Storyboard.TargetProperty="Color"
                                                To="Green"/>
                                    <ColorAnimation Storyboard.TargetName="HourStroke"
                                                Storyboard.TargetProperty="Color"
                                                To="Red"/>
                                    <ColorAnimation Storyboard.TargetName="MinuteStroke"
                                                Storyboard.TargetProperty="Color"
                                                To="Red"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
<!-- Move the Visual State Manager code to a separate file? -->

                    <Ellipse x:Name="PART_Clock" Stroke="Black" StrokeThickness="1">
                        <Ellipse.Style>
                            <Style TargetType="Ellipse">
                                <Setter Property="Width" Value="{Binding ActualHeight, ElementName=Clock}"/>
                                <Setter Property="Height" Value="auto"/>
                                <Style.Triggers>
                                    <DataTrigger Value="True">
                                        <DataTrigger.Binding>
                                            <MultiBinding Converter="{StaticResource GreaterThanMultiConverter}">
                                                <MultiBinding.Bindings>
                                                    <Binding Path="ActualHeight" ElementName="Clock"/>
                                                    <Binding Path="ActualWidth" ElementName="Clock"/>
                                                </MultiBinding.Bindings>
                                            </MultiBinding>
                                        </DataTrigger.Binding>
                                        <DataTrigger.Setters>
                                            <Setter Property="Height" Value="{Binding ActualWidth, ElementName=Clock}"/>
                                            <Setter Property="Width" Value="auto"/>
                                        </DataTrigger.Setters>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Ellipse.Style>
                        <Ellipse.Fill>
                            <SolidColorBrush x:Name="ClockFill" Color="White"/>
                        </Ellipse.Fill>
                    </Ellipse>

                    <Line x:Name="PART_HourHand" StrokeThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" X1="0" 
                        X2="{Binding ActualHeight, ElementName=PART_Clock, Converter={StaticResource DivisionConverter}, ConverterParameter=-4}">
                        <Line.Stroke>
                            <SolidColorBrush x:Name="HourStroke" Color="Black"/>
                        </Line.Stroke>
                    </Line>
                    <Line x:Name="PART_MinuteHand" StrokeThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" X1="0" 
                        X2="{Binding ActualHeight, ElementName=PART_Clock, Converter={StaticResource DivisionConverter}, ConverterParameter=-2.5}">
                        <Line.Stroke>
                            <SolidColorBrush x:Name="MinuteStroke" Color="Black"/>
                        </Line.Stroke>
                    </Line>

                    <Line x:Name="PART_SecondHand" Visibility="{TemplateBinding ShowSeconds, Converter={StaticResource BooleanToVisibilityConverter}}" Stroke="Red" StrokeThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center" X1="0"
                        X2="{Binding ActualHeight, ElementName=PART_Clock, Converter={StaticResource DivisionConverter}, ConverterParameter=-2.5}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>