User Interface

[Akhil]

I really liked Kaspersky's User Interface.

Is it possible to create some UI like that, using Telerik controls for WinForms ?

Thanks

[Richard Slade]

Hello,

If you can be more specific of the sort of items you are looking for, I'll do my best to help.
thanks
Richard

[Akhil]

Hi,

Thanks for the reply...

Here's a screenshot : click here to view the image

[Richard Slade]

Hello,

I see no reason why you shouldn't build somehting like this with the Telerik controls for WinForms.
Have a look at the following controls / products:

• RadForm
• RadPageView
• Visual Style Builder

I hope that helps. if you have further questions, please let me know
Richard

[Akhil]

Thanks again...

I think, that's a new control (RadPageView). I haven't seen that in Q1.

Is it possible to create the exact same menu structure, as you see in the figure (left-side main menus) ? If possible, can you make a quick example (no need to make it just like that, but it would be helpful to see a structure like that), if that doesn't consume more than a minute. :-)

[Richard Slade]

Hello,

This shows the start of getting the radPageView to look that way. Add 4 RadPageViewPages to a RadPageView on a form and add the following code

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    RadPageViewPage1.Text = "Protection Center"
    RadPageViewPage2.Text = "Safe Run"
    RadPageViewPage3.Text = "Scan"
    RadPageViewPage4.Text = "Tools"
    Me.RadPageView1.ViewElement.BackColor = Color.FromArgb(0, 64, 0)
    RadPageViewPage1.Item.TextOrientation = Orientation.Vertical
    RadPageViewPage2.Item.TextOrientation = Orientation.Vertical
    RadPageViewPage3.Item.TextOrientation = Orientation.Vertical
    RadPageViewPage4.Item.TextOrientation = Orientation.Vertical
    Me.RadPageView1.ViewElement.ContentArea.BackColor = Color.White
    For Each page As Telerik.WinControls.UI.RadPageViewPage In Me.RadPageView1.Pages
        page.Item.MinSize = New Size(100, 100)
        page.BackColor = Color.White
        page.Item.BackColor = Color.White
        page.Item.NumberOfColors = 1
    Next
End Sub

Whilst this is very basic, it will give you a good idea of the required steps to start customizing the RadPageView to look like your final product.
If you need more information, please let me know
thanks
Richard

[Richard Slade]

Hello,

did this help? If so, please remember to mark as answer. If you need more information, just let me know
Regards,
Richard

[Akhil]

Hi,

Sorry for being late.. I was busy with my studies :-)

Thanks for the code. I have downloaded the latest version (Q3) - only dlls.

Can you tell me which of these controls to be added in VB for using the RadPageView.

[Richard Slade]

Hello,

The RadPageView resides in the Telerik.WinControls.UI.dll assembly
Hope that helps
Richard

[Akhil]

Thanks :)

It's great.. I'll play with it and will let you know if I have any questions.

Is there a way to add reputation to the help offered by you ? I mean "rating" ? If so, I'm giving you 10 of 10 ;-)

PS: Sorry for being late :-)

[Richard Slade]

Hello,

I'm glad that helped. There's no way to 'rate' the answers, but marking the replies as answer is plenty. Thank you for your kind words.
Let me know if you have further questions.
Richard

[Akhil]

Hi..

How can I change the size of the button(tab) ?

I have tried reducing the page.Item.MinSize but it looks like the buttons will overlap each other.

Any ideas ?

Thanks :-)

[Richard Slade]

Hello,

Yes, you are doing the right thing. Please try this full exmaple and let me know how you get on

Designer File

