This is for a TextBox control on a login screen, where the TextBox contains the username. I want the TextBox to perform in the following way:
When the content is empty the content should be set to "Username".
When the TextBox is clicked I want the content to be set to
"" i.e; nothing (unless the content has already been edited by the user).
This is a pretty standard feature nowadays, something like this wordpress login (at the top of page). coudn't think of a better example than this I'm afraid :)
So, anyway, I've already done this using a ViewModel and it works well, but I'd like to know if this can be done purely from the XAML end. No business logic is concerned so I think it would be better to do it without the VM.
Find the below samples help you to find your way.
http://bendewey.wordpress.com/2008/09/27/wpf-shadowed-textbox-watermark/
http://www.c-sharpcorner.com/uploadfile/rahul4_saxena/watermark-textbox-in-wpf/
http://www.codeproject.com/Articles/26977/A-WatermarkTextBox-in-3-lines-of-XAML
Pure XAML:
<Grid>
<TextBox Width="250" VerticalAlignment="Center" HorizontalAlignment="Left" x:Name="SearchTermTextBox" Margin="5"/>
<TextBlock IsHitTestVisible="False" Text="Enter Search Term Here" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" Foreground="DarkGray">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=SearchTermTextBox}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
Taken from: https://stackoverflow.com/a/21672408/4423545
The Extended WPF Toolkit has a Watermark Textbox that will do just what you're asking in pure XAML. There are other libraries out there as well.
The good thing about using the Extended WPF Toolkit is you can pick it up on Nuget and install and install updates directly through Visual Studio.
Related
The most common approach to hide a WPF control is setting Visibility attribute to Hidden or Collapsed. When I did this for sample application, and I was trying to find these elements by the automation framework, I got the items with IsOffscreen flag set to true.
For instance:
<Label Content="Hidden label" Visibility="Hidden"/>
<Label Content="Collapsed label" Visibility="Collapsed"/>
From my perspective, it looks reasonable but automation framework documentation:
https://learn.microsoft.com/en-us/windows/desktop/winauto/uiauto-automation-element-propids
says:
Objects that the end-user does not perceive at all, or that are
"programmatically hidden" (for example, a dialogue box that has been
dismissed, but the underlying object is still cached by the
application) should not be in the automation element tree in the first
place (instead of setting the state of IsOffscreen to TRUE).
How can I achieve the result which is pointed out in the documentation?
Faced similar issue, Setting Visibilty to hidden/Collapsed does not remove the element from the visual tree, even though the control is not visible visually. And currently as per my knowledge there is no other property that can remove the element from the visual tree.
As a workaround, you can make use of ContentPresenter with triggers to include or exclude controls at runtime.
For example, in the below snippet I am deciding which label to include based on a condition. it is decided at runtime and only one is included in the visual tree.
<ContentPresenter Content="{Binding}">
<ContentPresenter.Resources>
<DataTemplate x:Key="LabelContent1">
<Label Content="Dummy" />
</DataTemplate>
<DataTemplate x:Key="LabelContent2">
<Label Content="Dummy" />
</DataTemplate>
</ContentPresenter.Resources>
<ContentPresenter.Style>
<Style TargetType="{x:Type ContentPresenter}">
<Setter Property="ContentTemplate" Value="{StaticResource LabelContent1}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Converter={Binding Path=LabelText}}" Value="{x:Null}">
<Setter Property="ContentTemplate" Value="{StaticResource LabelContent2}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentPresenter.Style>
Reference:
https://tyrrrz.me/blog/conditional-content-presenting-via-wpf-contentpresenter
I wrote a sample to see if binding could be used within a Style in a blank Windows Store app - it compiled but did not work exactly as I'd hoped. I'm relatively new to XAML and binding so may have missed something.
In the sample below there are two rectangles, both bound to the slider control and both should change at the same time as the slider is moved, but it seems that only the first one changes; the first one is bound directly, the second is bound via a style.
Is binding in a Style supposed to be possible in a Win Store app?
(My aim is to have a slider that changes the settings on a large number of elements at once, it seemed like this would be a better approach than copy/pasting bindings to all of them)
<Grid Background="#FF87873D">
<StackPanel>
<StackPanel.Resources>
<Style x:Key="myTestRectangleStyle" TargetType="Rectangle">
<Setter Property="Fill" Value="DarkBlue" />
<Setter Property="Margin" Value="10,10" />
<Setter Property="Height" Value="30" />
<Setter Property="Width" Value="{Binding ElementName=slider1, Path=Value}" />
</Style>
</StackPanel.Resources>
<Rectangle Width="{Binding ElementName=slider1, Path=Value}" Fill="Black" Margin="10,10" Height="30"/>
<Rectangle Style="{StaticResource myTestRectangleStyle}"/>
<Slider Name="slider1" Minimum="20" Maximum="200" Margin="20,0"/>
</StackPanel>
</Grid>
Answering my own question...it seems this isn't possible on a Windows Store App.
I had a clarification from a user on a MSDN forum that
[Bindings] are not supported on Style setters in Windows Store Apps like
they are in WPF, i.e. you cannot bind to the Value property of the
Slider in the Style
So the workaround is just to set the binding directly outside of the Style (a long winded option if you have a lot of elements to bind unfortunately)
So, I'm building an order tracking app with different user accounts, some of whom have less need-to-know than others. This means that certain controls are displayed for some accounts, and hidden for others.
The datacontext for the Window is set to my Order class, and the data binding within the text fields works perfectly in regards to displaying properties from the specific Order. However, the DataTemplates and Triggers I've made don't seem to be doing anything at all, and I'm not entirely sure why. I've looked all over the web and I can't seem to find why it's not working. Here's the XAML:
<Label Name="StatusLabelText" Content="Status:" FontSize="15" DockPanel.Dock="Top">
<Label.Resources>
<DataTemplate DataType="x:Type local:Order">
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=selectedAccount}" Value="Color Correct">
<Setter Property="Visibility" Value="Hidden"></Setter>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Label.Resources>
</Label>
I suspect you want to hide label in case selectedAccount value is Color Correct.
You need Style to do that and not a template if my assumption is correct which can be done like this:
<Label Name="StatusLabelText" Content="Status:" FontSize="15"
DockPanel.Dock="Top">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=selectedAccount}"
Value="Color Correct">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
On a side note, you should use Collapsed instead of Hidden to set visibility of control in case you don't want the label to take the size even when it's not visible on GUI. Read more about it here.
i dont know how to make my textbox from string to currency. I already do search on STO, google. but don't understand how to use it.
let's say i have one textbox.
whenever it run the program, i key in inside the textbox.
if i key in 1000, i want my textbox automatically change to 1,000.
if i key in 10000, my textbox will looks like 10,000.
but whenever i key in 100, my textbox will still 100.
here is my textbox xaml.
<TextBox Height="25" HorizontalAlignment="Left" Margin="126,223,0,0" Name="txtPrice"
VerticalAlignment="Top" Width="140" PreviewTextInput="txtPrice_PreviewTextInput" />
I ever done this before using vb.net, but now i'm using wpf. still new to wpf.
any idea how to that? thanks.
Try this:-
<Style TargetType="{x:Type TextBox}">
<Setter Property="Text" Value="{SomeValue, StringFormat=C}" />
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="Text" Value="{SomeValue, UpdateSourceTrigger=PropertyChanged}" />
</Trigger>
</Style.Triggers>
</Style>
Use the StringFormat dependency property to format the way you want the string to be shown on UI. Try this -
<TextBox Text="{Binding YourBinding, StringFormat='##,#',
UpdateSourceTrigger=PropertyChanged}"/>
For more formats refer to this link from msdn - Custom Numeric Format
I'm trying to label text boxes with the name of the field which is to be put into them, and currently I have everything working in a static manner (I have to copy and paste the style into each new textbox and change the text to the appropriate field name). Is there a way to do this dynamically, so that I write a style that accesses the TextBox's name, replaces the "_"s with " "s and then puts that in my visualbrush's textblock? I'd appreciate research links or the names of relevant topics, I'm just not sure what to be looking for.
Here is my style:
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Text" Value="">
<Setter Property="Background">
<Setter.Value>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<TextBlock FontSize="32" Foreground="Gray" >First Name</TextBlock>
</VisualBrush.Visual>
</VisualBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
If you find yourself copying and pasting lots of the same code, then you probably want to create a Custom Control. That would probably be the simplest solution (and, generally speaking, the simplest solution is the best solution).
Here is one of many tutorials I found by Googling WPF Custom Control.
Another possibility (which could be used in conjunction with or instead of the custom control) is the use of Attached Properties.