GUI Design

[LeeSalter]

I was just wondering about the design of the GUI in my app.
It's a bit bland really and doesn't really excite.

How do you guys and gals go about designing a really good, nice-looking, functional GUI?

Do you have any links to sites with examples of a good Windows Application Interface etc? Good book recommendations etc??

[JPicasso]

Find an application you find easy to use,
and copy it.

[LeeSalter]

LOL!!

Cheers mate.

Not quite the answer I was looking for.....with your username I'd have thought you might be able to help me in this area!!

[LeeSalter]

Well, this is my design as it is so far.....any comments would be greatly appreciated.....

[JPicasso]

Looks good to me.

Simple and effective. Much better than some interfaces where every frame is a different rainbow color or the graphics get in the way of the functionality.



I like it so much I may copy it.

[VBGuy]

Here is a shot of a project I am nearly finished with. Hope it helps.

[LeeSalter]

That does look good VBGuy I must admit.
Like the colours especially (cornflower blue, is that?)......

Thanks for the feedback Picasso, mate.....feel free to copy it! I'll take it as a compliment.

Anybody else got any comment?

[VBGuy]

Actually, the blue is from the current selected windows theme (which is right now set to the default blue). The side panel is from Dacris' control set and it fully integrates with the windows theme.

[nemaroller]

I would ditch the yellow background.... gray tones or faded colors look more professional.. otherwise looks good.

[LeeSalter]

Thanks for that.

I'll try some differing colour schemes and stuff and maybe post some of my faves.

[LeeSalter]

VBGuy,

How did you get the blue fading to white in your GUI (the
Movement Forecasting part). Is that a graphic inside a panel or something??

[VBGuy]

Actually, that is a graphic. I have the luxury of our users being locked into using the default blue theme exclusively (or so the network admin tells me) so I just created that gradient in photoshop and included it. If they werent locked in I guess I would have had to create the gradient in code going from the left taskpane backcolor (or whatever system color that is using) to white.

[LeeSalter]

It looks good mate. I like it.

[VBGuy]

Thanks.

[LITHIA]

yeah, very pretty. would be interesting to see the code to make that gradiant depending upon the system colours actually.

i think that would be a good thing to do anyway. it might be a learning experience, and it would be more efficient as you don't need to have a bitmap or other image format bundled with your exe, reduces the size.

although whatever really, just wud be interesting to see the code to do that. i haven't worked with graphics before in code

[VBGuy]

LITHIA,

Odd you should mention that! I just got up to take a leak not 5 minutes ago and I said to myself, "Hey, why not just code that gradiant this afternoon and scrape the image..."

[LITHIA]

hehe, i must be pyschic

can you include the code you write please? dat wud be interesting! thanks

[LeeSalter]

I'd be very interested in doing that too!!

I will have a go myself and post back here.

[VBGuy]

Originally posted by LITHIA
hehe, i must be pyschic

can you include the code you write please? dat wud be interesting! thanks

OK, this is my code. First I draw a solid white rectangle 31 pixels high and the width of the form. I then draw the gradient rectangle on top of the white. I did this because I could not find a quick way to adjust the gradient fade rate. This solution puts the gradient on only half of the form width so we still get the nice white half. Finally, I draw the black border around the rectangle.

The only additional line of code in the OnResize event. That line is
Me.Refresh

My next step would be to draw the text as well but since a label works, I'm not too interested in adding that step at this time.

Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
 
        Dim g As Graphics = e.Graphics
        Dim startColor As Color = Color.CornflowerBlue
        Dim halfRect As Rectangle = New Rectangle(0, 0, Me.Width \ 2, 31)
        Dim rect As Rectangle = New Rectangle(0, 0, Me.Width + 50, 31)
 
        Dim MyPen As Pen = New Pen(Color.Black)
        Dim MyBrush As LinearGradientBrush = New LinearGradientBrush(halfRect, startColor, Color.White, LinearGradientMode.Horizontal)
        Dim MyBackFillBrush As SolidBrush = New SolidBrush(Color.White)
 
        g.FillRectangle(MyBackFillBrush, rect)
        g.FillRectangle(MyBrush, halfRect)
        g.DrawRectangle(MyPen, rect)
 
    End Sub

As you can see it is pretty close to the original

[nemaroller]

"The smoothing mode specifies whether lines, curves, and the edges of filled areas use smoothing (also called antialiasing). One exception is that path gradient brushes do not obey the smoothing mode. Areas filled using a PathGradientBrush object are rendered the same way (aliased) regardless of the SmoothingMode property."

