Problem with PasswordBox.Background

[niubizi]

Hi, I mad a TextBox and a PasswordBox with background image. The TextBox seems nice, but the PasswordBox has some problem when hover or enter.

<PasswordBox.Background>
    <ImageBrush ImageSource="/Images/login/key.png" Stretch="None"
                AlignmentY="Center" 
                AlignmentX="Left">
        <ImageBrush.Transform>
            <TransformGroup>
                <ScaleTransform />
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform X="10"/>
            </TransformGroup>
        </ImageBrush.Transform>
    </ImageBrush>
</PasswordBox.Background>

[Kinnara]

Actually the behavior of the PasswordBox is the intended behavior. Although the TextBox seems to work now, it's not intended and might break in future versions. If you try this in a UWP app, I would assume neither will work. The reason is that in hover and focused states the value of the Background property is not used, instead TextControlBackgroundPointerOver and TextControlBackgroundFocused are used, respectively. To change these two brushes, you can override them like below:

<ui:SimpleStackPanel
    Margin="12"
    Spacing="24">
    <ui:SimpleStackPanel.Resources>
        <ImageBrush
            x:Key="PasswordBackground"
            ImageSource="/Images/login/key.png"
            Stretch="None"
            AlignmentY="Center"
            AlignmentX="Left">
            <ImageBrush.Transform>
                <TranslateTransform X="10" />
            </ImageBrush.Transform>
        </ImageBrush>
    </ui:SimpleStackPanel.Resources>

    <PasswordBox
        Width="200"
        Padding="44,6,6,5"
        HorizontalAlignment="Left"
        ui:ControlHelper.PlaceholderText="Password"
        Background="{StaticResource PasswordBackground}">
        <PasswordBox.Resources>
            <StaticResource x:Key="TextControlBackgroundPointerOver" ResourceKey="PasswordBackground" />
            <StaticResource x:Key="TextControlBackgroundFocused" ResourceKey="PasswordBackground" />
        </PasswordBox.Resources>
    </PasswordBox>
</ui:SimpleStackPanel>

Alternatively, it might be simpler to just overlay the image on top of the control like this:

<Grid>
    <PasswordBox
        Width="200"
        Padding="44,6,6,5"
        HorizontalAlignment="Left"
        ui:ControlHelper.PlaceholderText="Password" />
    <Image
        Source="/Images/login/key.png"
        Stretch="None"
        HorizontalAlignment="Left"
        VerticalAlignment="Center"
        Margin="10,0,0,0"
        IsHitTestVisible="False" />
</Grid>

[niubizi]

I'm using the second way (overlay the image on top of the control) righnt now. Thanks.