it-swarm.com.de

Wie kann ich dem WPF-Textfeld einen Hinweistext hinzufügen?

Beispielsweise hat Facebook im Textfeld "Suchen" einen Hinweistext "Suchen", wenn das Textfeld leer ist. 

Wie erreichen Sie dies mit WPF-Textfeldern?

Facebook's search textbox

88
Louis Rhys

Mit einer VisualBrush und einigen Auslösern in einer Style können Sie dies viel einfacher erreichen:

<TextBox>
    <TextBox.Style>
        <Style TargetType="TextBox" xmlns:sys="clr-namespace:System;Assembly=mscorlib">
            <Style.Resources>
                <VisualBrush x:Key="CueBannerBrush" AlignmentX="Left" AlignmentY="Center" Stretch="None">
                    <VisualBrush.Visual>
                        <Label Content="Search" Foreground="LightGray" />
                    </VisualBrush.Visual>
                </VisualBrush>
            </Style.Resources>
            <Style.Triggers>
                <Trigger Property="Text" Value="{x:Static sys:String.Empty}">
                    <Setter Property="Background" Value="{StaticResource CueBannerBrush}" />
                </Trigger>
                <Trigger Property="Text" Value="{x:Null}">
                    <Setter Property="Background" Value="{StaticResource CueBannerBrush}" />
                </Trigger>
                <Trigger Property="IsKeyboardFocused" Value="True">
                    <Setter Property="Background" Value="White" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </TextBox.Style>
</TextBox>

Um die Wiederverwendbarkeit dieser Style zu erhöhen, können Sie auch einen Satz angefügter Eigenschaften erstellen, um den Text, die Farbe, die Ausrichtung usw. des Cue-Banners zu steuern.

144
sellmeadog

Dies ist meine einfache, von Microsoft angepasste Lösung ( https://code.msdn.Microsoft.com/windowsapps/How-to-add-a-hint-text-to-ed66a3c6 )

    <Grid Background="White" HorizontalAlignment="Right" VerticalAlignment="Top"  >
        <!-- overlay with hint text -->
        <TextBlock Margin="5,2" MinWidth="50" Text="Suche..." 
                   Foreground="LightSteelBlue" Visibility="{Binding ElementName=txtSearchBox, Path=Text.IsEmpty, Converter={StaticResource MyBoolToVisibilityConverter}}" />
        <!-- enter term here -->
        <TextBox MinWidth="50" Name="txtSearchBox" Background="Transparent" />
    </Grid>
46
Martin Schmidt

Machen Sie es im Code-Behind, indem Sie die Textfarbe zunächst auf Grau setzen und Event-Handler hinzufügen, um den Tastaturfokus zu erhalten oder zu verlieren.

TextBox tb = new TextBox();
tb.Foreground = Brushes.Gray;
tb.Text = "Text";
tb.GotKeyboardFocus += new KeyboardFocusChangedEventHandler(tb_GotKeyboardFocus);
tb.LostKeyboardFocus += new KeyboardFocusChangedEventHandler(tb_LostKeyboardFocus);

Dann die Eventhandler:

private void tb_GotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
{
    if(sender is TextBox)
    {
        //If nothing has been entered yet.
        if(((TextBox)sender).Foreground == Brushes.Gray)
        {
            ((TextBox)sender).Text = "";
            ((TextBox)sender).Foreground = Brushes.Black;
        }
    }
}


private void tb_LostKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
{
    //Make sure sender is the correct Control.
    if(sender is TextBox)
    {
        //If nothing was entered, reset default text.
        if(((TextBox)sender).Text.Trim().Equals(""))
        {
            ((TextBox)sender).Foreground = Brushes.Gray;
            ((TextBox)sender).Text = "Text";
        }
    }
}
10
mxgg250

Sie müssen ein benutzerdefiniertes Steuerelement erstellen, indem Sie das Textfeld ... erben. Ein nachfolgender Link enthält ein hervorragendes Beispiel für das Beispiel für das Suchtextfeld . Bitte sehen Sie sich das an

http://davidowens.wordpress.com/2009/02/18/wpf-search-text-box/

5
Kishore Kumar

Sie können dies auf sehr einfache Weise tun. Die Idee ist, ein Label an derselben Stelle wie Ihr Textfeld zu platzieren. Ihr Label ist sichtbar, wenn das Textfeld keinen Text enthält und nicht den Fokus hat.

 <Label Name="PalceHolder"  HorizontalAlignment="Left" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Height="40" VerticalAlignment="Top" Width="239" FontStyle="Italic"  Foreground="BurlyWood">PlaceHolder Text Here
  <Label.Style>
    <Style TargetType="{x:Type Label}">
      <Setter Property="Visibility" Value="Hidden"/>
      <Style.Triggers>
        <MultiDataTrigger>
          <MultiDataTrigger.Conditions>
            <Condition Binding ="{Binding ElementName=PalceHolder, Path=Text.Length}" Value="0"/>
            <Condition Binding ="{Binding ElementName=PalceHolder, Path=IsFocused}" Value="False"/>
          </MultiDataTrigger.Conditions>
          <Setter Property="Visibility" Value="Visible"/>
        </MultiDataTrigger>
      </Style.Triggers>
    </Style>
  </Label.Style>
</Label>
<TextBox  Background="Transparent" Name="TextBox1" HorizontalAlignment="Left" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Height="40"TextWrapping="Wrap" Text="{Binding InputText,Mode=TwoWay}" VerticalAlignment="Top" Width="239" />

Bonus: Wenn Sie einen Standardwert für Ihre TextBox haben möchten, stellen Sie sicher, dass Sie ihn beim Senden der Daten festlegen (zum Beispiel: "InputText" = "PlaceHolder Text Here", falls leer).

1
makertoo

Ich bin einmal in die gleiche Situation geraten und habe es auf folgende Weise gelöst: Ich habe nur die Anforderungen eines Hinweisfelds erfüllt, Sie können es interaktiver gestalten, indem Sie Effekte und andere Dinge zu anderen Ereignissen hinzufügen, z. B. Fokus usw.

WPF CODE (Ich habe das Styling entfernt, um es lesbar zu machen)

<Grid Margin="0,0,0,0"  Background="White">
    <Label Name="adminEmailHint" Foreground="LightGray" Padding="6"  FontSize="14">Admin Email</Label>
    <TextBox Padding="4,7,4,8" Background="Transparent" TextChanged="adminEmail_TextChanged" Height="31" x:Name="adminEmail" Width="180" />
</Grid>
<Grid Margin="10,0,10,0" Background="White" >
    <Label Name="adminPasswordHint" Foreground="LightGray" Padding="6"  FontSize="14">Admin Password</Label>
    <PasswordBox Padding="4,6,4,8" Background="Transparent" PasswordChanged="adminPassword_PasswordChanged" Height="31" x:Name="adminPassword" VerticalContentAlignment="Center" VerticalAlignment="Center" Width="180" FontFamily="Helvetica" FontWeight="Light" FontSize="14" Controls:TextBoxHelper.Watermark="Admin Password"  FontStyle="Normal" />
</Grid>

C # -Code

private void adminEmail_TextChanged(object sender, TextChangedEventArgs e)
    {
        if(adminEmail.Text.Length == 0)
        {
            adminEmailHint.Visibility = Visibility.Visible;
        }
        else
        {
            adminEmailHint.Visibility = Visibility.Hidden;
        }
    }

private void adminPassword_PasswordChanged(object sender, RoutedEventArgs e)
    {
        if (adminPassword.Password.Length == 0)
        {
            adminPasswordHint.Visibility = Visibility.Visible;
        }
        else
        {
            adminPasswordHint.Visibility = Visibility.Hidden;
        }
    }
1
Mohammad Mahroz

Eine andere Lösung ist die Verwendung eines WPF-Toolkits wie MahApps.Metro. Es hat viele Nice-Funktionen, wie ein Textfeld-Wasserzeichen:

Controls:TextBoxHelper.Watermark="Search..."

Siehe http://mahapps.com/controls/textbox.html

0
StefanG
  <Grid>
    <TextBox Name="myTextBox"/>
    <TextBlock>
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=myTextBox, Path=Text.IsEmpty}" Value="True">
                        <Setter Property="Text" Value="Prompt..."/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
