मैं WPF टेक्स्टबॉक्स में एक संकेत पाठ कैसे जोड़ सकता हूं?

Question

उदाहरण के लिए, फेसबुक में टेक्स्ट बॉक्स के खाली होने पर सर्च टेक्स्ट बॉक्स में "सर्च" हिंट टेक्स्ट होता है।

WPF टेक्स्ट बॉक्स के साथ इसे कैसे प्राप्त करें ??

Comments

"क्यू बैनर" के लिए खोज करने का प्रयास करें।

— डिफ़ॉल्ट लोकल

@MAKKAM इस MSDN लेख पर चर्चा करता है, लेकिन यह नहीं दिखाता है कि यह कैसे किया जाता है

— लुईस

यह भी देखना stackoverflow.com/questions/833943/watermark-textbox-in-wpf

— वनवर्ल्ड

मैं यह नहीं कहूंगा कि आप 'संकेत पाठ' के लिए क्या पूछ रहे हैं। मुझे संकेत पाठ एक पॉपअप विंडो है। जब भी मुझे प्लेसहोल्डर टेक्स्ट सेटअप करना होता है, तो कोई भी कम नहीं पाया जाता है। और नीचे दिए गए जवाबों ने मेरी मदद की।

— स्टीव

उस तरह से वॉटरमार्क कहा जाता है

— ब्लेकडोज़

Answer 1

आप इसे बहुत आसानी से पूरा कर सकते हैं VisualBrushऔर एक में कुछ ट्रिगर के साथ 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>

इसकी पुन: प्रयोज्य को बढ़ाने के लिए Style, आप वास्तविक क्यू बैनर पाठ, रंग, अभिविन्यास आदि को नियंत्रित करने के लिए संलग्न गुणों का एक सेट भी बना सकते हैं।

Comments

IsKeyboardFocused के बजाय IsMouseCaptured का उपयोग करें। यह एक वास्तविक क्यू बैनर कैसे प्रतिक्रिया करता है।

— मॉन्स्टिएर

अगर किसी को आश्चर्य हो कि स्टाइल पुन: प्रयोज्य को बढ़ाने के लिए संलग्न गुणों का उपयोग कैसे करें, देखें: stackoverflow.com/a/650620/724944

— सर्फ

@Kुरियन IsMouseCaptured क्यू को केवल तभी गायब कर देगा जब आप इसे माउस से क्लिक करेंगे, लेकिन माउस बटन को छोड़ते समय फिर से दिखाई देगा। यह अच्छा नहीं लगता है। IsMouseOver या तो अच्छा नहीं होगा (कीबोर्ड में फ़ोकस है लेकिन माउस पॉइंटर कहीं और है => क्यू प्रदर्शित)। अधिकांश क्यू बैनर IsKeyboardFocused (उदाहरण के लिए फेसबुक) का उपयोग करते हैं और मुझे लगता है कि यह ठीक है। वैकल्पिक समाधान दोनों ट्रिगर का उपयोग करना होगा: (IsMouseOver या IsKeyboardFocused)

— 12 सर्फ करें

समाधान संकेत होना चाहिए "" कृपया अपना पाठ दर्ज करें "20 तत्व नहीं ... काश, यह पाठ बॉक्स में बनाए गए पौराणिक कथाओं द्वारा समर्थित नहीं है ...

— Mzn

हालांकि यह दृष्टिकोण डिफ़ॉल्ट स्थितियों के लिए ठीक हो सकता है, यह तब काम नहीं करता है जब आपके टेक्स्टबॉक्स में पहले से ही एक पृष्ठभूमि ब्रश होता है या प्रपत्र पृष्ठभूमि पाठ बॉक्स की तरह ही रंग की नहीं होती है।

— LWChris

Answer 2

यह मेरा सरल समाधान है, जिसे 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>

Comments

दिलचस्प दृष्टिकोण मैं तुरंत खुद के बारे में नहीं सोचा होगा।

— इसका जुम

अच्छा और सरल :)

— shmulik.r

यह समाधान विशेष रूप से अच्छी तरह से काम करता है यदि आप TextBlockIsHitTestVisible="False"

— Mage Xy

@MageXy पहले TextBlock (एक संकेत) का जिक्र कर रहा है।

— फेलिक्स

