Define the style for PhoneTextBox in windows phone

I'm rewriting the style for the PhoneTextBox, changing the default background to "transpanrent", the foreground to "White" and the BorderBrush to "White", because I want to design a Dark-Theme.

But a problem came up that the text-input-indicator disappeared. I thank the reason is that the foreground of the text-input-indicator is black, so the user can't see it. But I can not find a way to define the foreground of the text-input-indicator. Any tips will be appricated.

PS. I don't konw how to decribe the indicator, so I make up the word "text-input-indicator", which is shown below:

Nomal situation,the black Vertical line shows up.

After rewriting the style, the user can't see the black vertical line:

and the xaml code:

 <Style x:Key="PhoneTextBoxStyle" TargetType="toolkit:PhoneTextBox">
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="BorderBrush" Value="White"/>
        <Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="SelectionForeground" Value="White"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Padding" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:PhoneTextBox">
                    <Grid x:Name="RootGrid" Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                </VisualState>
                                <VisualState x:Name="Enabled">
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="LengthIndicatorStates">
                                <VisualState x:Name="LengthIndicatorVisible">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="LengthIndicator">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="RootGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0, 0, 0, 27"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="LengthIndicator">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0.6"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0:0:0.350" To="32" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Storyboard.TargetName="LengthIndicator">
                                            <DoubleAnimation.EasingFunction>
                                                <ExponentialEase Exponent="6"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="LengthIndicatorHidden">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.350" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Storyboard.TargetName="LengthIndicator">
                                            <DoubleAnimation.EasingFunction>
                                                <ExponentialEase Exponent="6"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="RootGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0, 0, 0, 0"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="LengthIndicator">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.350" Value="0"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="LengthIndicator">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.350">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="LengthIndicatorBorder">
                            <TextBlock x:Name="LengthIndicator" Foreground="{StaticResource PhoneContrastBackgroundBrush}" FontSize="{StaticResource PhoneFontSizeNormal}" HorizontalAlignment="Right" Margin="0" Opacity="0" TextAlignment="Right" VerticalAlignment="Bottom">
                                    <TextBlock.RenderTransform>
                                        <TranslateTransform/>
                                    </TextBlock.RenderTransform>
                            </TextBlock>
                        </Border>
                        <Border x:Name="HintBorder" BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Background="{TemplateBinding Background}" Margin="0">
                            <Grid>
                                <ContentControl x:Name="HintContent" Background="Transparent" Content="{TemplateBinding Hint}"
                                                HorizontalAlignment="Left" Margin="3,5,3,0" Style="{TemplateBinding HintStyle}" 
                                                Foreground="Gray"
                                                Visibility="{TemplateBinding ActualHintVisibility}" VerticalAlignment="Top"/>
                                <ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" 
                                                Margin="{StaticResource PhoneTextBoxInnerMargin}" 
                                                Padding="{TemplateBinding Padding}"
                                                VerticalContentAlignment="Stretch"/>
                            </Grid>
                        </Border>
                        <Border x:Name="TextBorder" BorderBrush="White" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Background="Transparent" Margin="0" Visibility="Collapsed">
                            <TextBox x:Name="Text" Foreground="White" 
                                     FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" 
                                     FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}"
                                     HorizontalAlignment="Left" SelectionForeground="{TemplateBinding SelectionForeground}" 
                                     SelectionBackground="{TemplateBinding SelectionBackground}" 
                                     TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" 
                                     Text="{TemplateBinding Text}"/>
                        </Border>
                        <Border x:Name="ActionIconBorder" Background="Transparent" HorizontalAlignment="Right" Height="54" VerticalAlignment="Bottom" Width="54">
                            <Image x:Name="ActionIcon" Height="54" Source="{TemplateBinding ActionIcon}" Width="54"/>
                        </Border>
                        <TextBlock x:Name="MeasurementTextBlock" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" IsHitTestVisible="False" Margin="8" Opacity="0" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" Text="{TemplateBinding Text}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

回答1:

Probably you looking for CaretBrush, SelectionBackground and SelectionForeground. I don't know these properties are binded or not in toolkit:PhoneTextBox, but you definitely can restyle it manually in any case.

回答2:

if someone is looking solution for changing lengthIndicator properties

<Border x:Name="LengthIndicatorBorder">
    <TextBlock x:Name="LengthIndicator" HorizontalAlignment="Right" Margin="0" Opacity="0" TextAlignment="Right" VerticalAlignment="Bottom">
            <TextBlock.RenderTransform>
                <TranslateTransform/>
            </TextBlock.RenderTransform>
    </TextBlock>
</Border>

this block is what you need