Na przykład Facebook ma tekst wskazówki „Szukaj” w polu tekstowym Szukaj, gdy pole tekstowe jest puste.
Jak to osiągnąć dzięki polom tekstowym WPF?
Na przykład Facebook ma tekst wskazówki „Szukaj” w polu tekstowym Szukaj, gdy pole tekstowe jest puste.
Jak to osiągnąć dzięki polom tekstowym WPF?
Odpowiedzi:
Możesz to osiągnąć znacznie łatwiej za pomocą a VisualBrush
i niektórych wyzwalaczy w Style
:
<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>
Aby zwiększyć możliwość ponownego Style
użycia, możesz również utworzyć zestaw dołączonych właściwości, aby kontrolować rzeczywisty tekst, kolor, orientację itp.
To jest moje proste rozwiązanie, zaadaptowane od firmy Microsoft ( 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>
IsHitTestVisible="False"
co z korzystaniem z materialDesign HintAssist? Używam tego, który również możesz dodać pływającą wskazówkę:
<TextBox Width="150" Height="40" Text="hello" materialDesign:HintAssist.Hint="address" materialDesign:HintAssist.IsFloating="True"></TextBox>
Zainstalowałem Material Design z pakietem Nuget. W linku do dokumentacji znajduje się instrukcja instalacji
Zrób to w kodzie, ustawiając początkowo kolor tekstu na szary i dodając programy obsługi zdarzeń w celu uzyskania i utraty fokusu klawiatury.
TextBox tb = new TextBox();
tb.Foreground = Brushes.Gray;
tb.Text = "Text";
tb.GotKeyboardFocus += new KeyboardFocusChangedEventHandler(tb_GotKeyboardFocus);
tb.LostKeyboardFocus += new KeyboardFocusChangedEventHandler(tb_LostKeyboardFocus);
Następnie programy obsługi zdarzeń:
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";
}
}
}
Musisz utworzyć niestandardową kontrolkę, dziedzicząc pole tekstowe. Poniższy link zawiera doskonały przykład dotyczący próbki pola tekstowego wyszukiwania. Proszę spojrzeć na to
http://davidowens.wordpress.com/2009/02/18/wpf-search-text-box/
Możesz to zrobić w bardzo prosty sposób. Pomysł polega na umieszczeniu etykiety w tym samym miejscu, w którym znajduje się pole tekstowe. Twoja etykieta będzie widoczna, jeśli pole tekstowe nie zawiera tekstu i nie jest fokusem.
<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: jeśli chcesz mieć domyślną wartość dla swojego textBox, pamiętaj, aby ustawić ją później podczas przesyłania danych (na przykład: „InputText” = „PlaceHolder Text Here”, jeśli jest puste).
Inne podejście ;-)
działa to również z PasswordBox
. Jeśli chcesz go używać TextBox
, po prostu zamień go PasswordChanged
z TextChanged
.
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;
}
}
Kiedyś znalazłem się w tej samej sytuacji, rozwiązałem to w następujący sposób. Spełniłem tylko wymagania pola podpowiedzi, możesz uczynić go bardziej interaktywnym, dodając efekty i inne rzeczy do innych wydarzeń, takich jak skupienie itp.
KOD WPF (usunąłem style, aby były czytelne)
<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>
Kod C #
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;
}
}
Innym rozwiązaniem jest użycie zestawu narzędzi WPF, takiego jak MahApps.Metro. Ma wiele fajnych funkcji, takich jak znak wodny w polu tekstowym:
Controls:TextBoxHelper.Watermark="Search..."
Wykorzystałem zdarzenia „get and lost focus”:
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
Działa dobrze, ale tekst jest nadal szary. Potrzebuje posprzątania. Używałem VB.NET
<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>
To moja opinia:
<ControlTemplate>
<Grid>
<Grid.Resources>
<!--Define look / layout for both TextBoxes here. I applied custom Padding and BorderThickness for my application-->
<Style TargetType="TextBox">
<Setter Property="Padding" Value="4"/>
<Setter Property="BorderThickness" Value="2"/>
</Style>
</Grid.Resources>
<TextBox x:Name="TbSearch"/>
<TextBox x:Name="TbHint" Text="Suche" Foreground="LightGray"
Visibility="Hidden" IsHitTestVisible="False" Focusable="False"/>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition SourceName="TbSearch" Property="Text" Value="{x:Static sys:String.Empty}"/>
<Condition SourceName="TbSearch" Property="IsKeyboardFocused" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="TbHint" Property="Visibility" Value="Visible"/>
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition SourceName="TbSearch" Property="Text" Value="{x:Null}"/>
<Condition SourceName="TbSearch" Property="IsKeyboardFocused" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="TbHint" Property="Visibility" Value="Visible"/>
</MultiTrigger.Setters>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Moim zdaniem większość innych odpowiedzi, w tym pierwsza, ma wady.
To rozwiązanie działa w każdych okolicznościach. Czysty XAML, łatwy do ponownego użycia.
I to osiągnąć z VisualBrush
a niektóre wyzwalacze w A Style
sugerowane przez: sellmeadog
.
<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>
@sellmeadog: aplikacja działa, projekt bt nie ładuje się ... pojawia się następujący błąd: Niejednoznaczne odwołanie do typu. Typ o nazwie „StaticExtension” występuje w co najmniej dwóch przestrzeniach nazw: „MS.Internal.Metadata.ExposedTypes.Xaml” i „System.Windows.Markup”. Rozważ dostosowanie atrybutów XmlnsDefinition zestawu. Używam .net 3.5
<Trigger Property="Text" Value="{x:Static sys:String.Empty}">
na<Trigger Property="Text" Value="">
W przypadku WPF nie ma sposobu. Musisz to naśladować. Zobacz ten przykład . Pomocniczym (niestabilnym rozwiązaniem) jest hostowanie kontrolki użytkownika WinForms, która dziedziczy z TextBox i wysyłanie komunikatu EM_SETCUEBANNER do kontrolki edycji. to znaczy.
[DllImport("user32.dll", CharSet = CharSet.Auto)]
private static extern IntPtr SendMessage(IntPtr hWnd, Int32 msg, IntPtr wParam, IntPtr lParam);
private const Int32 ECM_FIRST = 0x1500;
private const Int32 EM_SETCUEBANNER = ECM_FIRST + 1;
private void SetCueText(IntPtr handle, string cueText) {
SendMessage(handle, EM_SETCUEBANNER, IntPtr.Zero, Marshal.StringToBSTR(cueText));
}
public string CueText {
get {
return m_CueText;
}
set {
m_CueText = value;
SetCueText(this.Handle, m_CueText);
}
Ponadto, jeśli chcesz hostować podejście kontrolne WinForm, mam strukturę, która już zawiera tę implementację o nazwie BitFlex Framework, którą możesz pobrać bezpłatnie tutaj .
Tutaj jest artykuł o BitFlex, jeśli chcesz uzyskać więcej informacji. Zaczniesz odkrywać, że jeśli chcesz mieć elementy sterujące w stylu Eksploratora Windows, które zwykle nigdy nie wychodzą z pudełka, a ponieważ WPF nie działa z uchwytami, generalnie nie możesz napisać łatwego otoki wokół Win32 lub istniejącej kontrolki, tak jak możesz z WinForms.
Zrzut ekranu: