איך לייצר Watermark עבור TextBox ב-wpf
-
להלן רעיון קל ליישום בשביל Watermark עבור TextBox ב-WPF באמצעות XAML בלבד:
(זה לא שאין ספריות והרבה כתבות על זה אבל בסופו של דבר הכל לא עבד לי חלק חוץ מהרעיון שלפניכם יש בזה גם מעלה מבחינת כך שזה מבוסס xaml בלבד)
הסגנון מבוסס על שימוש בתכונת ToolTip של ה-TextBox לצורך הצגת ה-Watermark. כמובן שניתן להשתמש גם בתכונות אחרות (כגון Tag) – אני בחרתי ב-ToolTip, משום שכאשר מוצג Watermark, בדרך כלל אין צורך ממשי ב-Tooltip.
בסגנון יש שני טריגרים שמאפיינים התנהגות של הסתרת ה-Watermark כאשר תיבת הטקסט בפוקוס או כאשר איננה ריקה
<Style TargetType="TextBox" x:Key="WatermarkTextBox"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="TextBox"> <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"> <Grid> <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/> <TextBlock x:Name="PlaceholderHost" Text="{TemplateBinding ToolTip}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Margin="{TemplateBinding Margin}" Opacity="0.2" IsHitTestVisible="False" Visibility="Collapsed"/> </Grid> </Border> <ControlTemplate.Triggers> <DataTrigger Binding="{Binding Path=Text, RelativeSource={RelativeSource Self}}" Value=""> <Setter Property="Visibility" TargetName="PlaceholderHost" Value="Visible"/> </DataTrigger> <DataTrigger Binding="{Binding Path=IsKeyboardFocusWithin, RelativeSource={RelativeSource Self}}" Value="true"> <Setter Property="Visibility" TargetName="PlaceholderHost" Value="Collapsed"/> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
אפשר גם להסתיר את ה-tooltip כליל ולהשתמש רק ב-watermark במקום זאת על ידי הוספת הקוד דלהלן בתוך הסגנון.
<Style.Resources> <Style TargetType="ToolTip"> <Setter Property="Visibility" Value="Collapsed"/> </Style> </Style.Resources>