The "What do you think of how my app looks" thread

[chris128]

So yeah, I figured seen as one of the main benefits of using WPF is being able to make better looking applications, it might be a good idea to have a thread in this forum for people to post screen shots of their apps and just ask for other people opinions/suggestions on the look and feel.

Obviously people developing in teams/businesses have got many people to talk to about the look of an application but for us people that are just developing on our own, there often isnt really anyone to ask for advice on application design and layout. Hence the idea for this thread.

I dont know, maybe no one will post here and it will slowly drop to the bottom of the list but I just thought it might be a good idea to help people get feedback on their apps :)

EDIT: Plus, it will be nice to see some of the great things that are possible with WPF :)

[chris128]

Well I guess its only right that I post the current status of my main project at the moment, so here's what the main job logging screen looks like in it at the moment (still a work in progress):

http://i135.photobucket.com/albums/q160/chriswright128/current1.jpg

As you can probably tell, the 3rd item up from the bottom is the currently selected item.

and here is the 'dashboard' window that appears when the user first logs in and is meant to just provide them with a way to view some quick summary reports and the menu items at the bottom allow them to get into the various sections of the program (a text title for each menu item appears when the mouse goes over each one). With this screen I think I need to change the way the reports are displayed at the top as they dont look very good to me at the mo:

http://i135.photobucket.com/albums/q160/chriswright128/current2.jpg

[Pac_741]

the layout, is great, i like it, there's something i don't like though, i don't know what is, maybe the colors.

[Pac_741]

http://qmftsa.bay.livefilestore.com/y1pwPuwXXVjwhuYT7UuVO01DEr9Lg4fH9wqWjIDO9D4tmh8LYo597yJwUt9wz5CtG1SVN38lmS1i3saN9m7RptPJQ/Untitled-2.png

Ok, this the contact mannager, i'm working on, Chris128 you know about it, the background and the Upper Bar, have different colors to chose from.
Please give tell me if you like this Graphic User Interface.

[chris128]

I like it, looks good. You might already be planning on changing this but the text that shows the name of the currently selected contact needs to be a colour other than black because its too hard to see (on that screenshot anyway).

Have you started working on the screens that let you create/edit the contacts?

[Pac_741]

Yes, i've made all the necessary windows, i made the dialogs to have full transparency if you are using Windows Vista, i'll post a screen shot later.

[chris128]

cool, yeah a screenshot would be good :)

[Pac_741]

http://qmftsa.bay.livefilestore.com/y1pc2f3YT5Fh2P0bl0D1jxPCmdorJotGAez-ncC8h_E9r2u8qSTzYFiJOXdG59Tc8rbSKpPo-KPvavp79kjuI10Cw/Untitled-2.png
This is a screenshot showing different color scheme, while adding a new contact.

[chris128]

Only a very minor thing but the label that says "Group:" in that New Contact window is too small so the p in Group doesnt get the bottom half of it rendered. You see what I mean?
Also, I dont know why but I think it might look better if the New Contact window was a little wider. Probably just me though.

[DeanMc]

What are you using for the semi transparent information window? is it just a form?

[chris128]

It looks to me like he has just used the standard windows Vista Aero glass. You can use windows APIs (there may be an easier way that im not aware of though) to make it cover the entire window in 'glass' instead of just the title bar and borders.
However, Microsoft do have a guide on application styling in Vista and they do say that you should not over use 'glass' or something along those lines. I'll see if I can find a link

[Pac_741]

Chris128, i know what you mean of the group label, i fixed that already, thanks for pointing it out, and i don't know about making the dialog wider, it's seems fine to me, but thanks for your opinion i might do it.

And to extend the Aero transparency to all the window, i got a little help from thirtheen23, those guys are awesome!.

[Pac_741]

Come on, people post screenshots of your applications!

[chris128]

they are obviously all too ashamed of their hideous apps after seeing our beautiful creations :P :)

[Pac_741]

:D, i bet there's people here with awesome looking applications.

[DeanMc]

Actually Im too busy writing applications to colour your mistakes so they are easier to resolve. That and Im looking into a blogging engine for silverlight.

[RobDog888]

The first shots are a bit dark colored but looks great. The other ones with the green are a bit too green but also look great. Good looking shots guys.

[Pac_741]

Thanks, RobDog888, the background color and the toolbar color of my app can be set to be different colors, so i leave that to the user.

[chris128]

The first shots are a bit dark colored but looks great. The other ones with the green are a bit too green but also look great. Good looking shots guys.

Yeah I am finding that it does look a bit dark on some monitors, so I might make it a slightly lighter blue gradient :)

[RobDog888]

Thanks, RobDog888, the background color and the toolbar color of my app can be set to be different colors, so i leave that to the user.
Ok cool, in that case you have it set. :)

[RobDog888]

Yeah I am finding that it does look a bit dark on some monitors, so I might make it a slightly lighter blue gradient :)
Usually bsuiness software is more on the lighter side of color schemes too. Not saying anything bad, just an observation. Is yours going to be commercial?

[chris128]

Its supposed to be used in businesses yes, but its going to be free so I dont know if that means it is still classed as 'commercial' or not? :)

[RobDog888]

If its targetted for business then no matter free or paid, its a business app and thus commercial.

[chris128]

