I'm trying to make a watermark appear inside a TexBox, I have done this with the Canvas tag:
<Canvas Height="60" Width="500" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,5">
<TextBox Width="500" Height="30" Canvas.Left="0" Canvas.Top="0" FontSize="18"></TextBox>
<TextBlock x:Name="whereAreyouWatermark" Canvas.Left="15" Canvas.Top="7" Height="30" FontSize="16"
Foreground="#777777" Width="500">
<Run x:Uid="text2"></Run> <Italic FontSize="13"><Run x:Uid="text3"></Run></Italic>
</TextBlock>
</Canvas>
However, now when the cursor goes over the textblock it's not the "I" icon, just a normal pointer. In CSS, I would change the cursor like this "pointer: text".
How can I do this in XAML?
Also, when pressed I want focus to go to the background textbox, I take it the best way is to just intercept the gotfocus event of the textblock and pass focus in-code to the textbox. I think in iOS you can use a layer which simply passes through events.
thanks very much
Much obliged to ya, as we say all the time in London ;-)
I recommend having a look at the WinRT XAML Toolkit's WatermarkTextBox.
Set the default text to something and once it got focus event, clear the text with whatever the user types. And when it's LostFocus place the watermark again. Your IBeam cursor will not be a problem with this solution.
Simpler solution would be to set some default text (which will serve as a watermark) to the TextBox. On GotFocus event, clear the text from code behind. On LostFocus event, check whether if the user has entered some text or the TextBox is empty. If it has some user text, let it be. If it is empty, place back the watermark text!
Related
I am creating a UWP application and I want a simple check box, no text, for each entry in my ListView. If I add a checkbox control to my template for the listview, I get a big gap after the checkbox for the Content - event when the content is empty.
If I turn on multiselect in the listview so I get a nice checkbox for each row, I can't seem to figure out how to databind the check box for each row in the listview to the Selected property of my ViewModel.
Below is a picture of what I want the area of the check box to look like. This was generated using the SelectionMode="Multiple" on the listview. Remember - the problem with this approach is I can't seem to find a way to bind the check box to the Selected property of my ViewModel class.
Below is what it looks like if I remove the SeletionMode property and add a check box to my ItemTemplate. As you can see there is a huge gap between the check box and the area where the image will be due to the Checkbox control's minimum width of 120.
Any suggestions would be greatly appreciated.
You could just set the MinWidth on the Checkbox itself
eg
<StackPanel Orientation="Horizontal">
<CheckBox x:Name="MyCheck" IsChecked="True" MinWidth="30"/>
<Rectangle Fill="Red" Width="100" Height="50"/>
</StackPanel>
The alternative is creating a copy of the Checkbox Styles and Template but that seems like overkill here.
is it possible to get ellipsis inside button when content length increase the width of button.
I tried editing template but did get much success?
You should have some options. If it's just at the instance, you can just plop your content in as TextBlock so something like;
<Button>
<Button.Content>
<TextBlock Text="Blah Blah Blah" TextTrimming="WordEllipsis"/>
</Button.Content>
</Button>
Or if you make a custom style template for Button you could replace the ContentPresenter in it with a TextBlock with it's content bound to the template like Text="{TemplateBinding Content}" and apply your TextTrimming directly to it. Except remember TextTrimming needs a boundary to invoke it, so your Button's may require like a set MaxWidth/Width or its parent panel will have to restrict its size to invoke the trimming.
Hope this helps, Cheers.
PS - This same concept can be used in WP, WPF, Silverlight, whatever really.
I have created my first Expression Blend page. It looks flat and dull. WIthout going overboard, how do I add a touch of depth to this page.
http://i67.photobucket.com/albums/h292/Athono/looks%20like%20poo_zps3wt7phoj.png
I have changed it so that the LayoutRoot has a grey background and I have changed the textboxes like so:
<Border BorderBrush="#FF121111" BorderThickness="2" Grid.Row="0" Margin="90,194,192,0" Height="45" VerticalAlignment="Top" Background="White">
<TextBlock Height="33" Margin="6,6,6,0" VerticalAlignment="Top" TextWrapping="Wrap" Foreground="Black" d:LayoutOverrides="HorizontalAlignment"/>
</Border>
But the textboxes still do not have the 3d depth that typical areas that ask for user input have. For example, if you click to open a file in most programs, the area to add a file name looks as if it is more depressed (pushed down) so that the top of the box is defined and has a thicker line than the bottom of the text box.
I have a nother, simpler question that is related to this. How do I do a test run of the page in Expression Blend to see how it performs and looks when I do a mouse over and mouse click on the controls?
Currently when I populate the TextBlock with too much text, specifically Connecting to Site 26 has a name too long, it appears like this:
This is the definition of the UserControl:
<StackPanel VerticalAlignment="Center">
<ProgressBar IsIndeterminate="True" />
<TextBlock Name="txtOverlayText" FontSize="25" Foreground="White" HorizontalAlignment="Center" />
</StackPanel>
The text is supposed to be centred and if it's too long it should not fall off the left side of the screen, rather it should be be visible on the left side and anything that can't fit on the right side should be replaced with dots, e.g.
Connecting to Site 26 has a name t...
Is there a way to do this?
Right, so luckily for some time now in most of the xaml based stuff we've had the super handy dandy TextTrimming ability where you can just slap TextTrimming="WordEllipsis" on something and get those friendly dots on the end.
Though just a tip, sometimes a TextBlock's parent panel wont invoke the boundary to make it happen, so you have to slap a Width value on something, or swap the parent panel, like occasionally depending on the layout things like a StackPanel have to be substituted with a Grid to invoke the trim.
Anyhow, hope this helps, cheers!
I have the following snippet:
<StackPanel>
<Popup>
<TextBox ToolTip="Edit current date"/>
</Popup>
<Label "Current Date"/>
</StackPanel>
I want the popup to show when the StackPanel is clicked, and hidden when it (the Popup) loses focus.
I was wondering what would be the shortest way to write this in xaml.
To do this with an animation, use BooleanAnimationUsingKeyFrames. The example shows how to animate the IsEnabled property but will work equally well with Popup.IsOpen. (You'll need to scroll waaaay down to see the XAML example.) Take care about the FillBehavior so that the Popup doesn't animate back to being closed when the animation ends (unless of course this is what you want!).