यदि आप संकेत पाठ को किसी गुण से बाँधना चाहते हैं तो यह समाधान बहुत अच्छा काम करता है।

— पीटर बी

Answer 3

क्या सामग्री का उपयोग करने के बारे में HintAssist? मैं इस का उपयोग कर रहा हूँ जो आप अस्थायी संकेत भी जोड़ सकते हैं:

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

मैंने Nuget पैकेज के साथ मटेरियल डिज़ाइन स्थापित किया है जो डॉक्यूमेंटेशन लिंक में इंस्टॉलेशन गाइड है

Comments

बहुत उपयोगी पुस्तकालय

— एलेक्सएफ 11

Answer 4

शुरू में ग्रे और ध्यान केंद्रित करने और खोने के लिए इवेंट हैंडलर को जोड़ने के लिए पाठ का रंग सेट करके कोड-बैक में करें।

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

तब घटना संचालकों:

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";
        }
    }
}

Comments

-1 के पीछे कोड में करने के लिए: नियंत्रण को बंद कर देता है, और एक उच्च संभावना है कि यह अन्य नियंत्रण तर्क के साथ हस्तक्षेप करेगा, यदि भविष्य में नहीं तो।

— 3

Answer 5

आपको टेक्स्टबॉक्स को इनहेरिट करके एक कस्टम कंट्रोल बनाना होगा। नीचे दिए गए लिंक में खोज टेक्स्टबॉक्स नमूने के बारे में एक उत्कृष्ट उदाहरण है। कृपया इस पर एक नज़र डालें

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

Comments

लिंक-केवल उत्तर हतोत्साहित कर रहे हैं

— जोश नं

Answer 6

आप बहुत ही सरल तरीके से कर सकते हैं। विचार यह है कि लेबल को उसी स्थान पर रखें जहां आपका टेक्स्टबॉक्स है। यदि टेक्स्टबॉक्स में कोई टेक्स्ट नहीं है और फोकस नहीं है तो आपका लेबल दिखाई देगा।

 <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" />

बोनस: यदि आप अपने टेक्स्टबॉक्स के लिए डिफ़ॉल्ट मान चाहते हैं, तो डेटा सबमिट करते समय इसे सेट करने के बाद सुनिश्चित करें (उदाहरण के लिए: "InputText" = "प्लेसहोल्डर टेक्स्ट यहां" यदि खाली है)।

Answer 7

एक और दृष्टिकोण ;-)

यह भी साथ काम करता है PasswordBox। यदि आप इसके साथ उपयोग करना चाहते हैं TextBox, तो बस के PasswordChangedसाथ विनिमय करें 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>

कोड के पीछे:

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

Comments

सबसे अच्छा और सरल समाधान मैंने पाया है !! धन्यवाद!!

— स्टीव

Answer 8

मैं एक बार उसी स्थिति में आ गया, मैंने इसे निम्नलिखित तरीके से हल किया। मैंने केवल एक हिंट बॉक्स की आवश्यकताओं को पूरा किया है, आप इसे अन्य घटनाओं जैसे कि फोकस आदि पर प्रभाव और अन्य चीजों को जोड़कर अधिक इंटरैक्टिव बना सकते हैं।

WPF कोड (मैंने इसे पठनीय बनाने के लिए स्टाइल हटा दिया है)

<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 # कोड

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;
        }
    }

Answer 9

एक अन्य उपाय MahApps.Metro जैसे WPF टूलकिट का उपयोग करना है। इसमें कई अच्छी विशेषताएं हैं, जैसे टेक्स्ट बॉक्स वॉटरमार्क:

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

Http://mahapps.com/controls/textbox.html देखें

Answer 10

मैंने फ़ोकस इवेंट्स को प्राप्त और खो दिया:

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

यह अच्छी तरह से काम करता है, लेकिन पाठ अभी भी ग्रे में है। सफाई की जरूरत है। मैं VB.NET का उपयोग कर रहा था

Answer 11

  <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>

Answer 12

यही मेरा लेना है:

<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>

शीर्ष सहित अधिकांश अन्य जवाबों में मेरी राय में खामियां हैं।

यह समाधान सभी परिस्थितियों में काम करता है। शुद्ध XAML, आसानी से पुन: प्रयोज्य।