Tut, no one else has any nice looking WPF apps they want to show off??
This thread has been up for 2 months now and so far only has 2 apps in it :P

[DeanMc]

Well, my starting off with C# led me off wpf and onto XNA which I am having barrels of fun with!

[chris128]

:eek: your off WPF??
Is XNA the thing you make games with?

I thought you gave up on C# in favour of VB!?

Either way, you can use WPF with C# as well as VB so im a little puzzled how changing to C# led you off WPF :)

[DeanMc]

Well here is what happened....

The more I debugged x:Light the more examples I needed of how people worked with strings. Every example I found was in C# so I gave in to the dark side and start writing in C#. Once I got over the silly little quirks in Visual Studio I began to like C# for some odd apparent reason.

As I played with C# more I became more interested in the language than my project so I started to mess around more with sample code people had. This led me to find a sample game made in XNA and I got hooked. I'm not sure if it is the game making part or the engine part that has me hooked but I am really enjoying the XNA challenge as you really have to think about what your writing!

[chris128]

I seeeee ;) I tried my hand at XNA ages ago but as it was all C# I couldnt really get my head around it that well as I'm too used to using VB so I gave up on it pretty quickly lol
Is x:Light finished now then?

[DeanMc]

It it is more easy to use. On the subject of x:Light, yes and no, it parses Xaml fine but the C# version does not work so well. For that I have a mass of C# language specifications to read up on. I'm also looking at implementing a new rendering engine so that could be a while.

[chris128]

Well just to try and keep this thread alive, here's a screenshot of my new custom error message box that appears whenever an exception is thrown in my app. I didnt intend for it to turn out quite so similar to the windows vista dialog box style but now that its finished it does look quite like them... but oh well. It looks exactly the same on XP, obviously minus the aero glass in the title border.

http://i135.photobucket.com/albums/q160/chriswright128/errorassist.jpg

when you expand the debug information section it animates the window height as it expands :)

[DeanMc]

Very nice except for the black button, actually I am in the process of working on a game level editor in WPF so I will update when i get some of it working!

[chris128]

Cool yeah post it up when its looking good :)

As for the black button, thats not actually included in my error dialog box class, its just that in that particular screenshot I was using the class within another project that has a custom button style defined for all buttons in the application, so it affects this one too. Might have to have a look at changing it so that this one overrides the default style..

[DeanMc]

You should other than that it's a really well presented box. How are you getting on with expanders?

[chris128]

You mean expanders as in that thing I've used for the "Debug Info" section? If so, yeah I find them to work perfectly well when you set what you want to be inside them via XAML instead of trying to use the designer to drag stuff into them lol you having a problem with them or something?

[DeanMc]

I was with the designer too but I also used the Xaml way and found it (like most times I use Xaml of the designer) easier!

[chris128]

Yeah I dont really use the designer much to be honest, it changes too many things that you dont want changing half the time. I use Blend occasionally to make gradient brushes etc but I do pretty much everything else through XAML or code

[DeanMc]

Lol power user, man my WPF has got very rusty I really need to brush up on it!

[chris128]

same here mate, I havent used it for a couple of months... dont even talk to me about data templates and binding!

[DeanMc]

*shudders* I know I know, but this level editor should bring it back into swing for me!

[chris128]

My new custom messagebox class that now replaces all of the MessageBox.Show calls in my application :)

Just took a few screenshots to show the difference between the standard one. Any feedback welcome

http://i135.photobucket.com/albums/q160/chriswright128/informationaldialog.jpg

http://i135.photobucket.com/albums/q160/chriswright128/warningdialog.jpg

http://i135.photobucket.com/albums/q160/chriswright128/questiondialog.jpg

http://i135.photobucket.com/albums/q160/chriswright128/longdialog.jpg

[DeanMc]

Hey! you got your icons anyway, please for the love of all that is holy get rid of the black button though!

[chris128]

Just making a little instant messenger application to help me learn WCF and I thought I may as well brush up on my WPF skills while im at it. Its nothing fancy and I havent spent that much time on it but just thought I would post a few of the screens from it to add to the examples in this thread that people new to WPF can look at :)

Here's the sign in screen - this screenshot is taken from a Vista machine but the whole thing (including the buttons) looks identical on an XP machine

http://i135.photobucket.com/albums/q160/chriswright128/ProtoChatClient.jpg

I'll post the chat screens and the main user list screen shortly

[Pac_741]

Just making a little instant messenger application to help me learn WCF and I thought I may as well brush up on my WPF skills while im at it. Its nothing fancy and I havent spent that much time on it but just thought I would post a few of the screens from it to add to the examples in this thread that people new to WPF can look at :)

Here's the sign in screen - this screenshot is taken from a Vista machine but the whole thing (including the buttons) looks identical on an XP machine

http://i135.photobucket.com/albums/q160/chriswright128/ProtoChatClient.jpg

I'll post the chat screens and the main user list screen shortly

You should try to improve the color scheme, and work a little bit on the close button as it looks kind of bad, but anyways nice layout and great application.:)

[chris128]

Yeah the close button is kinda shabby in that screenshot as the image is compressed but honestly it looks a bit better in 'real life'. As for the colour scheme, I realise some people will think its a bit bland so I'm going to provide a couple of different 'themes' that users can select from, this is just the one Im working with while I build and test the app :)