LinearGradients don't fall into that category I believe... so you could make it look even purdier...

[VBGuy]

Actually, I bumped the image for the post down to 256 colors to keep the size down. In real life it looks smooth as a babies bottom.

Also, I am still trying to hook the startcolor to the theme so for now it is hard coded to CornflowerBlue.

[LeeSalter]

OK. This is what I have.

Create a new Control Library project and paste this code into it..

Imports System.ComponentModel
Imports System.Drawing.Drawing2D
 
Public Class GradientBackground
    Inherits System.Windows.Forms.Control
 
#Region " Windows Form Designer generated code "
 
    Public Sub New()
        MyBase.New()
 
        'This call is required by the Windows Form Designer.
        InitializeComponent()
 
        'Add any initialization after the InitializeComponent() call
 
    End Sub
 
    'UserControl1 overrides dispose to clean up the component list.
    Protected Overloads Overrides Sub Dispose(ByVal disposing As Boolean)
        If disposing Then
            If Not (components Is Nothing) Then
                components.Dispose()
            End If
        End If
        MyBase.Dispose(disposing)
    End Sub
 
    'Required by the Windows Form Designer
    Private components As System.ComponentModel.IContainer
 
    'NOTE: The following procedure is required by the Windows Form Designer
    'It can be modified using the Windows Form Designer.  
    'Do not modify it using the code editor.
    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
        '
        'GradientBackground
        '
        Me.Name = "GradientBackground"
        Me.Size = New System.Drawing.Size(632, 24)
 
    End Sub
 
#End Region
 
    'The start color property
    Dim m_StartColor As Color = Color.CornflowerBlue
 
    <Description("The start color for the gradient")> _
        Property StartColor() As Color
        Get
            Return m_StartColor
        End Get
        Set(ByVal Value As Color)
            m_StartColor = Value
            'Redraw the control when this property changes
            Me.Invalidate()
        End Set
    End Property
 
    Sub ResetStartColor()
        m_StartColor = Color.CornflowerBlue
    End Sub
 
    Function ShouldSerializeStartColor() As Boolean
        Return Not m_StartColor.Equals(Color.CornflowerBlue)
    End Function
 
    'The end color property
    Dim m_EndColor As Color = Color.Goldenrod
 
    <Description("The end color for the gradient")> _
        Property EndColor() As Color
        Get
            Return m_EndColor
        End Get
        Set(ByVal Value As Color)
            m_EndColor = Value
            'Redraw the control if this value changes
            Me.Invalidate()
        End Set
    End Property
 
    Sub ResetEndColor()
        m_EndColor = Color.Goldenrod
    End Sub
 
    Function ShouldSerializeEndColor() As Boolean
        Return Not m_EndColor.Equals(Color.Goldenrod)
    End Function
 
    'The gradient mode property
    Dim m_GradientMode As LinearGradientMode = _
        LinearGradientMode.ForwardDiagonal
 
    <Description("The gradient mode"), _
        DefaultValue(LinearGradientMode.ForwardDiagonal)> _
        Property GradientMode() As LinearGradientMode
        Get
            Return m_GradientMode
        End Get
 
        Set(ByVal Value As LinearGradientMode)
            m_GradientMode = Value
            'Redraw when changed
            Me.Invalidate()
        End Set
    End Property
 
    'Render the control background
    Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
        'Create a gradient brush as a large client area with specified
        'start/end color and gradient mode.
        Dim br As New LinearGradientBrush(Me.ClientRectangle, _
            m_StartColor, m_EndColor, m_GradientMode)
        'paint the rectangle
        e.Graphics.FillRectangle(br, Me.ClientRectangle)
        'destroy the brush
        br.Dispose()
        'let the base control do the work...
        MyBase.OnPaint(e)
 
    End Sub
 
    Private Sub GradientBackground_Resize(ByVal sender As Object, _
    ByVal e As EventArgs)
        Me.Invalidate()
    End Sub

Now, add the new control to your toolbar, drag an instance to your form and you have a background gradient control that you can set start and end colors for as well as the gradient path.

Got to be honest - I ripped this out of Balena's book, but it works a treat!

[LITHIA]

move the black box one pixel to the left.

if you notice, you got the edge on the left of the box showing. it's alright on the right tho, may not be when u move it so u might have to resize too

[Wallabie]

VBGuy:

How did you get the images on the buttons in the bottom corner with XP style? Is this a 3rd party control?

And is the "Pricing" & "Costs" rectangles a control as well or is it just a rounded rectangle with a label over the top bit, because thats the way i do it.

[VBGuy]