<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Partial Class Form1
    Inherits System.Windows.Forms.Form

    'Form overrides dispose to clean up the component list.
    <System.Diagnostics.DebuggerNonUserCode()> _
    Protected Overrides Sub Dispose(ByVal disposing As Boolean)
        Try
            If disposing AndAlso components IsNot Nothing Then
                components.Dispose()
            End If
        Finally
            MyBase.Dispose(disposing)
        End Try
    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()
        Me.RadPageView1 = New Telerik.WinControls.UI.RadPageView()
        Me.RadPageViewPage1 = New Telerik.WinControls.UI.RadPageViewPage()
        Me.RadPageViewPage2 = New Telerik.WinControls.UI.RadPageViewPage()
        Me.RadPageViewPage3 = New Telerik.WinControls.UI.RadPageViewPage()
        Me.RadPageViewPage4 = New Telerik.WinControls.UI.RadPageViewPage()
        CType(Me.RadPageView1, System.ComponentModel.ISupportInitialize).BeginInit()
        Me.RadPageView1.SuspendLayout()
        Me.SuspendLayout()
        '
        'RadPageView1
        '
        Me.RadPageView1.Controls.Add(Me.RadPageViewPage1)
        Me.RadPageView1.Controls.Add(Me.RadPageViewPage2)
        Me.RadPageView1.Controls.Add(Me.RadPageViewPage3)
        Me.RadPageView1.Controls.Add(Me.RadPageViewPage4)
        Me.RadPageView1.Dock = System.Windows.Forms.DockStyle.Fill
        Me.RadPageView1.Location = New System.Drawing.Point(0, 0)
        Me.RadPageView1.Name = "RadPageView1"
        Me.RadPageView1.SelectedPage = Me.RadPageViewPage1
        Me.RadPageView1.Size = New System.Drawing.Size(696, 601)
        Me.RadPageView1.TabIndex = 0
        Me.RadPageView1.Text = "RadPageView1"
        CType(Me.RadPageView1.GetChildAt(0), Telerik.WinControls.UI.RadPageViewStripElement).StripButtons = Telerik.WinControls.UI.StripViewButtons.None
        CType(Me.RadPageView1.GetChildAt(0), Telerik.WinControls.UI.RadPageViewStripElement).ItemFitMode = Telerik.WinControls.UI.StripViewItemFitMode.Shrink
        CType(Me.RadPageView1.GetChildAt(0), Telerik.WinControls.UI.RadPageViewStripElement).StripAlignment = Telerik.WinControls.UI.StripViewAlignment.Left
        '
        'RadPageViewPage1
        '
        Me.RadPageViewPage1.Location = New System.Drawing.Point(37, 10)
        Me.RadPageViewPage1.Name = "RadPageViewPage1"
        Me.RadPageViewPage1.Size = New System.Drawing.Size(648, 580)
        Me.RadPageViewPage1.Text = "RadPageViewPage1"
        '
        'RadPageViewPage2
        '
        Me.RadPageViewPage2.Location = New System.Drawing.Point(37, 10)
        Me.RadPageViewPage2.Name = "RadPageViewPage2"
        Me.RadPageViewPage2.Size = New System.Drawing.Size(526, 471)
        Me.RadPageViewPage2.Text = "RadPageViewPage2"
        '
        'RadPageViewPage3
        '
        Me.RadPageViewPage3.Location = New System.Drawing.Point(37, 10)
        Me.RadPageViewPage3.Name = "RadPageViewPage3"
        Me.RadPageViewPage3.Size = New System.Drawing.Size(526, 471)
        Me.RadPageViewPage3.Text = "RadPageViewPage3"
        '
        'RadPageViewPage4
        '
        Me.RadPageViewPage4.Location = New System.Drawing.Point(37, 10)
        Me.RadPageViewPage4.Name = "RadPageViewPage4"
        Me.RadPageViewPage4.Size = New System.Drawing.Size(526, 471)
        Me.RadPageViewPage4.Text = "RadPageViewPage4"
        '
        'Form1
        '
        Me.AutoScaleDimensions = New System.Drawing.SizeF(6.0!, 13.0!)
        Me.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font
        Me.BackColor = System.Drawing.Color.FromArgb(CType(CType(0, Byte), Integer), CType(CType(64, Byte), Integer), CType(CType(0, Byte), Integer))
        Me.ClientSize = New System.Drawing.Size(696, 601)
        Me.Controls.Add(Me.RadPageView1)
        Me.Name = "Form1"
        Me.Text = "Form1"
        CType(Me.RadPageView1, System.ComponentModel.ISupportInitialize).EndInit()
        Me.RadPageView1.ResumeLayout(False)
        Me.ResumeLayout(False)

    End Sub
    Friend WithEvents RadPageView1 As Telerik.WinControls.UI.RadPageView
    Friend WithEvents RadPageViewPage1 As Telerik.WinControls.UI.RadPageViewPage
    Friend WithEvents RadPageViewPage2 As Telerik.WinControls.UI.RadPageViewPage
    Friend WithEvents RadPageViewPage3 As Telerik.WinControls.UI.RadPageViewPage
    Friend WithEvents RadPageViewPage4 As Telerik.WinControls.UI.RadPageViewPage

End Class

Form1.vb

Imports Telerik.WinControls
Imports Telerik.WinControls.Localization
Imports Telerik.WinControls.UI
Imports Telerik.WinControls.UI.Localization


Public Class Form1


    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        RadPageViewPage1.Text = "Protection Center"
        RadPageViewPage2.Text = "Safe Run"
        RadPageViewPage3.Text = "Scan"
        RadPageViewPage4.Text = "Tools"
        Me.RadPageView1.ViewElement.BackColor = Color.FromArgb(0, 64, 0)
        RadPageViewPage1.Item.TextOrientation = Orientation.Vertical
        RadPageViewPage2.Item.TextOrientation = Orientation.Vertical
        RadPageViewPage3.Item.TextOrientation = Orientation.Vertical
        RadPageViewPage4.Item.TextOrientation = Orientation.Vertical
        Me.RadPageView1.ViewElement.ContentArea.BackColor = Color.White
        For Each page As Telerik.WinControls.UI.RadPageViewPage In Me.RadPageView1.Pages
            page.Item.MinSize = New Size(200, 100)
            page.BackColor = Color.White
            page.Item.BackColor = Color.White
            page.Item.NumberOfColors = 1
        Next
    End Sub