[chris128]

Well I said several months ago that I would post the 'chat' screens from that instant messenger I'm making and I've finally got round to it lol

http://i135.photobucket.com/albums/q160/chriswright128/chatting.jpg

and the colours change based on the user's status. So if a user that you are chatting to changes their status to Busy then that green gets changed to blue. here is an example, when the user signs out and you still have the chat window open it will change to grey:

http://i135.photobucket.com/albums/q160/chriswright128/chatting-offline.jpg


Oh and here is the main contact list screen (I've added a few things since I took this screenshot but its still pretty similar):

http://i135.photobucket.com/albums/q160/chriswright128/listbox.jpg

[dee-u]

chris128, aside from the black button that is cool! Care to share the code for that? =)

[chris128]

What black button? and which code do you mean, the XAML or the entire project?

[dee-u]

Oooppss, I was looking at your custom messagebox screenshot when I posteda quick reply, didn't realize this thread had two pages.

[chris128]

ah right haha fair enough :) I can post the source code + XAML for my custom messagebox if you want?

[dee-u]

I am particularly interested with how you manage to resize the form and limit it when the text grows longer than usual and instead wrap it, so I am kin at looking how you did it. =)

[chris128]

Well all that sort of stuff was done in XAML so here's the XAML code - this is for a slightly different colour scheme and title bar style than the one in the screenshots but same kind of thing. See attached file.

I guess the bits you are interested in are just using the TextWrapping property of the TextBlock, using WrapPanels, and using the SizeToContent property of the Window in combination with the MaxWidth and MaxHeight properties

[dee-u]

Thanks chris!

[Pac_741]

Here's a screenshot of a Point Of Sale Application I developed for a small supermarket: http://www.vbforums.com/attachment.php?attachmentid=75800&stc=1&d=1264209008

[chris128]

hey thats nice, I like the simple style it looks really good. Your text looks incredibly clear and crisp for a WPF application as well lol

[Pac_741]

hey thats nice, I like the simple style it looks really good. Your text looks incredibly clear and crisp for a WPF application as well lol

Thanks a lot Chris.

[chris128]

A few screenshots from an app I released recently that uses WPF 4:

http://www.cjwdev.co.uk/Software/ADPhotoEdit/Splash.png

http://cjwdev.co.uk/Software/ADPhotoEdit/StandardResults.png

http://cjwdev.co.uk/Software/ADPhotoEdit/Edit.png

[xera]

wow chris128, love those Ok and Cancel buttons.... How did you do them?! What do they look like when mouse is over, and pressed?

haha most of my apps so far look like they're from win95... but there is one revolutionary one, which has it's own whole skin, with curvy corners, shadow, etc that took me ages to create.

[chris128]

wow chris128, love those Ok and Cancel buttons.... How did you do them?! What do they look like when mouse is over, and pressed?

haha most of my apps so far look like they're from win95... but there is one revolutionary one, which has it's own whole skin, with curvy corners, shadow, etc that took me ages to create.

Cool, would love to see a screenshot of it :)

As for the buttons, they have a nice fading effect that makes them get a bit lighter when the mouse is over them and then they go darker and the content and background drops down a little when pressed.
I made them by using a border with a gradient brush as the background and CornerRadius set to 6 or something (to get the rounded corners), then another border on top that is invisible until the mouse is over it and then its opacity gets increased over about half a second :) Once I had made it all I just used the "Group Into Button" option or whatever it's called in Expression Blend. I can post the XAML for it (excluding the animations) if you want?

[akhileshbc]

Hi :wave:

Here's my contribution:
http://www.vbforums.com/attachment.php?attachmentid=83672&stc=1&d=1303803847
http://www.vbforums.com/attachment.php?attachmentid=83672&stc=1&d=1303803847 (http://www.vbforums.com/attachment.php?attachmentid=83672&stc=1&d=1303803847)

The background images are Photoshoped and this application is written in VB6.
The purpose of this application is to grab the results from my university's site (parsing HTML page) and can calculate some extra fields like Total, Percent, etc. and will create a shortened message with the result, which can be send as a text message.

:wave:

[chris128]

:eek: you posted a VB6 app in the WPF forum :eek: :eek: :D

[akhileshbc]

:eek: you posted a VB6 app in the WPF forum :eek: :eek: :D
I'm focusing on the thread title: The "What do you think of how my app looks" thread ;)

:wave:

[chris128]

haha fair enough :) for a VB6 app I would say it looks pretty amazing! The only thing that lets it down for me is the column headings, they look a little bold and sharp compared to everything else that is quite smooth. Doesn't ruin it or anything but that's the only thing I'm not keen on :)

[akhileshbc]

haha fair enough :) for a VB6 app I would say it looks pretty amazing! The only thing that lets it down for me is the column headings, they look a little bold and sharp compared to everything else that is quite smooth. Doesn't ruin it or anything but that's the only thing I'm not keen on :)
Thanks :wave:

I couldn't find a good font at the time of development. :)
So, I have come up with that at the end. But the contents of the ListView is colored based on the marks(exam results) obtained. That is for a failed subject, it would color the row in red and for the rest, it will be in green.

I'm planning to release a new version in VB.Net. Will focus on clearing these issues and making it better. :thumb:

I'm a fan of cool and modern GUIs. All those snapshots posted in this thread looks charming. :thumb:

[NickThissen]

Well I've finally really started to work with WPF, and I must say it's a lot more powerful than I initially thought :) I thought it was all about the looks but the databinding is amazingly powerful...!

Anyway, I thought I'd share my test app here. It's a simple contact manager application, of which 39838523 (at the time of writing) already exists, but the point is to learn WPF so there :)
http://i51.tinypic.com/e8pwfk.png
There's a lot of glass but I think it still looks pretty decent. The Toolbar is still crappy, as well as the 'group selection' combobox (I'm thinking of doing something completely different there; like a horizontal scrolling thingy where the user can scroll through groups and select one) which looks completely out of place. The blueish colors of the rounded rectangles aren't very nice either but I can't seem to find a color that suits... But I think it's not bad for a first try :)

I am using Expression Blend and VS at the same time though, I find in EB it is easy to select colors (obviously because you can see them change in real-time) and add borders around objects, but for some reason it doesn't seem to understand grid layouts. If I have a grid with two rows and want to place a border around an element in the second row, then instead of setting Grid.Row="1" on the border it adds a ridiculous Margin. It looks the same in the designer but it's not, and I have to go back and change it in VS each time. Am I doing anything wrong??

[chris128]

No you are not doing anything wrong, and I find VS usually does the same to be honest. It is annoying but I have learnt to just do all of my control creation and general layout stuff in XAML by hand, then just use the Belnd designer for things like picking colours and adding animations.

As for the look of your app, I like it :) other than the menu text being hard to see on the glass but I think you said you already plan on fixing that. I hope you can post another screenshot when it is completely finished :)

[akhileshbc]

Nice look, NickThissen :thumb:

:wave:

[NickThissen]

Here's an update. Still trying to figure out how to change the style of a ToolBar / Menu (I cannot figure out how to change the look of selected / hovering items) so for now I just gave them a slightly different color to make them stand out and make the text more readable.

I also removed the thick borders and removed some of the glass / transparency. Finally the lists also contain the contact images now, and the image on the 'edit contact' window looks a bit nicer too.
http://i52.tinypic.com/rc53fb.jpg

[akhileshbc]

How would these applications would appear in a XP machine ? Do you guys have some virtual PC to test this apps in WinXP OS ? Because there's some glass effect which makes the GUI cool. But in an XP machine, I think the glass effect portion might look bad.

:wave:

[NickThissen]

In XP the background should be just white (though I didn't test it). Anyway, the purpose of my app is to learn WPF, so it's not going out to anyone anyway so I don't really care how it looks in XP :p

[akhileshbc]

In XP the background should be just white (though I didn't test it). Anyway, the purpose of my app is to learn WPF, so it's not going out to anyone anyway so I don't really care how it looks in XP :p

okay :)

[Lightning]

This is an app for Phone 7 devices, but the UI is created in WPF so I think I an allowed to post here :D It is still in the very first fase of development...

[chris128]

Nice :) though the screenshots are a bit big! :P

Oh and also, maybe its just me but I'd like to see the corners of those buttons rounded. But then I'm a sucker for rounded corners..

[Lightning]

The screenshots are the same as the MarketPlace screenshots (480x800).
The buttons will probably be rounded I think but this version needed the finished quickly so my customer could see that Phone 7 is the best choice :D
When the app is a little more finished I'll post more pictures

[chris128]

Ah I see, look forward to it :)

[NickThissen]

I'm creating a Calendar control similar to the Outlook calendar in month view. It's not finished yet, I still have to add appointments to it (but that shouldn't be too hard). I think it looks pretty good, and it was much easier than I expected :) I'm still having some trouble with triggers getting the day that the mouse is over to highlight, but I'll get that fixed soon enough I think, maybe with your help (there's a topic on it) ;)
http://i55.tinypic.com/x6gbjp.jpg

It works really well, all I need to do is supply it a month and a year and it shows the correct days, even those in the previous and next month that happen to fall in the first and last week of the shown month, just like Outlook does.

I'm not sure if I'm going to add week/day view, probably not as I don't need it at the moment, but I might need it in the future (well, I'm pretty sure I will but that's not for a long time) so I'll think about it.

[chris128]

Looking good! :) What is it made out of? Is it a listbox with a custom data template or more complicated than that?

[NickThissen]

No, much easier (but less 'correct' and less easily extendible I guess). The whole control is basically one grid. It has 7 columns and starts with just one row. Then it has a BuildCalendar method where I calculate the start and end dates based on the month it needs to display (in the case of the screenshot: may 29th and july 2nd). Then a simple loop increments the date by one each time and adds a new DayControl, which is a UserControl with a label (the header) and a ListBox (which will hold the appointments). For each control I increment the column and row and set them. When the column number reaches 6 I wrap around to 0 again and create a new RowDefinition in the grid (it has to be dynamic, for some months it displays 5 rows, for some months it needs 6 rows).

So yeah, pretty simple, but it works fine for me. The only thing I am not supporting is appointments spanning multiple days. That won't work with my approach since the appointments go into the ListBox in the DayControl; they'd have to go on top of all the DayControls in order to be able to span multiple days... But I don't need that anyway.

[chris128]

