cannot centre align password in passwordbox in WP7

Question

Im not able to centre align password in a PasswordBox in Windows Phone. The centre align is disabled. Is there any method by which we can align the text to the centre?

I tried setting of the verticalcontentalignment and the horizontalcontentalignment to center but it does not have any effect. Or is it possible to give a spacing between the border of the password box and the password.

Alfah

Answer 1

You can edit the control template to achieve that effect:

<phone:PhoneApplicationPage
    x:Class="PhoneApp3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="480"
    d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"
    Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <phone:PhoneApplicationPage.Resources>
        <ControlTemplate
            x:Key="PhoneDisabledPasswordBoxTemplate"
            TargetType="PasswordBox">
            <Border
                x:Name="ContentElement"
                BorderThickness="0"
                Margin="{StaticResource PhonePasswordBoxInnerMargin}"
                Padding="{TemplateBinding Padding}" />
        </ControlTemplate>
        <Style
            x:Key="PasswordBoxStyle1"
            TargetType="PasswordBox">
            <Setter
                Property="FontFamily"
                Value="{StaticResource PhoneFontFamilyNormal}" />
            <Setter
                Property="FontSize"
                Value="{StaticResource PhoneFontSizeMediumLarge}" />
            <Setter
                Property="Background"
                Value="{StaticResource PhoneTextBoxBrush}" />
            <Setter
                Property="Foreground"
                Value="{StaticResource PhoneTextBoxForegroundBrush}" />
            <Setter
                Property="BorderBrush"
                Value="{StaticResource PhoneTextBoxBrush}" />
            <Setter
                Property="BorderThickness"
                Value="{StaticResource PhoneBorderThickness}" />
            <Setter
                Property="SelectionBackground"
                Value="{StaticResource PhoneAccentBrush}" />
            <Setter
                Property="SelectionForeground"
                Value="{StaticResource PhoneContrastBackgroundBrush}" />
            <Setter
                Property="Padding"
                Value="2" />
            <Setter
                Property="Template">
                <Setter.Value>
                    <ControlTemplate
                        TargetType="PasswordBox">
                        <Grid
                            Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup
                                    x:Name="CommonStates">
                                    <VisualState
                                        x:Name="Normal" />
                                    <VisualState
                                        x:Name="MouseOver" />
                                    <VisualState
                                        x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Visibility"
                                                Storyboard.TargetName="EnabledBorder">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Visibility"
                                                Storyboard.TargetName="DisabledBorder">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup
                                    x:Name="FocusStates">
                                    <VisualState
                                        x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Background"
                                                Storyboard.TargetName="EnabledBorder">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource PhoneTextBoxEditBackgroundBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="BorderBrush"
                                                Storyboard.TargetName="EnabledBorder">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource PhoneTextBoxEditBorderBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="Unfocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border
                                x:Name="EnabledBorder"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                Margin="{StaticResource PhoneTouchTargetOverhang}">
                                <Border
                                    x:Name="ContentElement"
                                    HorizontalAlignment="Center"
                                    BorderThickness="0"
                                    Margin="{StaticResource PhonePasswordBoxInnerMargin}"
                                    Padding="{TemplateBinding Padding}" />
                            </Border>
                            <Border
                                x:Name="DisabledBorder"
                                BorderBrush="{StaticResource PhoneDisabledBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="Transparent"
                                Margin="{StaticResource PhoneTouchTargetOverhang}"
                                Visibility="Collapsed">
                                <PasswordBox
                                    x:Name="DisabledContent"
                                    HorizontalAlignment="Center"
                                    Background="Transparent"
                                    Foreground="{StaticResource PhoneDisabledBrush}"
                                    Password="{TemplateBinding Password}"
                                    PasswordChar="{TemplateBinding PasswordChar}"
                                    Template="{StaticResource PhoneDisabledPasswordBoxTemplate}" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid
        x:Name="LayoutRoot"
        Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition
                Height="Auto" />
            <RowDefinition
                Height="*" />
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel
            x:Name="TitlePanel"
            Grid.Row="0"
            Margin="12,17,0,28">
            <TextBlock
                x:Name="ApplicationTitle"
                Text="MY APPLICATION"
                Style="{StaticResource PhoneTextNormalStyle}" />
            <TextBlock
                x:Name="PageTitle"
                Text="page name"
                Margin="9,-7,0,0"
                Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid
            x:Name="ContentPanel"
            Grid.Row="1"
            Margin="12,0,12,0">
            <PasswordBox
                VerticalAlignment="Center"
                Style="{StaticResource PasswordBoxStyle1}" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>