End Class

Regards,
Richard

[Akhil]

Hi...

Click here to see the result

What I'm trying to do is, reduce the height of those buttons. Because it looks like a bit more than what we need. So, I'm trying to find out a way to reduce the height and increase the width.

Thanks again for the continuous support offered by you.

I love to create nice looking apps. But what I did so far (in VB6, because I have started VB.Net now only :-) ) is to use Photoshop to develop the background and use them in the app.

But Telerik seems to be providing more flexible and easy solutions to develop beautiful interfaces. :-)

Where can I get some new themes (other than the default one provided) ?

[Richard Slade]

Hello,

There seems to be an issue when the tabs are set to the left with sizing. i will try and find a workaround for you and let you know if I can come up with something.

Regardsing the themes, apart from the themes that come with the controls, you can make up your own themes at a very granular level, for each element of each control. Please have a look at the documentation on the Visual Style Builder to get started with this.

i'll let you know if I can come up with a solution for the tabs
Regards,
Richard

[Akhil]

Thanks :-)

[Richard Slade]

Hello,

Just to let you know even though I haven't found a workaround at the moment, it looks like this may be a small bug that will need to be fixed in an upcoming release.

This works (setting the tabs to the top)

RadPageViewPage1.Text = "Protection Center"
RadPageViewPage2.Text = "Safe Run"
RadPageViewPage3.Text = "Scan"
RadPageViewPage4.Text = "Tools"
Me.RadPageView1.ViewElement.BackColor = Color.FromArgb(0, 64, 0)
RadPageViewPage1.Item.TextOrientation = Orientation.Vertical
RadPageViewPage2.Item.TextOrientation = Orientation.Vertical
RadPageViewPage3.Item.TextOrientation = Orientation.Vertical
RadPageViewPage4.Item.TextOrientation = Orientation.Vertical
Me.RadPageView1.ViewElement.ContentArea.BackColor = Color.White
CType(Me.RadPageView1.GetChildAt(0), Telerik.WinControls.UI.RadPageViewStripElement).StripAlignment = Telerik.WinControls.UI.StripViewAlignment.Top
For Each page As Telerik.WinControls.UI.RadPageViewPage In Me.RadPageView1.Pages
    page.Item.MinSize = New Size(50, 250)
    page.Item.Size = New Size(50, 250)
    page.BackColor = Color.White
    page.Item.BackColor = Color.White
    page.Item.NumberOfColors = 1
Next

Whereas this..

RadPageViewPage1.Text = "Protection Center"
RadPageViewPage2.Text = "Safe Run"
RadPageViewPage3.Text = "Scan"
RadPageViewPage4.Text = "Tools"
Me.RadPageView1.ViewElement.BackColor = Color.FromArgb(0, 64, 0)
RadPageViewPage1.Item.TextOrientation = Orientation.Vertical
RadPageViewPage2.Item.TextOrientation = Orientation.Vertical
RadPageViewPage3.Item.TextOrientation = Orientation.Vertical
RadPageViewPage4.Item.TextOrientation = Orientation.Vertical
Me.RadPageView1.ViewElement.ContentArea.BackColor = Color.White
CType(Me.RadPageView1.GetChildAt(0), Telerik.WinControls.UI.RadPageViewStripElement).StripAlignment = Telerik.WinControls.UI.StripViewAlignment.Left
For Each page As Telerik.WinControls.UI.RadPageViewPage In Me.RadPageView1.Pages
    page.Item.MinSize = New Size(50, 250)
    page.Item.Size = New Size(50, 250)
    page.BackColor = Color.White
    page.Item.BackColor = Color.White
    page.Item.NumberOfColors = 1
Next

has the issues that you mentioned. However, I've also looked in PITS (the Telerik Public Issue Tracking System) and there is a request for resizing tabs here

I hope that helps
Richard

[Akhil]

Thanks :-)

Hmm... I have voted for that issue. Let's hope that it will be added in the next release. There are 219 open requests and only 1 completed and 1 in progress !

So is there a chance of getting it resolved ? Maybe, the development team of Telerik is busy with the coding of rest of the tools. :-(

[Richard Slade]

Hello again,

The view in PITS that you are seeing is filtered to "Not Scheduled", so these are the items that have not been allocated a release date as yet (there are many many more that are in the Q1 2011 Release).
If you've got any other questions, just let me know
Richard

[Akhil]

Ok.. Thanks.. :-)