Question

点击图像应该用另一张图像替换图像，反之亦然。

在文本框中只能看到下线部分。它的xaml部分如下所示。

<Grid Grid.Row="1" Background="White">
            <StackPanel Orientation="Vertical" HorizontalAlignment="Center"  Width="354"  Height="336">
                <TextBox x:Name="emailBox" BorderThickness="0" Background="White" HorizontalAlignment="Left" Height="45" Width="246"  Margin="55,90,0,0" TextWrapping="Wrap" VerticalAlignment="Center"  FontSize="25" FontFamily="Segoe UI Light" />
                <Canvas Margin="58,-45,136,0">
                    <Image x:Name="mailLogo" Source="Assets/ic_mail.png" Height="41" Width="41" />
                </Canvas>
                <PasswordBox x:Name="passBox"  PasswordRevealMode="Hidden" Background="White" HorizontalAlignment="Left" Height="45" Width="246"  Margin="55,50,0,0" VerticalAlignment="Center"  FontSize="25" FontFamily="Segoe UI Light" />
                <Canvas Margin="58,-45,136,0">
                    <Image x:Name="passLogo" Source="Assets/ic_pass.png" Height="41" Width="41" />
                </Canvas>

                <Image Name="showimg" Source="Assets/show_pass.png"  Width="25" Height="50" Margin="50,30,40,10" Tapped="Image_Tapped" Stretch="Uniform"/>
                <TextBlock Name="showPass"
                    Text="Show Password"
                    Foreground="#303030"  
                    FontSize="15"
                    FontFamily="Koblenz Serial Medium" 
                    Margin="200,-45,15,20" />
            </StackPanel>
        </Grid>

cs文件

namespace CustomSplash
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class signup : Page
    {
        public signup()
        {
            this.InitializeComponent();
        }

        private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(signin));
        }

        private void Image_Tapped(object sender, TappedRoutedEventArgs e)
        {

            if (showimg.Source==new BitmapImage(new Uri("ms-appx:///Assets/show_pass.png", UriKind.RelativeOrAbsolute)))
            {
            passBox.PasswordRevealMode = PasswordRevealMode.Visible;
            showPass.Text = "Hide Password";
            SetImage("ms-appx:///Assets/hide_pass_.png");
            }
            else
            {
                passBox.PasswordRevealMode = PasswordRevealMode.Hidden;
                showPass.Text = "Show Password";
                SetImage("ms-appx:///Assets/show_pass.png");
             }

        }

        private void SetImage(string path)
        {

            showimg.Source = new BitmapImage(new Uri(path, UriKind.RelativeOrAbsolute));


        }
    }
}

enter image description here

Answer 1

点击图像应该用另一个图像替换图像，反之亦然。并且只有较低的线下部分应该在文本框中可见。

我更新了您的代码，现在可以满足您的要求。设置TextBox的BorderThickness="0,0,0,2"会将TextBox显示为下划线。要获取BitmapImage的AbsoluteUri属性，您可以判断当前显示的图像。这是更新的代码部分：

emailBox

的XAML代码

 <TextBox x:Name="emailBox"  BorderThickness="0,0,0,2" BorderBrush="Gray"  Background="White" HorizontalAlignment="Left" Height="45" Width="246"  Margin="55,90,0,0" TextWrapping="Wrap" VerticalAlignment="Center"  FontSize="25" FontFamily="Segoe UI Light" />

Image_Tapped

后面的代码

 private void Image_Tapped(object sender, TappedRoutedEventArgs e)
 {

     BitmapImage bitcurrentimage = showimg.Source as BitmapImage;
     //if (showimg.Source == new BitmapImage(new Uri("ms-appx:///Assets/show_pass.png", UriKind.RelativeOrAbsolute)))
     if (bitcurrentimage.UriSource.AbsoluteUri == "ms-appx:///Assets/show_pass.png")
     {
         passBox.PasswordRevealMode = PasswordRevealMode.Visible;
         showPass.Text = "Hide Password";
         SetImage("ms-appx:///Assets/hide_pass.png");
     }
     else
     {
         passBox.PasswordRevealMode = PasswordRevealMode.Hidden;
         showPass.Text = "Show Password";
         SetImage("ms-appx:///Assets/show_pass.png");
     }

 }

点击图像应该用另一个图像替换图像，反之亦然

1 个答案: