With the latest Update from Groove Music Microsoft introduced a new styling theme called "Neon". As far as I know MS is planning to Update at least some more of their UWP-Apps, so that they also make use of this new Design Style, which has semi-transparent navigation bars.
Here is an example of how it looks like:
So I was wondering "Is it possible to create an Application that looks similar?"
As far as I can tell, MS should be using some mix of transparency and Gaussian-Blur-Effects. That's not really the problem, the interesting part starts by making the Window transparent itself, while keeping the Window-Control-Buttons.
When I search for tutorials and How-To's to make an WPF-Application transparent they all set two properties on the window-object.
AllowTranparency="True"
and
WindowStyle="None"
With the latter one removing the Title Bar.
So my question is, is there a "new" way of adding opacity to your window, without setting the WindowStyle to None?
And if yes, how?
Otherwise, is it more likely that MS used DWM to give the illusion of transparency, while actually projecting the overlapped part of the window behind the navigation?
I hope that my question is not to widespread about the topic and clearly asked. If not, I'm going to rewrite it and try to clear things up.
Thanks in advance for any answers and hints.
Related
This is only an issue if you have Drop Shadows turned off in appearance settings.
I noticed some of our applications form windows had no borders. Specifically they have been missing the 1 pixel thick border for the left part, right part and bottom part of the form window. All of the forms had in common that they were using FormBorderStyle FixedToolWindow or SizableToolWindow. When it is like this it is hard to distinguish where one dialog stop and another one begins.
We find it plausible that some of our users will have their computers set up like this without the ability to change it.
Is there a way to get the dialog windows looking better without doing anything crazy like manually drawing all borders?
Quoting part of a comment by Hans Passant:
By design for Win10, the left/bottom/right borders are transparent. Still quite visible against the large drop-shadow, so visible that is hard to tell that the border is transparent...
Our application has its own grahpical style that made it especially hard to distinguish where one dialog stops and the other one begins.
The quick solution for us was to stop using FormBorderStyle FixedToolWindow or SizableToolWindow.
Long term we are going trough all our dialogs and the graphical style of our application to make the dialogs more easily distinguishable from each other with or without borders.
For a while now I have attempted to get into UI design with WPF. My main goal is to create a good-looking application in a borderless window, like for example:
I made this example using the MetroUI framework. While this framework does the trick on borderless window functionality, it also does way too much for my tastes, custom controls, skins, animations, etc. I just want a borderless window and decide everything else myself.
I've searched stackoverflow a lot, and tried a fair amount of frameworks, but nothing seems to suit my needs.
Basically, I would like to have a borderless window with FULL windows functionality (drag to sides to pin, only show shadow if operating system settings has it on, etc etc).
Putting WindowStyle to None but keeping AllowsTransparency at False in order to preserve the original window chrome makes most if not all of the functionality I am seeking for work. However, the obvious problem here is: the window chrome is still there.
This looks like this:
To finally ask my question:
Can we keep all the current functionality that this window chrome provides, but somehow make it invisible (yet keep the dropshadow it provides) ? I can live without the dropshadow but it would be a nice bonus.
Or to ask a more broad question: is there any framework / pre-made project, that simply ONLY handles making a borderless window work properly and no other additional controls, skinning, ... ?
The more time I put into this the more it seems making borderless windows with WPF is simply incredibly clunky and I am getting rather unmotivated on my entire project because of this.
Thank you
See my answer on the following thread, it pretty much sums up all the window issues at once. Hope it helps!
WPF Borderless Window issues: Aero Snap & Maximizing
I have an idea for a personal project. And I know one way of accomplishing it in Windows Forms (which I no longer wish to use). Basically I could (in WinForms) just draw everything onto the screen (Form) and then when I need to switch views/states of the application, just redraw the new stuff in the old stuff's place.
But how can we have different states in WPF? Is there a "right" or "proper" way of doing this? Is something like this covered somewhere in the docs?
I'd like to do my own searching, but I have no idea what exactly to look for, and current attempts at finding the right information, so far have yielded no helpful (or even relevant) results.
Any help at all will be greatly appreciated. I am new to WPF, but have been making a lot of progress this past week!
Thank you!
P.S.:
I just thouhght of something. If the solution was to draw what is needed for one screen, and when it is time to display the next screen, just dispose of/hide everything and create/display the new stuff, then how would we get around this? Because we can't/shouldn't change XAML markup at runtime, can/should we? :/
Not sure how you drawn your views/states in WinForms (direct painting on a Graphics object?).
The closest to what you're describing is the VisualStateManager. You can use it to statically define several visual states inside a single XAML and transit between them (using a smooth animation if you want).
If what you've done was show different Forms with Show/ShowDialog(), then the equivalent would be to use different Windows and Show/Hide them.
If you just cleared/added Controls to your form, then you can do just the same in WPF. Most Controls in WPF have a Content or Children property instead of Control.Controls in Forms.
I don't know if I understand what you really want. But here are my thoughts:
You can use several Windows and Show/Hide them accordingly
You can use the Frame/Page functionality in WP (MSDN)
if you really need to you could load your XAML and remove the topmost content in your Window and replace it with the loaded content
You could use the VisualStateGroup functionality to change the appearance of your current window
I think you will be happy with the second solution
Now Im customizing title bar of my application. My aim is to add one extra button on title bar. Im my previous question people have adviced me the way I can customize non client area. Thats works perfectly except one small thing - glowing! I can draw glowing in nonclient area but I cannot make it spreads out of the window. I also cant find any resource about this subj.
I looked into this sample and made my own test app for investigating non client drawing facilities. Screen shot of my app's window:
So you can see that system button glows out of the windows when my is clipped by borderframe.
For example, Skype's window have four custom buttons in title bar and they can "glow" out of the window frame:
Can anybody advise me to find out the way to draw button's glowing out of the window?
Thanks in advance!
[EDIT]
Thank you everybody for answers!
Skype cheats it, and has a little sliver along the top of their window; where they can draw it.
You can see it with Process Explorer to SpyXX:
See also
MSDN: Custom Window Frame Using DWM
I don't think it's possible to draw beyond your NC area, and I kind of doubt they are drawing the whole UI to exactly match DWM Aero effects.
Given how this looks, I wonder if they did some tricks with either the help or restore button of a CustomBorderForm, which would then get the DWM blur highlight effect "for free".
Here's the most relevant article I could find to this: http://geekswithblogs.net/kobush/articles/CustomBorderForms3.aspx
Followup - I think this custom chrome thread has more pointers to the same techniques (although different goal): Custom titlebars/chrome in a WinForms app
AFAIK, this is not possible, because the area outside your window's border simply does not belong to you.
The Skype screenshot is from a custom-drawn frame that most likely extends a bit beyond the visible borders, not from an Aero Glass frame. You can tell the difference if you look carefully.
How would you get a button to look and perform similar to that of the buttons in the volume mixer on Win7?
What I mean is that in the volume mixer there are icons that doesn't look like buttons until you hover them, they also haven't got the standard blueish color when hovered.
So far I haven't found a way to do this directly in visual studio.
I'm guessing that creating a custom user control is the only way to go, but I've had no luck so far, I would appreciate some examples.
In addition, there are also combo boxes in the volume mixer I would like to duplicate. They're hidden except for the text and arrow until they're hovered.
Is there a way to accomplish this?
(Here an image that might help explain what I mean:
http://i53.tinypic.com/2ij409u.png)
For windows application, (and also how they did win7), they used the technology called WPF. I am not specifically answering how you can do this, because in WPF, this is the fundamental that defining skin (via markup called XAML) without touching the implementation code. If you are serious in learning how to do that, I suggest you look for tutorials or good book about WPF.
Here's one of the markup looks like for a button. To modify the button's look, what you need is to define it's XAML, and you don't have to inherit it in the code. The example looks scary long, but Visual Studio could help you.
You could use a third party control library, for example Krypton Toolkit, its free!
There is quite a terrific solution for this button quest. You can paste pictureBoxes on form and handle MouseUp, MouseLeft and MouseDown events. When each of them fires, you need to set specific image (one of tree, in fact) - normal picture, picture of "highlighted" icon and picture of pressed icon. But that's really a hard and useless work, so better don't.
If you need several of such "buttons" in a panel, I remember, I once managed to get the same behaviour by using toolStrip with buttons.