</Grid>
0
DerBesondereEin

was ist mit der Verwendung von materialDesign HintAssist? Ich benutze das, was Sie auch schwimmenden Hinweis hinzufügen können:

<TextBox Width="150" Height="40" Text="hello" materialDesign:HintAssist.Hint="address"  materialDesign:HintAssist.IsFloating="True"></TextBox>

ich habe Material Design with Nuget Package installiert. Die Installationsanleitung befindet sich in documentation link

0
Mahdi Khalili

Ein anderer Ansatz ;-) 

das funktioniert auch mit PasswordBox. Wenn Sie es mit TextBox verwenden möchten, tauschen Sie einfach PasswordChangedmit TextChanged aus.

XAML:

<Grid>
    <!-- overlay with hint text -->
    <TextBlock Margin="5,2"
                Text="Password"
                Foreground="Gray"
                Name="txtHintPassword"/>
    <!-- enter user here -->
    <PasswordBox Name="txtPassword"
                Background="Transparent"
                PasswordChanged="txtPassword_PasswordChanged"/>
</Grid>

CodeBehind:

private void txtPassword_PasswordChanged(object sender, RoutedEventArgs e)
{
    txtHintPassword.Visibility = Visibility.Visible;
    if (txtPassword.Password.Length > 0)
    {
        txtHintPassword.Visibility = Visibility.Hidden;
    }
}
0
Mat

Ich habe die Events mit und ohne Fokus benutzt:

Private Sub txtSearchBox_GotFocus(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles txtSearchBox.GotFocus
    If txtSearchBox.Text = "Search" Then
        txtSearchBox.Text = ""
    Else

    End If

End Sub

Private Sub txtSearchBox_LostFocus(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles txtSearchBox.LostFocus
    If txtSearchBox.Text = "" Then
        txtSearchBox.Text = "Search"
    Else

    End If
End Sub

Es funktioniert gut, aber der Text ist immer noch grau. Muss aufräumen. Ich habe VB.NET verwendet

0
StarLordBlair