Ah I see, well yeah there's always more than one way to do things :) and whilst there is probably a and "more WPF" way of doing it, if that way works for you then its all good. Certainly looks the part anyway :D

[Lightning]

And an other Phone 7 app (also WPF), it displays the current location of the ISS and the orbit for the next hour:

[NickThissen]

Small update, appointments now show. You can choose different colors (I've implemented red, blue, green, yellow, white and black but a user can inherit AppointmentColor and return his own colors for the top and bottom of the gradient, text and border.
http://i56.tinypic.com/wtx1jd.png
The small calendar on the right can be used to navigate to a certain date quickly; if you select a date there it is also selected in the month view calendar. This is not part of the month view calendar, I've implemented it in the main form.


I think the appointments look good, but the space is a little small (either that or the window has to be very large), so I am still experimenting with some methods to get the space larger. I've actually tried enlarging the selected day by a smooth animation. That worked in theory but it was awkward to work with; it was almost impossible to select the day you wanted because every time you move your mouse some days are enlarging and others are shrinking and you basically couldn't make sense of what you were seeing anymore :p

[chris128]

Couldn't you just make them enlarge when you actually click to select them then?

[NickThissen]

I'm already planning to show the selected day to the bottom right (underneath the small calendar), where it can be shown much larger, so that would be a bit redundant. I haven't figured out how to get that to work though. I remember from my early days that if you bind a Combobox to a list of elements the combobox actually displays those elements (I think i had a dropdown filled with calenders once by mistake :p), like a 'copy' of the element, but I can't get that to work by myself. I tried having a ContentControl with its Content bound to the SelectedDay property of the calendar, but it complains that the selected day is already a child of the calendar and i have to remove it from the calendar first... Oh well, I'll figure something out.

[NickThissen]

New project, an application that allows me to manage my scientific papers so that I can categorize them under various categories, authors, titles, journals, etc. The main grid (it's actually a UserControl with comboboxes and a ListBox) can filter on any column so that I can quickly find the paper I'm looking for.

http://www.nickthissen.nl/Images/Persistent/tmp7EE9.png

There's dialog windows for Authors, Journals and Categories, but I can also create them 'on the fly' when creating a new paper (so that I don't have to remember to create a new author first, I can do that all in the 'edit paper' window (not shown)).

http://www.nickthissen.nl/Images/Persistent/tmp551D.png

I've created the Windows 7 themes myself; I've got Windows 7 themed ListBoxes, ComboBoxes, TreeViews, ToolBars and Menus, all in an easy to re-use custom control library.
I'm not sure how these look in XP, but there's no aero transparency or things like that so it should look the same (it might clash with the horrible title bars in XP though).


It's quite early in development but I already love it, it's so easy to work with! What do you think?

[chris128]

I like the fairly simple style - I have one question though, why make all of the windows 7 themed controls yourself? If you are not bothered about running it on XP, what have you gained over just using the built in controls that already have the Windows 7 theme when run on Windows 7?

PS is this WPF or Winforms?

[NickThissen]

It's wpf of course. None of the standard controls (listbox, treeview, toolbar, etc) use the Windows 7 theme for me... They all have the standard solid blue selection rectangles and the toolbar looks just like the winforms toolstrip, in other words not at all like any real apps... Also i'd like it to look the same on xp, i just havent got an xp system to try it on.

[chris128]

Huh? You must have something set wrong then because all of the standard WPF controls have the theme of the OS you are running them on by default. If I just add a standard treeview control to a WPF window it looks exactly like yours does in that screenshot.

[NickThissen]

Nope, not for me :/

XAML:
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<ListBox Margin="5" x:Name="listBox" Grid.Column="0" />
<TreeView Margin="5" x:Name="treeView" Grid.Column="1">
<TreeViewItem Header="Item 1" />
<TreeViewItem Header="Item 2">
<TreeViewItem Header="Subitem 1" />
<TreeViewItem Header="Subitem 2" />
</TreeViewItem>
<TreeViewItem Header="Item 3" />
</TreeView>
</Grid>
</Window>

Screenshot:
http://www.nickthissen.nl/Images/Temp/tmpAE9F.png
I even have this in the App.xaml which is supposed to turn on Aero themes, but no luck:
<Application x:Class="WpfApplication2.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/PresentationFramework.Aero;component/themes/Aero.NormalColor.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

[chris128]

I don't see the difference between that screenshot of the treeview and your original one? I thought you meant it was still giving you the little + symbols instead of the black triangles for expandable nodes like it would in XP. I see what you mean about the listbox selected item colour - that is the same for me, but to be honest I'd never really noticed as I always tend to apply a datatemplate to items in a listbox and get rid of the default selection highlighting etc.

[NickThissen]

No I'm mainly talking about the selection highlight. If you want to implement that for a TreeView you'll have to draw the arrow yourself too (since you have to create the entire control template). I got the TreeView code (everything besides the selection highlight) from somewhere else but it looks spot on. I made the selection highlights (consisting of two borders and various gradients) myself so that they look like the Windows 7 explorer theme even on other OSes (the default blue just looks horrible with the rest of the theme of my app).

I get your point about the custom data template, but in this case there's really nothing else to display besides a name so I went with the Windows 7 theme selection instead of some custom style.

[chris128]

Ah yeah that's fair enough then :) I'm just working on an app with a fairly simple treeview and listbox at the moment and now that you've pointed out the ugly blue selection colour I can't help but notice it lol might have to do something about that soon. Its still very early in the development of it but I'll post some screenshots in a minute

[NickThissen]

Cool. If you need my windows 7 style code just ask, I was going to put it in the codebank anyway but there's still some issues I need to fix.

[chris128]

Here we go. Its not really anything special in terms of looks, especially not at the moment as I only started working on it a couple of days ago. It does use a nice blur effect on the main window when a dialog window is shown though (as you can see in a couple of the screenshots). Oh and before anyone says it - yes I think I'm going to change the background colour of the main window :)

http://www.cjwdev.co.uk/Other/Ntfs2.png

http://www.cjwdev.co.uk/Other/Ntfs1.png

http://www.cjwdev.co.uk/Other/Ntfs3.png

http://www.cjwdev.co.uk/Software/NtfsReports/Ntfs7.png

Sorry for blatantly stealing your look of the OK and Cancel button area at the bottom of the dialog windows :D

[chris128]

Cool. If you need my windows 7 style code just ask, I was going to put it in the codebank anyway but there's still some issues I need to fix.

Yeah that would be good cheers :)

