Hint is not appearing for PhoneTextBox by applying following style in Windows Phone8?

Question

<Style x:Key="chatTextBox" TargetType="toolkit:PhoneTextBox">
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" />
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}" />
        <Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}" />
        <Setter Property="SelectionBackground" Value="Transparent" />
        <Setter Property="SelectionForeground" Value="Transparent" />
        <Setter Property="Hint" Value="Enter Message" />
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}" />
        <Setter Property="Padding" Value="2" />
        <Setter Property="Template">
        <Setter.Value>
        <ControlTemplate TargetType="toolkit:PhoneTextBox">
        <Grid Background="Transparent">
        <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal" />
        <VisualState x:Name="MouseOver" />
        <VisualState x:Name="Disabled">
        <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0">
        <DiscreteObjectKeyFrame.Value>
        <Visibility>Collapsed</Visibility>
        </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0">
        <DiscreteObjectKeyFrame.Value>
        <Visibility>Visible</Visibility>
        </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        </Storyboard>
        </VisualState>

        </VisualStateGroup>
        <VisualStateGroup x:Name="FocusStates">
        <VisualState x:Name="Focused" />


        <VisualState x:Name="Unfocused" />
        </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="EnabledBorder"
        Margin="{StaticResource PhoneTouchTargetOverhang}"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}">
        <ContentControl x:Name="ContentElement"
        Margin="{StaticResource PhoneTextBoxInnerMargin}"
        HorizontalContentAlignment="Stretch"
        VerticalContentAlignment="Stretch"
        BorderThickness="0"
        Padding="{TemplateBinding Padding}" />
        </Border>
        <Border x:Name="DisabledOrReadonlyBorder"
        Margin="{StaticResource PhoneTouchTargetOverhang}"
        Background="Transparent"
        BorderBrush="{StaticResource PhoneDisabledBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        Visibility="Collapsed">
        <TextBox x:Name="DisabledOrReadonlyContent"
        Background="Transparent"
        FontFamily="{TemplateBinding FontFamily}"
        FontSize="{TemplateBinding FontSize}"
        FontStyle="{TemplateBinding FontStyle}"
        FontWeight="{TemplateBinding FontWeight}"
        Foreground="{StaticResource PhoneDisabledBrush}"
        IsReadOnly="True"
        SelectionBackground="{TemplateBinding SelectionBackground}"
        SelectionForeground="{TemplateBinding SelectionForeground}"
        Text="{TemplateBinding Text}"
        TextAlignment="{TemplateBinding TextAlignment}"
        TextWrapping="{TemplateBinding TextWrapping}" />
        </Border>
        </Grid>
        </ControlTemplate>
        </Setter.Value>
        </Setter>
        </Style>

I used above code for remove background focused color for PhoneTextBox which is in toolkit.Everything is fine but, hint is not appearing.After applying this style. If anybody helps me highly appreciated.

How do you want your textbox should be? If you can able to describe, we can able to help you. — Balasubramani M, Jul 19 '14 at 11:02
I want to make text-box with transparent background ,while get focused also it should be transparent and it is having some hint (place holder). same as http://stackoverflow.com/questions/11727269/resolve-textbox-background-focus-issue I followed same but the Hint is not appearing.They given for normal text box I used for toolkit text box.Thanks.. — KiShOrE, Jul 19 '14 at 11:23
@BalasubramaniM Could you please look on to my comment and help me.. — KiShOrE, Jul 19 '14 at 11:49

score 1 · Accepted Answer · answered Jul 19 '14 at 11:53

As per your needs, I just created the style for PhoneTextBox and apply this style for it. Background will be transparent in normal and also in focused state.

<Style x:Key="PhoneTextBoxStyle1" TargetType="toolkit:PhoneTextBox">
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{StaticResource WhiteBrush}"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>
        <Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="Hint" Value="sample"/>
        <Setter Property="HintStyle" Value="{StaticResource HintCustomStyle}"/>
        <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="Normal"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HintBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TextBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="TextBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TextBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="HorizontalAlignment" Storyboard.TargetName="Text">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <HorizontalAlignment>Stretch</HorizontalAlignment>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="HintBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="HintBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </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="{StaticResource PhoneMargin}" 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="{StaticResource PhoneTouchTargetOverhang}">
                            <Grid>
                                <ContentControl x:Name="HintContent" Background="Transparent" Content="{TemplateBinding Hint}" HorizontalAlignment="Left" Margin="3,0,3,0" Style="{TemplateBinding HintStyle}" Visibility="{TemplateBinding ActualHintVisibility}" VerticalAlignment="Center"/>
                                <ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
                            </Grid>
                        </Border>
                        <Border x:Name="TextBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
                            <TextBox x:Name="Text" Foreground="{StaticResource PhoneDisabledBrush}" 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="72" VerticalAlignment="Bottom" Width="84">
                            <Image x:Name="ActionIcon" Height="26" Source="{TemplateBinding ActionIcon}" Width="26"/>
                        </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>

Finally add the following code as your Hint style.

<Style TargetType="ContentControl" x:Key="HintCustomStyle">
        <Setter Property="FontFamily" Value="Calibri"/>
        <Setter Property="Foreground" Value="Aqua"/>
        <Setter Property="FontSize" Value="30"/>
    </Style>

Change HintCustomStyle, if you want to customize Hint Style.

Thank You very much balasubramani...How can we write all these properties? manually or is there any tool?? — KiShOrE, Jul 19 '14 at 12:22
Kindly accept and Vote Up the answer if you got the solution so that it helps other people to proceed with the code. No tools are needed, just follow below method. Right click the added phonetextbox in sample emulator and select Edit Template -> Edit a copy and select Ok. It will create a code for you. Just modify the code as per your style. That's it. — Balasubramani M, Jul 19 '14 at 12:26
We are not having basic knowledge with designing and windows phone8 development, could you please help me, all above setters are ok but coming to this is making me bit confusion people how write the this much of nested code..How can we follow this?Please help me other wise provide me links which will provide more info..once again thanks balu.. — KiShOrE, Jul 19 '14 at 12:30
Currently i don't have any links to provide you. If you have only basic knowledge in App Development, you should work hard, do several researches and then only you could achieve. — Balasubramani M, Jul 19 '14 at 12:36
May be this post can help you from my blog, Try it out. There is a videos as well :) http://wpdevkvk.wordpress.com/2014/07/17/custom-xaml-controllers-i-adding-custom-styles-to-elements/ — Kasun Kodagoda, Jul 19 '14 at 16:48

Hint is not appearing for PhoneTextBox by applying following style in Windows Phone8?

1 Answers1