StrokeDashArray不能与VisualStateManager(UWP)一起工作。

Question

我想在文本框处于禁用状态时，为它设置一个虚线，我的代码是这样的。

 <Page.Resources>
    <SolidColorBrush x:Key="TextBoxBackgroundThemeBrush" Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="TextBoxBorderThemeBrush" Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="TextBoxForegroundThemeBrush" Color="#FF000000" />
    <SolidColorBrush x:Key="TextBoxForegroundHeaderThemeBrush" Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#AB000000" />
    <SolidColorBrush x:Key="TextSelectionHighlightColorThemeBrush" Color="#FF4617B4"/>
    <x:Double x:Key="TextControlThemeMinHeight">32</x:Double>
    <x:Double x:Key="TextControlThemeMinWidth">64</x:Double>
    <Thickness x:Key="TextControlBorderThemeThickness">2</Thickness>
    <Thickness x:Key="TextControlThemePadding">10,3,10,5</Thickness>
    <FontFamily x:Key="ContentControlThemeFontFamily">Segoe UI</FontFamily>
    <x:Double x:Key="ControlContentThemeFontSize">14.667</x:Double>
    <!-- Default style for Windows.UI.Xaml.Controls.TextBox -->
    <Style TargetType="TextBox" x:Key="TextBoxStyle1">
        <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
        <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
        <Setter Property="Foreground" Value="{ThemeResource TextBoxForegroundThemeBrush}" />
        <Setter Property="Background" Value="{ThemeResource TextBoxBackgroundThemeBrush}" />
        <Setter Property="BorderBrush" Value="{ThemeResource TextBoxBorderThemeBrush}" />
        <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
        <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                                       Storyboard.TargetProperty="StrokeDashArray">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="2,2" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Border x:Name="BackgroundElement"
                        Grid.Row="1"
                        Background="{TemplateBinding Background}"
                        Margin="{TemplateBinding BorderThickness}"
                        Grid.ColumnSpan="2"
                        Grid.RowSpan="1"/>
                        <Line  x:Name="BorderElement" Stroke="Red" X2="10000"  Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="1" 
                               Margin="0 39 0 0"    StrokeThickness="2"  StrokeDashCap="Round" />

                        <ContentPresenter x:Name="HeaderContentPresenter"
                                  Grid.Row="0"
                                  Foreground="{ThemeResource TextBoxForegroundHeaderThemeBrush}"
                                  Margin="0,4,0,4"
                                  Grid.ColumnSpan="2"
                                  Content="{TemplateBinding Header}"
                                  ContentTemplate="{TemplateBinding HeaderTemplate}"
                                 />
                        <ScrollViewer x:Name="ContentElement"
                              Grid.Row="1"
                              HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                              HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                              VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                              VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                              IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                              IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                              IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                              Margin="{TemplateBinding BorderThickness}"
                              Padding="{TemplateBinding Padding}"
                              IsTabStop="False"
                              AutomationProperties.AccessibilityView="Raw"
                              ZoomMode="Disabled" />
                        <ContentControl x:Name="PlaceholderTextContentPresenter"
                              Grid.Row="1"
                              Foreground="{ThemeResource TextBoxPlaceholderTextThemeBrush}"
                              Margin="{TemplateBinding BorderThickness}"
                              Padding="{TemplateBinding Padding}"
                              IsTabStop="False"
                              Grid.ColumnSpan="2"
                              Content="{TemplateBinding PlaceholderText}" 
                              IsHitTestVisible="False"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"></RowDefinition>
    </Grid.RowDefinitions>
    <TextBox Height="40" Width="300" x:Name="txtDisabled" PlaceholderText="I'm Disabled"  IsEnabled="False" Grid.Row="1" Style="{StaticResource TextBoxStyle1}" ></TextBox>
</Grid>

在我看来一切都很好，但这并没有生成一条虚线，而是给出了完整的法线。正如你所看到的，我已经将 StrokeDashArray 对于 BorderElement 在 Disabled 状态。如果我直接将相同的StrokeDashArray赋予该Line（BorderElement），它就能正常工作（但在我的例子中，我只想让虚线代表禁用状态）。我怎样才能做到这一点？

Answer 1

StrokeDashArray不能与VisualStateManager(UWP)一起工作。

问题是你错过了 Normal VisualState 当切换TextBox时，会出现风格无法改变的情况。IsEnabled 财产，请加 <VisualState x:Name="Normal" /> 变成 VisualStateGroup

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="Disabled">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="StrokeDashArray">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="2,2" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>