[VS2010] WPF First-timer... Advice on GUI?

[NickThissen]

Hey there,


I'm creating a radio streaming application which streams multiple radio stations and also displays the 'now playing' info, if available.

I've almost finished the core application, but I made it in winforms, and imo it looks ugly:

I've already tried to make it look better by applying a gradient to the label and the toolstrip, so that they match the media player control, but the combobox and the button on the lower right stick out like a sore thumb...

Usually, I like having my GUI match any windows application as closely as possible, by using as many standard looking controls as possible with little customization (unless it just fits), but for this radio streaming application it simply doesn't work. I think it's simply too small, and all controls are jammed together.


So, I wanted to brighten up the GUI, and I thought this was a great project to try WPF for the first time ever.

I've been trying some stuff for about an hour yesterday, and I got nowhere at all, neither with the actual creating of the GUI, nor with designing it in the first place


So I'm asking for your help. Does anyone have any idea what kind of style would look great on this little window? Perhaps a quick sketch or example screenshot would be nice!
And if you do have an idea, could you explain (without details) how I would go about creating that? Remember, I've never done WPF before so I'm a complete noob.

I'll sketch up some ideas of my own, but I'm having trouble figuring out what is possible, what is difficult to achieve, etc. I'll think of something and then I start wondering whether that might be too advanced for me to create... I don't want this to take ages, because the application is more or less finished in winforms and I don't want to delay it too long just to make it look good

Thanks for any idea's!

[DeanMc]

The thing is if you want it to look pretty your gonna have to spend time on it. This is where developers and designers grate. Both need an equal amount of time and both feel like they are more important than the other. Let me sketch up an idea for you, I'm no artist but it will give you a rough idea, I will try list the controls I would use also.

[chris128]

I would say if you dont want to have to spend quite a while on it making it look good then give up on the WPF idea. Unfortunately WPF isnt very user friendly when you first start using it, especially if you come from winforms, and takes quite a while to get used to / learn so I dont think trying to learn it in a rush to get an app out the door is going to get you anything other than frustrated.

Also, why does it need to be so small? I thought that was just the Windows 7 taskbar thumbnail thing when I first saw the screenshot.

[NickThissen]

Thanks Dean, I'm looking forward to seeing your ideas.

Chris: hm, that's what I thought. However, I want to learn it someday, and I think the only way I'm ever going to learn it is to just take a project and do it in WPF instead of winforms.
Perhaps I'll think of a new project to make in WPF, one that isn't in a 'rush' (well, this project isn't in a rush really, but I like to get this done soon).

How did you get into it? Did you stick with 'test projects' or did you just 'decide' to create a project in WPF instead?

[DeanMc]

Its crude but you get the Jist from it.

[DeanMc]

So the the controls:

Let me see can I mock this up for you in WPF

[DeanMc]

Ah bugger I cant, no VS 2010 for a few hours, doh. Its essentially standard controls, all the buttons are set to be see through and have some shapes in a grid and the text is simply labels.

[NickThissen]

Hehe, I like it. Not too far from what I had in my head, except for one thing that might be a problem.

The media player you see in my screenshot is an actual media player, and if you expand the form you can see it's 'video part'. If the user chooses Video he'll get a webcam stream instead of just the radio stream, so I need some place to put the webcam... I can't see any room for that in your sketch, and that is basically the problem I keep running into with my own ideas. I like to have the controls centered on the form, but the center must be basically empty to allow for the webcam :\

[DeanMc]

Nope, I thought of that, If the user selects a video stream then a section between the station name and the media buttons will expand to show a screen. If the user clicks on this screen we can bring them to full screen otherwise just keep it at a ratio which suits the control. This would be achieved by having a small section in the grid set to height = 1 and a control (Media Element maybe) set to the 0. Then we can apply an animation to the grid that when selected will cause it to smoothly grow along with the control.

[chris128]

How did you get into it? Did you stick with 'test projects' or did you just 'decide' to create a project in WPF instead?

I gradually got into it over a period of a few months really - every few weeks I would think right I'm gonna try do something basic in WPF, then I would try it, fail, get really annoyed, go back to winforms.... then repeat a few weeks later but get a bit further or try something new.
I think watching some tutorial videos and reading a WPF book was what really got me started though, then when I got comfortable with using Data Templates with the Listbox I found that helped a lot as you use lists in a lot of situations in a program but Data Templates can make them look like pretty much anything you want. For example below the textbox in the screenshot below is a listbox, with the green rectangle being an item (of course if there were more than just one item added to the list it would be a better example..) and the controls within each item being data bound, as the listbox is bound to a List(Of T). Plus you can make them interactive in whatever way you want, for example in my listbox I made it so that when an item is selected it expands to make more information visible and show a button (as soon in the second screenshot)





Another example of one of my apps, where each user in the list is an item in a listbox and the colour of the item and the icon are both automatically changed via data binding and converters:



As you can tell, I'm no pro and I tend to end up having rather similar looking programs at the moment as I dont know enough to make more fancy looking things yet, but I still prefer it over winforms any day It does make developing a program take twice as long though for me, because I spend almost as long on the visuals/design as I do on the code.

[DeanMc]

Where as I, on the other hand, decide to write a Xaml parser and pretty much had to learn most of the language to get the thing to work, fun times