Oh and what did you end up doing for the large menu item buttons in your app (The New, Edit, and Delete buttons at the top) ? Are they just normal buttons with a custom template/style applied or are they menu items or what? I just used normal buttons for mine and set the background colour to transparent, which looks fine for the most part but after the buttons have been clicked they look a bit out of place.

[NickThissen]

Yeah that would be good cheers :)

Here you go. Keep in mind though that there's still a few issues (especially with the toolbar buttons) and that I may not be using the 'correct' way to handle things. I'm quite new to WPF and especially things like creating custom themes is something I've mainly just did using trial and error, I've never really read a book about it or something (I do have a book but didn't get that far yet:lol:), so I might be using the wrong practice everywhere... But the important thing I guess is the colors, brushes and control templates which do look the same as Windows 7 as far as I can tell.

[chris128]

Thanks I'll have a play around with it :) and yeah don't worry I'm the same lol I have 2 WPF books in fact but I've never read much of either...

[akhileshbc]

Hey, is that "blur effect" possible with Windows Forms ?

Thanks :wave:

[NickThissen]

By the way nice app chris. The only things I don't like is the abundance of light blue (so yeah I would change the background indeed), and the menu and statusbar colors. As for the blur effect that's pretty neat. Too bad you can't blur the window borders itself (right?) so it makes the border stand out a bit. Perhaps try overlaying a dark color as well as the blur, that might get rid of the 'hard edge' between the window contents and the border (right now it seems like it's blurring the edge colors with black so that there's a small black gradient at the edge, that might be less visible if the whole window is a little darker).

Sorry for blatantly stealing your look of the OK and Cancel button area at the bottom of the dialog windows :D
That's ok, it looks great doesn't it :) By the way, how do you make your OK and Cancel buttons equally wide? Do you simply set the Width? I've read that you shouldn't set the Width if you can avoid it so I've always been trying to get them about the same size using the Padding but I don't think there's a value that works...


Hey, is that "blur effect" possible with Windows Forms ?

Thanks :wave:
I wouldn't count on it, at least not in a simple way. You could perhaps take a screenshot of the window, dynamically place a picturebox on the window (on top of every control), blur the screenshot and show it in the picturebox, but that's likely really slow. I've never come across a good blurring technique in winforms that wasn't slow. The only reason it works for WPF is that WPF can use your graphic card to create the blur effect which is orders of magnitude faster.

Chris: followup question based on my last comment... How does the blur perform under Windows XP? As far as I understand there's no graphic card rendering in XP so it might be really slow.

[akhileshbc]

I wouldn't count on it, at least not in a simple way. You could perhaps take a screenshot of the window, dynamically place a picturebox on the window (on top of every control), blur the screenshot and show it in the picturebox, but that's likely really slow. I've never come across a good blurring technique in winforms that wasn't slow. The only reason it works for WPF is that WPF can use your graphic card to create the blur effect which is orders of magnitude faster.

Thanks for the info :thumb:

:wave:

[chris128]

By the way, how do you make your OK and Cancel buttons equally wide? Do you simply set the Width? I've read that you shouldn't set the Width if you can avoid it so I've always been trying to get them about the same size using the Padding but I don't think there's a value that works...

Yeah I just set the Width property to the same value for both.



Chris: followup question based on my last comment... How does the blur perform under Windows XP? As far as I understand there's no graphic card rendering in XP so it might be really slow.

I use the following code to determine if the blur effect should be used or not:
Dim UseEffects As Boolean = CInt(RenderCapability.Tier >> 16) > 1
because any machine with a Tier of 0 or 1 is probably not going to be able to handle the blur with decent performance (more info here: http://msdn.microsoft.com/en-us/library/system.windows.media.rendercapability.tier.aspx )

[NickThissen]

Cool, didn't know you could do that, that's very useful!

[chris128]

Well im glad you asked because after reading the documentation that I linked to I have realised that tier 1 could probably handle the blur effect as well :) I always thought tier 1 was still pretty poor in terms of graphics power but it seems that it is not that much different to tier 2.

[weirddemon]