LITHIA,

I noticed the one pixel thing and fixed it after I did the screen shot. Nice catch.

Wallabie,

I am using a third party class that extends the visual styles. That allows the button graphics and the look of the tab control. I'll post on Monday the name of the extender class (I'm home now and don't remember the name).

[Wallabie]

Thanks VBGuy

[VBGuy]

Wallabie,

The extender class is from Skybound

It is one line of code at the project level and one line of code per form. Pretty easy to use.

[marvinklein]

vbGuy -

how do you get those collapsing menus on the left side of your app?

[VBGuy]

Originally posted by marvinklein
vbGuy -

how do you get those collapsing menus on the left side of your app?

Those are from the NetXP controls suite by Dacris

[Wallabie]

Thank you VBGuy, i'll look into that.

I have VS 2002 and using the v1.0 Framework so hopefully it will still work ok with a manifest file.

[Word2]

Since this is related to this, I figured I would ask my quetion here rather then post a new one.

I made a dropdown list box. And It's supposed to change the backround editor to a color.

So what I mean is. If I name one of them red.
I would show in the main file thing (where I want the backround color changed) that it should be
form.color ?

I wish I could give a better example.

[LeeSalter]

Originally posted by VBGuy
Those are from the NetXP controls suite by Dacris

VBGuy,

Do these controls move up/down when expanding collapsing, or are your title bars spaced quite far apart when they are both collapsed?

I've got the controls myself, but it looks quite ugly when they are all collapsed, due to lots of space between them!!

TIA

[TLord]

Thanks VBGuy, I tried NetXP Controls Suite and it's just GREAT.

[LeeSalter]

Originally posted by LeeSalter
VBGuy,

Do these controls move up/down when expanding collapsing, or are your title bars spaced quite far apart when they are both collapsed?

I've got the controls myself, but it looks quite ugly when they are all collapsed, due to lots of space between them!!

TIA

Me being stupid! You have to put the Xpane Group controls inside the XPane control to have them move.

Still can't work out how to change the colour of the XPane background though! (I'm working on a W2K machine).

[LeeSalter]

OK.

Comments please on my new GUI design.

TIA

[TLord]

Originally posted by LeeSalter
OK.

Comments please on my new GUI design.

TIA

Stop kidding around, the important is the core of your software - the internal functions and capabilities - . I personally use the EnableVisualStyle() function at startup for using WindowsXP interface, but believe me: I myself ignore the GUI after a short time, you will probably get busy with working and finishing the work you developped that app for.

[LeeSalter]

I know that TLord. However, we all work differently don't we.

I like to get my GUI design nice and tight, looking good before getting into the mechnics of the code, otherwise I find myself re-writing all sorts of stuff if I'm unhappy with my GUI and changing it all the time.

Thanks for your comments though mate, interesting to see how different people work.

Cheers.

[TLord]

Right' defferent people have defferent ideaologies.

I've forgot to write one thing in my last reply: actually I have dozens of data, XML, confoguration, resource and media files in my application, so pushing DLL and other stuff - as I think - for using 3rd party components just won't go, because I organize all my files in individual folders, while - as I know - DLL references can't be moved from direct absulote path the executable.

If anyone knows how to move reference libraries (DLLs) from there by customization, please reply in this thread because this will help me a lot, and I think also many members will penifit from that.

[Zoot]

Originally posted by LeeSalter
OK. This is what I have.


Now, add the new control to your toolbar, drag an instance to your form and you have a background gradient control that you can set start and end colors for as well as the gradient path.

Got to be honest - I ripped this out of Balena's book, but it works a treat!

This is indeed very nice, and easy to use. I have added a panel coloured black to give a 1-pixel edge, and added teh gradient over the top of the panel (two pixels less in depth and height than the panel). If, however, I add a label as well, the text always appears underneath the gradient, not on top. Any ideas?

[ShindaSingh]

VBGuy thanks for posting the link for Skybound extenders.

I'm a fresh newbie when it comes to .NET, and I've been following the instructions on how to install and activate the extender class, but was confused about one thing.

In the documentation it says:

In addition to adding a VisualStyleProvider component to each form, you must call the VisualStyleProvider.EnableVisualStyles before Application.Run in your program entry point:


[Visual Basic]

Public Shared <STAThread()> _
Sub Main()
Skybound.VisualStyles.VisualStyleProvider.EnableVisualStyles()
Application.Run(New Form1())
End Sub

Where exactly in my Visual Basic Project do I paste this code? I've tried a few different things all of them to no avail.

Hopefully someone can help

Thanks in advance.