StrokeDashArray not working with VisualStateManager (UWP)

问题

I want to have a dotted margin for Textbox if it is in Disabled state, My code looks like this

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

All looks good to me but this is not generating a dotted line, instead, it gives the complete normal line. As you can see I have set StrokeDashArray for BorderElement in Disabled state. If I give same StrokeDashArray directly to that Line (BorderElement) it is working fine (but in my case I want the dotted line only for disabled status). How can I achieve this?

回答1:

StrokeDashArray not working with VisualStateManager (UWP)

The problem is you missed Normal VisualState that will case the style could not change when switch TextBox IsEnabled property. please add <VisualState x:Name="Normal" /> into 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>

来源：https://stackoverflow.com/questions/61487391/strokedasharray-not-working-with-visualstatemanager-uwp