Here's my go at WPF. I didn't have anything practical to make, so I just made a quick demo of a POS application. I've never actually used a POS application before, so the general design probably isn't ideal. Looking back, I'd probably do it a lot differently, but I'm fairly satisfied with this.

In this demo, I actually didn't even use VS that much. Most of this was just done in Expression Blend. When I have an actual practical application to develop in WPF, I'll of course use VS a lot more.

http://img841.imageshack.us/img841/8504/posdemo.png

[chris128]

I really like it :) the buttons on the left maybe get a bit too dark though

[weirddemon]

I really like it :) the buttons on the left maybe get a bit too dark though

Thanks. You mean the buttons underneath the "Menus" button? I suppose I could make them a bit lighter. They're the same color as the rest, just more opaque.

But, this was a just a demo to get a little more familiar with WPF and Expression Blend. I'm trying to think of a practical application to create, so can really get into it.

[weirddemon]

I finally decided what I wanted to make in WPF, to expand my knowledge on it. I can make demo after demo, but if I don't make something practical with an end goal in mind, I don't think I'd ever learn as much.

So, I decided to make a desktop client for Reddit. I wanted to expand my knowledge on HTTP WebRequests, so I'm hitting two birds with this one.

Anyway, here's my UI so far. I've already figured out how to login with Reddit credentials and I'm working on grabbing user data and when that's done, I'll focus more on grabbing submissions, so the UI will expand a lot more when that happens.

http://img36.imageshack.us/img36/6047/haveyoureddit1.png
http://img703.imageshack.us/img703/2284/haveyoureddit2.png

[chris128]

Nice :) I like the simple icons on the top right and that logon screen looks nice too. One thing I would suggest that you might not be aware of if you are new to WPF (and this only applies if you are targetting .NET 4.0). To make the text less blurry you can set the following property on each TextBlock element:
<TextBlock Text="Some Text" TextOptions.TextFormattingMode="Display">
or you can use a Style to apply this to all TextBlock elements in the window, like so:

<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
</Style>
</Window.Resources>

and for Images you can use the following to make them a bit sharper (note that if your images are not the same size on your window as the actual image file is then this may make them appear a bit pixelated):
<Image Source="example" RenderOptions.BitmapScalingMode="NearestNeighbor">
When testing these properties, never rely on the VS designer to give you an accurate representation of what the images/text will actually look like - run the program and see what it really looks like. The VS WPF designer is pretty poor in my opinion, it often displays things quite differently to how they actually look when you run the application.

[weirddemon]

Nice :) I like the simple icons on the top right and that logon screen looks nice too. One thing I would suggest that you might not be aware of if you are new to WPF (and this only applies if you are targetting .NET 4.0). To make the text less blurry you can set the following property on each TextBlock element:
<TextBlock Text="Some Text" TextOptions.TextFormattingMode="Display">
or you can use a Style to apply this to all TextBlock elements in the window, like so:

<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
</Style>
</Window.Resources>

and for Images you can use the following to make them a bit sharper (note that if your images are not the same size on your window as the actual image file is then this may make them appear a bit pixelated):
<Image Source="example" RenderOptions.BitmapScalingMode="NearestNeighbor">

Hey Chris,

Yeah, I'm fairly new to WPF. As for the blur, do you mean the blur while the log in form is displayed? Because that was intentional. I noticed how you used it in one of your apps and like how it looked when a dialog when is displayed. I currently have the blur Radius set to 5, but that can always be changed.

[chris128]

No I mean the slight blur that you get on all normal sized text in WPF (really large text looks better without that property I mentioned set). You might not notice it but trust me a lot of people will and it is very annoying. There's been a lot of complaints about this and so they added that property to WPF 4.0. See here for more info and examples: http://blogs.msdn.com/b/text/archive/2009/08/24/wpf-4-0-text-stack-improvements.aspx

[wild_bill]

Did you guys purchase those slick icons, or are the available for a tight wad such as myself for free?

[chris128]

I dunno about anyone else but I bought mine from here a couple of years ago: http://www.iconshock.com/

[weirddemon]

Did you guys purchase those slick icons, or are the available for a tight wad such as myself for free?

The icons I use in the Reddit app above, are free. But, I purchased the license to use them in my app at Custom Icon Design (http://www.customicondesign.com/free-icon/mini-icon-set-part-1/).

[ForumAccount]

Wow, all of these applications are very impressive. I've been meaning to get into WPF, the only thing that prevents me is that I've had some bad experiences with the designer and feel like it isn't very robust. After dabbling for ~10 minutes I crashed the designer and it wasn't a very friendly exit.

I wish I had some of the XAML of your posts so that I could dissect them.

[wild_bill]

Are you using VS 2010? I haven't had problems with the designer, just my own lack of knowledge.

[NickThissen]

I find the designer quite 'heavy', it seems to become slow really quickly, at least much slower than the code editor (for C#/VB). I've got 4GB of ram and an AMD Phenom II X6 cpu @3.5 GHz so that should be plenty imo... For the rest I don't really have any issues with the designer. You just have to step away from wanting to drag controls on the surface as you did with winforms (if you do this some strange properties will be set that you don't want), and you need to get used to the new layout system (no more absolute coordinates but all relative, more like web except without the CSS). Just figure out the layout system and write your controls in XAML, that is the easiest way imo :)

[chris128]

Yeah I always create all of the controls in XAML rather than dragging controls using the designer, like you said, things don't work as you would expect if you just drag n drop them on. Oh and yeah the designer is a little heavy and slow sometimes (even with 8 GB RAM, a solid state hard disk, a quad core CPU and a 1 GB graphics card) but I've just kind of got used to that.

While I'm here, here's a couple of updated screenshots of my current project, though not really doing anything that impressive visually, I hope it looks fairly clean and easy to use :)

http://www.cjwdev.co.uk/Other/Ntfs2-1.png

http://www.cjwdev.co.uk/Other/Ntfs2-3.png

The nice thing is that there's no VB code populating anything in those tabs on the right when the user clicks a specific node in the tree (or even telling it which tab to show), its all done through databinding :) Well actually there's a few lines of VB code in the Converters that some of the bindings use but not a lot.

Oh and I really need to get round to using your treeview style Nick to get rid of that ugly solid blue rectangle selection on the treeview! :)

