WPF tips and tricks on beautifying a form/control

[dee-u]

Aesthetics is one of WPF's strength against WinForms and as such I wish to know some tricks and tips on beautifying a form/control such as putting a gradient, skinning, etc...

Care to share some?

[vbNeo]

It's important to note that a Form control is just like any other element in WPF, and as such the only limits the style you create is your imagination(Well, not really - but you know what I mean).

I find it important to not overstyle everything. Even though it's cool that you can do all this new stuff, you should be careful that you're still ending up with an interface that is somewhat recognizable to the user - something they're used to.

My advice is; don't use the new aesthetic features just because you can, do it in a way that fits into context, and that benefits the user of your application.

PS: I might've misunderstood your question. If you wish to learn how to apply styles to UI elements there are loads of tutorials about it on the web :).

[dee-u]

Don't worry about overstyling, I need to at learn how to style at least. :)

I want to dig into its aesthetic features just so the users may notice that I used WPF instead of WinForms. :D

When I have more time I will go on searching but if you have something in your sleeves then I'd appreciate it if you can share it with me.

[DeanMc]

Unfortunatly styling is an art so you have to just try things and see how they flow. The videos in my sig have different individual concepts like mirroring and changing colors in listboxes but you will have to put all these together in a tasteful manner which can be hard to do.

[chris128]

One thing is for sure... you dont want to be taking advice from me on this subject :D

[DeanMc]

Lol, don't mind him!

[dee-u]

Attach in my old winforms app, could you guys make suggestions on what things can I enhance by using WPF?

[DeanMc]

You could round out the text boxes and flatten down the buttons!

[dee-u]

How do I do those? Just in the properties?

[DeanMc]

No, you would have to rewrite the controls styles, chris has had a lot of experience with styles so he should be able to help you out!

[Negative0]

Also, look into Expression Blend. It is a visual tool that lets you apply nice styles to things. A lot of the time I use it to generate the XAML then I modify the xaml a little bit to tweak it.

[chris128]

No, you would have to rewrite the controls styles, chris has had a lot of experience with styles so he should be able to help you out!

I wouldnt say A LOT of experience with styles :P but I've played with them a little yeah. I'm sure it was you that showed me how to do the corner rounding thing anyway lol

Like Negative0 said, Expression Blend is the easiest and fastest way to make nice looking UIs and thats what I used for rounding corners but that was just a rectangle I was rounding, I dont think the same method works for textboxes. I was setting the RadiusX and RadiusY properties but it seems textboxs dont have these properties.
There do seem to be various ways to do this though, such as: http://chriscavanagh.wordpress.com/2008/10/03/wpf-easy-rounded-corners-for-anything/
and
http://wpfblog.info/2008/05/26/how-to-round-a-textbox/

[vbNeo]

I've done a lot of styling with XAML as well... I can post some screenshots for you tommorow when I meet at work.

Personally I don't like Blend. It's just like any other wysiwyg editor, though it might look good, the markup isn't exactly clean. I prefer writing it myself, and once you get the hang of it - it doesn't take that long.

[dee-u]

Thanks a lot guys. Keep them coming, once done I will probably upload the project in the codebank for everyone else to tear apart.

[chris128]

The main thing I find Blend useful for is creating things like gradients or animations as they are both a bit of a pain in the ass through manual XAML code

[vbNeo]

The main thing I find Blend useful for is creating things like gradients or animations as they are both a bit of a pain in the ass through manual XAML code

I disagree :D.

[chris128]

but how on earth do you figure out that to make a dark blue to light blue gradient you need to do this:

<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF37506B" Offset="0"/>
<GradientStop Color="#FF132238" Offset="1"/>
</LinearGradientBrush>
</Window.Background>

[vbNeo]

but how on earth do you figure out that to make a dark blue to light blue gradient you need to do this:

<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF37506B" Offset=""/>
<GradientStop Color="#FF132238" Offset="1"/>
</LinearGradientBrush>
</Window.Background>


It's pretty obvious? I can see from your start- and endpoint you're making a top-down one:). If you'd want to add a black middle segment you'd just add another gradientstop to the collection:


<Window.Resources>
<Color x:Key="Gradient_Blue_0">#FF37506B</Color>
<Color x:Key="Gradient_Blue_1">#FF132238</Color>
</Window.Resources>
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{StaticResource Gradient_Blue_0}" Offset="0"/>
<GradientStop Color="Black" Offset="0.5"/>
<GradientStop Color="{StaticResource Gradient_Blue_1}" Offset="1"/>
</LinearGradientBrush>
</Window.Background>


as you can see I'm also all about reusing resources ;).

[DeanMc]

Swit Swoo, nice code. Ok im pushing work on my Xaml Highlighter, should be ready for the weekend!

[chris128]

I'm looking forward to some BETA testage ;)

[vbNeo]

For the screenshot I promised before, take a look at this thread:

http://www.vbforums.com/showthread.php?p=3442686&posted=1#post3442686

[chris128]

That looks really good ;)

[dee-u]

After some busy months I may be able to give time to this endeavour again. Now, I just wish to ask how could I round those textboxes and flatten the buttons?

I looked at the links but I am not sure where to place those snippets.

TIA

[dee-u]

After some searching I made some progress but it is not yet perfect, I am just showing the screenshot to get some feedbacks.

The things I need to do is to beautify the groupbox, make the combobox look like the buttons, round out the listbox and some other things you suggest I should change.

Here is the code that I used to design the buttons and also used with the combobox, problem is the dropdown button arrow is not show, how do I make it show?

<ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}">
<Grid>
<Rectangle Stroke="#FFe1e1e1" RadiusX="10" RadiusY="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" x:Name="Rectangle">
<Rectangle.BitmapEffect>
<DropShadowBitmapEffect ShadowDepth="2"/>
</Rectangle.BitmapEffect>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFF9F9F9" Offset="0"/>
<GradientStop Color="#FFd9d9d9" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Stroke="{x:Null}" Margin="3,14,3,3" RadiusX="14" RadiusY="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.2"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.BitmapEffect>
<BlurBitmapEffect Radius="1" KernelType="Box"/>
</Rectangle.BitmapEffect>
</Rectangle>
</Grid>

</ControlTemplate>

[DeanMc]

I like it so far, clean yet modern, I wouldn't do to much for to it bar the small changes you have listed, other than that very professional and a fine example of restrained with WPF.

[dee-u]

I edited my previous post and asked for help with regard to the combobox, can you help me with that?

[chris128]

You have started a new thread for it now so lets leave this one and concentrate on the new one (http://www.vbforums.com/showthread.php?p=3630551). I like the look of the app so far by the way :)

[dee-u]

Here is the new version with the minor tweaks I mention. Upon further testing I will release the code for everyone to whack.

[dee-u]

Here (http://www.vbforums.com/showthread.php?p=3631718#post3631718) is the code for everyone to whack upon.

[RobDog888]

Looks great DU! :thumb:

[dee-u]

Thanks Rob!

[chris128]

You could post any further screenshots in here: http://www.vbforums.com/showthread.php?t=559305 :) that thread could do with a bump :P

[dee-u]

Actually it is just a single window so there is no further screenshot. I may change the Help About which uses a messagebox and to improve the messagebox by using a custom one.