Added the Floating Watermark feature #1510
Conversation
There was a problem hiding this comment.
No need to tell what you've fixed in a comment, this should be in the commit message so that everyone can see it ;)
|
@Dotnetifier you should ditch the AnimtionUsingKeyFrames thing, a normal animation with an easing function is much more better visually. |
Dotnetifier
changed the title
|
This AnimationUsingKeyFrames matches the Windows 8 easing function more closely than any (built-in) easing function I have seen. I do agree it would look better if it uses an easing function. Is there a possibility we could convert the KeySpline into an easing function? |
|
@Dotnetifier I'm working on that right now. I know it matches Windows 8 style, though we're talking functionally. What I mean is that you can never match Windows 8 style as efficiently as Windows 8. Windows 8 animations require direct control of the underlying system (which it does). In WPF, all you get while trying to match that in "small change" animations is a jerky last change in position. I'm sure you can see that. Flyouts work well with KeySplines since it's a big control, here we're talking about the floating text which is small, and because of that mimicking Windows 8 style is not efficient. If you're thinking about matching the behavior using an easing function, even if you can, the jerkiness will still be there. A normal animation with a normal (perhaps Exponential) easing function is more efficient, and apparently, is more attractive visually in my tests (no jerkiness). |
Changed the whole storyboards. Moved the storyboards to Shared.xaml, to share them in both TextBox.xaml and PasswordBox.xaml.
Some editions to the floating watermak
|
@mrahhal Everything here is working correctly now. Thanks! |
Dotnetifier
changed the title
|
Latest behavior. |
|
@Dotnetifier Nice work. |
|
@mrahhal Cool, but I'll leave this for the next version. 0.14 is basically finished and I don't want to introduce any new features that close before release. |
|
Not a problem. Just letting you know that it's finished. |
|
Great! Should it expose a property to change the floating watermark's font size? I see you hardcoded it, and the opacity as well. |
|
@Tyelpion Changing the font size might be useful, but a fixed text height is needed for the animation. It isn't possible to animate to NaN or Auto or something similar. It's possible to animate the MaxHeight, but you'd always have a maximum value. I just picked an opacity value that looked good, so I don't know if that should be changed. It's always nice to have an option, however. |
|
Font sized are declared in Fonts.xaml. Please either reuse an existing size, add the size for the watermark to that file, or use a converter (e.g. FontSizeOffsetConverter) to base your size on another one. |
|
At first I was very fond of this control. But after doing some test, I've felt that it really needs another approach to the font size problem. Also, expanding textbox is pretty lovely, but the layout structure will become unpredictable, or be broken sometimes. Could you implement a style that retains the original design? Without expansion, and the floating label can be scaled based on the text size, or it can be changed separately? |
|
I see your point. I put the font size in Fonts.xaml (not committed yet), which does allow for easier customization, but it would be easier to make another attached property in TextboxHelper. Implementing something that calculates a font size would not be suitable for every font size. About the original design (also includes this): the floating message goes above the text, not the bounding box. That is not really visible for those controls since there is already some empty space above and they have no border. I tried to make the watermark float above the TextBox, but I thought it looked hideous because of the border and it was overlapping other controls. Another option is to make a fixed height TextBox. Then it will look like this: |
|
Thanks for your work and explanation, I can see it's really complicated. However, I just realized that what I talked about should be a new control, while what you are working on is making floating labels for the pure Textbox. I feel so sorry for unnecessary problems you have had to think of due to my ignorance about your idea! |
|
That's fine! You were right about the font size, that should have been in the Fonts.xaml indeed. |
|
I'll review this now and merge it if everything works, sorry for the delay |
Added the Floating Watermark feature
|
@Dotnetifier Thanks for that feature! A new NuGet package should come through the build server in a few minutes |
|
@flagbug I never saw an updated package come through NuGet; any ideas why? |
|
@amkuchta Are you on the prerelease channel? |
|
I am, and when I went in to update, there was not updated version of the package available |
|
@flagbug ^^ |
|
@amkuchta Can you try it again? I just merged some other things and the build server just pushed https://www.nuget.org/packages/MahApps.Metro/0.15.0-ALPHA43 |
|
@flagbug still no joy; I tried updating via both the package manager console and the "Manage NuGet Packages" GUI |
|
@flagbug scratch that; I did a clean uninstall and install, it worked. The update just would not pull down. |
|
@Dotnetifier Is there any way to still use the resizable textbox when using the floating watermark, or is the fixed-height the only way forward? |
|
@amkuchta You can use the non-fixed height TextBox. I would place the Auto height TextBox in a StackPanel or some other auto positioning container. You might want to see the text examples in MetroDemo. |
6 participants
Adds the Floating Watermark feature.
Add
Controls:TextboxHelper.UseFloatingWatermark="True"to a TextBox/PasswordBox with a watermark and it will appear when there is text in the box. The foreground color will be the box's, unless the box is focused, then it will have the Foreground brush set to AccentColorBrush.Closes #1318. Includes an edited fix for #1343, triggers the show of the floating watermark when the box already has text/a password.