在Metro风格应用程序中使用XAML进行WatermarkTextBox控件

时间:2013-05-21 14:31:26

标签: xaml windows-8

我正在XAML Metro Style Application中学习舞台。我想用WatermarkTextBox控件创建简单的登录页面,如下图所示。我的问题是,我想将WatermarkTextBox的水印文本(Email Id as Password Text)设置为垂直中间。

enter image description here

我的XMAL代码行如下

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Login"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Controls="using:WinRTXamlToolkit.Controls"
    x:Class="Login.MainPage"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="163*"/>
            <RowDefinition Height="101*"/>
            <RowDefinition Height="112*"/>
            <RowDefinition Height="114*"/>
            <RowDefinition Height="116*"/>
            <RowDefinition Height="162*"/>
        </Grid.RowDefinitions>
        <Controls:WatermarkTextBox WatermarkText="Email Id"   HorizontalAlignment="Left" Margin="502,10,0,0" Grid.Row="1" VerticalAlignment="Center" Height="60" Width="433" FontFamily="Andalus" FontSize="18" Padding="10, 15, 0, 0"/>
        <TextBox x:Name="PasswordWatermark" Text="Password"  IsHitTestVisible="False" Grid.Row="2" FontSize="18" FontFamily="Andalus" Width="433" Height="60" Margin="502,0,425,52" Padding="10, 15, 0, 0"/>
        <PasswordBox x:Name="pbPassword" LostFocus="PasswordLostFocus" GotFocus="PasswordGotFocus" Grid.Row="2" FontFamily="Andalus" FontSize="18" Margin="502,0,425,52" Opacity="0" Width="433" Height="60" Padding="10, 15, 0, 0"/>
        <Button x:Name="btnLogin" Content="Login" HorizontalAlignment="Left" Margin="791,0,0,0" Grid.Row="3" VerticalAlignment="Top" Height="58" Width="147" FontFamily="Andalus" FontSize="18" Background="#FF385936" BorderBrush="#FF644F4F"/>
    </Grid>
</Page>

.CS

private void PasswordLostFocus(object sender, RoutedEventArgs e)
{
    CheckPasswordWatermark();
}

private void CheckPasswordWatermark()
{
     var passwordEmpty = string.IsNullOrEmpty(pbPassword.Password);
     PasswordWatermark.Opacity = passwordEmpty ? 100 : 0;
     pbPassword.Opacity = passwordEmpty ? 0 : 100;
}

private void PasswordGotFocus(object sender, RoutedEventArgs e)
{
     PasswordWatermark.Opacity = 0;
     pbPassword.Opacity = 100;
}

你的帮助是谢谢。 提前致谢。

2 个答案:

答案 0 :(得分:0)

好的,我没有使用Vs 2012,所以我无法测试它。我在记事本中编码。但它可能有所帮助:

 <Controls:WatermarkTextBox WatermarkText="Email Id"   HorizontalAlignment="Left" Margin="502,10,0,0" Grid.Row="1" 
     VerticalAlignment="Center" Height="60" Width="433" FontFamily="Andalus" FontSize="18" Padding="10, 15, 0, 0">
    <Controls:WatermarkTextBox.WatermarkTextStyle>
        <Style TargetType="TextBlock">
            <Setter Property="VerticalAlignment" Value="Center" />  
        </Style>            
    </Controls:WatermarkTextBox.WatermarkTextStyle>         
 <Controls:WatermarkTextBox/>

如果可能,告诉我结果。

答案 1 :(得分:0)

我可能错了,但文本框包含VerticalContentAlignment和Horizo​​ntalContentAlignment属性。

那些告诉控件如何对齐文本内部的文本。