Answer 13

मैं इसे VisualBrushएक Styleसुझाव के साथ और कुछ ट्रिगर के साथ पूरा करता हूं 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: एप्लिकेशन रनिंग, bt डिज़ाइन लोड नहीं हो रहा है ... निम्न त्रुटि आती है: अस्पष्ट प्रकार का संदर्भ। 'StaticExtension' नाम का एक प्रकार कम से कम दो नामस्थानों में होता है, 'MS.Internal.Metadata.ExposedTypes.Xaml' और 'System.Windows.Markup'। असेंबली XmlnsDefinition विशेषताएँ समायोजित करने पर विचार करें। .net का उपयोग करते हुए। 3.5

Comments

<Trigger Property="Text" Value="{x:Static sys:String.Empty}"><Trigger Property="Text" Value="">

— SUHAIL AG

यह किसी अन्य पोस्ट की प्रतिक्रिया प्रतीत होती है। कृपया उत्तर के रूप में केवल प्रश्न का पूरा समाधान पोस्ट करें।

— ड्रू ग्नोर

यदि आपको लगता है कि @ sellmeadog का उत्तर लगभग सही है, तो लगभग कोई अंतर नहीं के साथ एक नया उत्तर पोस्ट करने के बजाय, इसे ठीक करने पर विचार करें।

— 0xBADF00D

Answer 14

WPF के लिए, कोई रास्ता नहीं है। आपको इसकी नकल करनी होगी। इस उदाहरण को देखें । एक माध्यमिक (परतदार समाधान) एक WinForms उपयोगकर्ता नियंत्रण को होस्ट करने के लिए है जो TextBox से विरासत में मिला है और EM_SETCUEBANNER संदेश को संपादन नियंत्रण में भेज रहा है। अर्थात।

[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);
}

इसके अलावा, यदि आप एक WinForm नियंत्रण दृष्टिकोण की मेजबानी करना चाहते हैं, तो मेरे पास एक ढांचा है जिसमें पहले से ही BitFlex फ्रेमवर्क नामक यह कार्यान्वयन शामिल है, जिसे आप यहां मुफ्त में डाउनलोड कर सकते हैं ।

यदि आप अधिक जानकारी चाहते हैं तो यहाँ BitFlex के बारे में एक लेख है । आपको लगता है कि अगर आप विंडोज एक्सप्लोरर शैली नियंत्रण देख रहे हैं कि यह आम तौर पर बॉक्स से बाहर कभी नहीं आता है, और क्योंकि WPF हैंडल के साथ काम नहीं करता है आम तौर पर आप Win32 या आप की तरह एक मौजूदा नियंत्रण के आसपास एक आसान आवरण नहीं लिख सकते हैं WinForms के साथ।

स्क्रीनशॉट:

Comments

वाह, जो थोड़ा हैकिश लगता है .. एक्सएएमएल के साथ उपयोगकर्ता नियंत्रण बनाते समय मैं यह कैसे कर सकता हूं?

— लुई राइस

तुम नहीं। ऐसा ही किया जाता है। यदि आप इसे एनकैप्सुलेट करना चाहते हैं, तो एक उपयोगकर्ता नियंत्रण और एक क्यूटेक्स्ट प्रॉपर्टी बनाएं, और सेट्टर में सेट करेंटैक्सट को कॉल करें।

— डेविड एंडरसन

मुझे लगता है, ओपी को इस दृष्टिकोण का उपयोग करने के लिए विनफॉर्म कंट्रोल को होस्ट करना चाहिए। या टेक्स्टबॉक्स हैंडल करने का कोई तरीका है?

— डिफ़ॉल्ट लोकल

ऐसा कुछ ऐसा लगता है जो WPF के साथ घोषणात्मक रूप से किया जा सकता है, इस बात के खिलाफ बाध्य होकर कि क्या टेक्स्ट बॉक्स में फ़ोकस है या नहीं, आदि - उपरोक्त उदाहरण एक WinForms दृष्टिकोण का अधिक है - यह WPF में काम करेगा, लेकिन यह अधिकार नहीं है मार्ग।

— BrainSlugs83

क्षमा करें, लेकिन यह उत्तर गलत है। इसके अलावा सभी लिंक टूट गए हैं।

— वन कुनेके