[NickThissen]

I think it looks really good. It looks like a business application, and even though it does use WPF extensively (a few of the UI elements and obviously the databinding) it doesn't look cheesy as many other WPF applications. Good job!

The only thing that looks a little strange is the grey bar between treeview and tabcontrol (I guess it's a grid splitter?); I think it would look better if it was just transparent. Maybe use a small icon or such in the middle to indicate it can be dragged.

As for the databinding of the TabControl, I'm assuming you're using MVVM? So the TabControl is bound to a collection of viewmodels, and each type of viewmodel has a DataTemplate that tells the TabControl which view to use (the view is a UserControl)? I've recently been reading up on this techique and it works really well!

[chris128]

Yeah I really don't like the gridsplitter either and at some point I will try and make it look a bit nicer :)

As for MVVM, I've never got round to looking into it so I have no idea if I am using MVVM or not lol but probably not :P basically the treeview (ResultsTree) is bound to a List(Of SomeClass) and then the tab control itself has its datacontext set like so (so that all bindings on controls within the tab control are relative to the instance of SomeClass that is currently selected in the treeview):
DataContext={Binding ElementName=ResultsTree,Path=SelectedItem}
Then the controls on the tab pages use bindings like this:
<TextBlock Text={Binding Path=SomeProperty}>
Where SomeProperty is a property of SomeClass.

That XAML is all off the top of my head so might not be 100% correct but you get the idea :)

[NickThissen]

Here's my latest work, still a work in progress but I think it's coming along nicely :)

http://www.nickthissen.nl/Images/Persistent/tmp5B65.png

It's a 'black box' application for a racing sim, basically you put it on a secondary monitor and it displays useful information during a race. The grid in the middle shows the drivers around you, drivers near to you are displayed larger so they are more easily seen. The colors indicate the type of car they are driving.

Each 'toolwindow' is a dockable window and people can drag it around, resize it, etc. Each window is also a plugin, completely separate from the main app, and people can write their own plugins :)

I've recently added a dropshadow underneath each of these windows, that looks very nice I think, but don't have a screenshot of that.

[akhileshbc]

@Nick: I am not much satisfied with the colors in 2nd column (the "NR" one). Also, the display of rows with different font sizes, is somewhat not appealing to me. It's a bit hard to read those names which are under longer distances. Maybe, you could try a different styling. Say, automatically sort them based on the POS or something else.

I liked it as whole. :thumb:

:wave:

[NickThissen]

@Nick: I am not much satisfied with the colors in 2nd column (the "NR" one). Also, the display of rows with different font sizes, is somewhat not appealing to me. It's a bit hard to read those names which are under longer distances. Maybe, you could try a different styling. Say, automatically sort them based on the POS or something else.

I liked it as whole. :thumb:

:wave:

The colors are the same as in the sim, so people know what they mean. As for the font sizes, you typically won't care about the drivers that far away from you, only those close to you. That's why I made them bigger. Also, you can now see them grow when they are aproaching you, so you get a kind of warning that a faster car is aproaching. In this case, the pink car is slow and the blue one is very fast, so this helps a lot in predicting when they will overtake you so you are not surprised. It actually works really well in practice!

[akhileshbc]

The colors are the same as in the sim, so people know what they mean.
I didn't used it before. So, I was unaware of that. :)

Also, you can now see them grow when they are aproaching you, so you get a kind of warning that a faster car is aproaching. In this case, the pink car is slow and the blue one is very fast, so this helps a lot in predicting when they will overtake you so you are not surprised.
That would be awesome :thumb:

:wave:

[chris128]

Wow I really like the look of it, and I'm impressed with your plugin architecture - I've wanted to do something similar giving other people the ability to write plugins that my app could load didn't really have a clue where to start or how it would work.

[NickThissen]

In my case it's quite simple. I just have (in a separate project) a Plugin abstract class with some properties that the inheritor has to implement, like the title of the window and a Content property which is a UserControl displayed in the dockable pane. In my main app I check a folder for DLL files and load them into an Assembly object, from which I can get all the types that inherit Plugin. I create an instance of those types (Activator.CreateInstance), and for each type i create a new dockable pane into which i put the UserControl (what the Content property of the plugin returns). That's basically it. The plugins then have an abstract method that I call 4 times a second with new information from the sim, and they can do with that what they want :)