Optimisation de mon application (affichage d'objets)

**furious.builder** · 05/04/2015, 12h13

Bonjour à tous, je suis en train de développer une application et j'aimerai une alternative à ce que je fais , car c'est plutôt très loin d'être pratique...
Je vous explique la situation : le TabControl ne me convenant pas, des boutons sur la gauches vont tout simplement modifier le texte des labels, les cacher, les afficher, etc...
Le rendu actuel :

]

Cependant c'est plutôt galère à modifier et me limite quand au choix du design. J'ai essayé d'afficher et de cacher de panels mais c'est très lent et l'application "clignote" plusieurs fois du blancs à l'affichage normal.
Je précise que je suis plutôt débutant en développement.

Auriez-vous une idée ? Merci beaucoup !

**wallace1** · 05/04/2015, 13h07

Bonjour,

Il est clair que ton système de bouton qui affiche ou cache des contrôles n'est absolument pas viable !
Tu devrais explorer la solution qui vise à créer une extension du tabcontrol. Ou bien il existe des thèmes avec des tabcontrol customisés.

A+

**furious.builder** · 05/04/2015, 13h16

J'ai essayé notamment ce tabcontrol : http://www.ultimateprogrammingtutori...-in-vbnet.html mais la tabpage blanche n'est pas du plus bel effet, et en remplaçant white par transparent, on se retrouve avec de jolis bugs graphiques :/
Où puis-je trouver des thèmes avec tabcontrols customisés ?

**wallace1** · 05/04/2015, 13h47

Envoyé par furious.builder

Où puis-je trouver des thèmes avec tabcontrols customisés ?

Il n'existe pas d'endroit spécifique pour trouver ce genre de thème ....... Google reste ta meilleure option (theme VBNET).

Voilà un custom Tabcontrol qu je viens de trouver (auteur AeonHack = concepteur très réputé) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
 
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Threading.Tasks
Imports System.Drawing.Drawing2D
Imports System.Windows.Forms
Imports System.Drawing
Imports System.ComponentModel
 
 
Friend Class DotNetBarTabcontrol
    Inherits TabControl
    <DesignerSerializationVisibility(DesignerSerializationVisibility.Content)> _
    <DefaultValue(False)> _
    Private _DrawPointer As Boolean = False
    Public Property DrawPointer() As Boolean
        Get
            Return _DrawPointer
        End Get
        Set(value As Boolean)
            _DrawPointer = value
        End Set
    End Property
    Public Function RoundRect(Rectangle As Rectangle, Curve As Integer) As GraphicsPath
        Dim P As New GraphicsPath()
        Dim ArcRectangleWidth As Integer = Curve * 2
        P.AddArc(New Rectangle(Rectangle.X, Rectangle.Y, ArcRectangleWidth, ArcRectangleWidth), -180.0F, 90.0F)
        P.AddArc(New Rectangle(Rectangle.Width - ArcRectangleWidth + Rectangle.X, Rectangle.Y, ArcRectangleWidth, ArcRectangleWidth), -90.0F, 90.0F)
        P.AddArc(New Rectangle(Rectangle.Width - ArcRectangleWidth + Rectangle.X, Rectangle.Height - ArcRectangleWidth + Rectangle.Y, ArcRectangleWidth, ArcRectangleWidth), 0.0F, 90.0F)
        P.AddArc(New Rectangle(Rectangle.X, Rectangle.Height - ArcRectangleWidth + Rectangle.Y, ArcRectangleWidth, ArcRectangleWidth), 90.0F, 90.0F)
        P.AddLine(New Point(Rectangle.X, Rectangle.Height - ArcRectangleWidth + Rectangle.Y), New Point(Rectangle.X, Curve + Rectangle.Y))
        Return P
    End Function
    Public Function RoundRect(X As Integer, Y As Integer, Width As Integer, Height As Integer, Curve As Integer) As GraphicsPath
        Dim Rectangle As New Rectangle(X, Y, Width, Height)
        Dim P As New GraphicsPath()
        Dim ArcRectangleWidth As Integer = Curve * 2
        P.AddArc(New Rectangle(Rectangle.X, Rectangle.Y, ArcRectangleWidth, ArcRectangleWidth), -180.0F, 90.0F)
        P.AddArc(New Rectangle(Rectangle.Width - ArcRectangleWidth + Rectangle.X, Rectangle.Y, ArcRectangleWidth, ArcRectangleWidth), -90.0F, 90.0F)
        P.AddArc(New Rectangle(Rectangle.Width - ArcRectangleWidth + Rectangle.X, Rectangle.Height - ArcRectangleWidth + Rectangle.Y, ArcRectangleWidth, ArcRectangleWidth), 0.0F, 90.0F)
        P.AddArc(New Rectangle(Rectangle.X, Rectangle.Height - ArcRectangleWidth + Rectangle.Y, ArcRectangleWidth, ArcRectangleWidth), 90.0F, 90.0F)
        P.AddLine(New Point(Rectangle.X, Rectangle.Height - ArcRectangleWidth + Rectangle.Y), New Point(Rectangle.X, Curve + Rectangle.Y))
        Return P
    End Function
    Public Sub New()
        SetStyle(ControlStyles.AllPaintingInWmPaint Or ControlStyles.ResizeRedraw Or ControlStyles.UserPaint Or ControlStyles.DoubleBuffer, True)
        DoubleBuffered = True
        SizeMode = TabSizeMode.Fixed
        ItemSize = New Size(35, 85)
    End Sub
    Protected Overrides Sub CreateHandle()
        MyBase.CreateHandle()
        Alignment = TabAlignment.Left
    End Sub
 
    Public Function ToPen(color As Color) As Pen
        Return New Pen(color)
    End Function
 
    Public Function ToBrush(color As Color) As Brush
        Return New SolidBrush(color)
    End Function
 
    Protected Overrides Sub OnPaint(e As PaintEventArgs)
        Dim B As New Bitmap(Width, Height)
        Dim G As Graphics = Graphics.FromImage(B)
        Try
            SelectedTab.BackColor = Color.White
        Catch
        End Try
        G.Clear(Parent.FindForm().BackColor)
        G.FillRectangle(New SolidBrush(Color.FromArgb(96, 110, 121)), New Rectangle(0, 0, ItemSize.Height + 4, Height))
        For i As Integer = 0 To TabCount - 1
            If i = SelectedIndex Then
                Dim x2 As New Rectangle(New Point(GetTabRect(i).Location.X - 2, GetTabRect(i).Location.Y - 2), New Size(GetTabRect(i).Width + 3, GetTabRect(i).Height - 1))
                Dim myBlend As New ColorBlend()
                myBlend.Colors = New Color() {Color.FromArgb(96, 110, 121), Color.FromArgb(96, 110, 121), Color.FromArgb(96, 110, 121)}
                myBlend.Positions = New Single() {0.0F, 0.5F, 1.0F}
                Dim lgBrush As New LinearGradientBrush(x2, Color.Black, Color.Black, 90.0F)
                lgBrush.InterpolationColors = myBlend
                G.FillRectangle(lgBrush, x2)
                G.DrawRectangle(New Pen(Color.FromArgb(96, 110, 121)), x2)
                Dim tabRect As New Rectangle(GetTabRect(i).Location.X + 4, GetTabRect(i).Location.Y + 2, GetTabRect(i).Size.Width + 10, GetTabRect(i).Size.Height - 11)
                G.FillPath(New SolidBrush(Color.FromArgb(80, 90, 100)), RoundRect(tabRect, 5))
                G.DrawPath(New Pen(Color.FromArgb(67, 77, 87)), RoundRect(New Rectangle(tabRect.X + 1, tabRect.Y + 1, tabRect.Width - 1, tabRect.Height - 2), 5))
                G.DrawPath(New Pen(Color.FromArgb(115, 125, 135)), RoundRect(tabRect, 5))
 
                G.SmoothingMode = SmoothingMode.HighQuality
 
                If _DrawPointer Then
                    Dim p As Point() = New Point() {New Point(ItemSize.Height - 3, GetTabRect(i).Location.Y + 20), New Point(ItemSize.Height + 4, GetTabRect(i).Location.Y + 14), New Point(ItemSize.Height + 4, GetTabRect(i).Location.Y + 27)}
                    G.FillPolygon(Brushes.White, p)
                    Invalidate()
                End If
 
                If ImageList IsNot Nothing Then
                    Try
                        If ImageList.Images(TabPages(i).ImageIndex) IsNot Nothing Then
 
                            G.DrawImage(ImageList.Images(TabPages(i).ImageIndex), New Point(x2.Location.X + 8, x2.Location.Y + 6))
                            G.DrawString("      " + TabPages(i).Text.ToUpper(), New Font(Font.FontFamily, Font.Size, FontStyle.Bold), Brushes.White, x2, New StringFormat() With { _
                                 .LineAlignment = StringAlignment.Center, _
                                 .Alignment = StringAlignment.Center _
                            })
                        Else
                            G.DrawString(TabPages(i).Text.ToUpper(), New Font(Font.FontFamily, Font.Size, FontStyle.Bold), Brushes.White, x2, New StringFormat() With { _
                                 .LineAlignment = StringAlignment.Center, _
                                 .Alignment = StringAlignment.Center _
                            })
                        End If
                    Catch ex As Exception
                        G.DrawString(TabPages(i).Text.ToUpper(), New Font(Font.FontFamily, Font.Size, FontStyle.Bold), Brushes.White, x2, New StringFormat() With { _
                             .LineAlignment = StringAlignment.Center, _
                             .Alignment = StringAlignment.Center _
                        })
                    End Try
                Else
                    G.DrawString(TabPages(i).Text.ToUpper(), New Font(Font.FontFamily, Font.Size, FontStyle.Bold), Brushes.White, x2, New StringFormat() With { _
                         .LineAlignment = StringAlignment.Center, _
                         .Alignment = StringAlignment.Center _
                    })
                End If
 
                G.DrawLine(New Pen(Color.FromArgb(96, 110, 121)), New Point(x2.Location.X - 1, x2.Location.Y - 1), New Point(x2.Location.X, x2.Location.Y))
                G.DrawLine(New Pen(Color.FromArgb(96, 110, 121)), New Point(x2.Location.X - 1, x2.Bottom - 1), New Point(x2.Location.X, x2.Bottom))
            Else
                Dim x2 As New Rectangle(New Point(GetTabRect(i).Location.X - 2, GetTabRect(i).Location.Y - 2), New Size(GetTabRect(i).Width + 3, GetTabRect(i).Height + 1))
                G.FillRectangle(New SolidBrush(Color.FromArgb(96, 110, 121)), x2)
                G.DrawLine(New Pen(Color.FromArgb(96, 110, 121)), New Point(x2.Right, x2.Top), New Point(x2.Right, x2.Bottom))
                If ImageList IsNot Nothing Then
                    Try
                        If ImageList.Images(TabPages(i).ImageIndex) IsNot Nothing Then
                            G.DrawImage(ImageList.Images(TabPages(i).ImageIndex), New Point(x2.Location.X + 8, x2.Location.Y + 6))
                            G.DrawString("      " + TabPages(i).Text, Font, Brushes.White, x2, New StringFormat() With { _
                                 .LineAlignment = StringAlignment.Near, _
                                 .Alignment = StringAlignment.Near _
                            })
                        Else
                            G.DrawString(TabPages(i).Text.ToUpper(), New Font(Font.FontFamily, Font.Size, FontStyle.Bold), New SolidBrush(Color.FromArgb(210, 220, 230)), x2, New StringFormat() With { _
                                 .LineAlignment = StringAlignment.Center, _
                                 .Alignment = StringAlignment.Center _
                            })
                        End If
                    Catch ex As Exception
                        G.DrawString(TabPages(i).Text.ToUpper(), New Font(Font.FontFamily, Font.Size, FontStyle.Bold), New SolidBrush(Color.FromArgb(210, 220, 230)), x2, New StringFormat() With { _
                             .LineAlignment = StringAlignment.Center, _
                             .Alignment = StringAlignment.Center _
                        })
                    End Try
                Else
                    G.DrawString(TabPages(i).Text.ToUpper(), New Font(Font.FontFamily, Font.Size, FontStyle.Bold), New SolidBrush(Color.FromArgb(210, 220, 230)), x2, New StringFormat() With { _
                         .LineAlignment = StringAlignment.Center, _
                         .Alignment = StringAlignment.Center _
                    })
                End If
            End If
            G.FillPath(Brushes.White, RoundRect(New Rectangle(86, 0, Width - 89, Height - 3), 5))
            G.DrawPath(New Pen(Color.FromArgb(65, 75, 85)), RoundRect(New Rectangle(86, 0, Width - 89, Height - 3), 5))
        Next
 
        e.Graphics.DrawImage(DirectCast(B.Clone(), Image), 0, 0)
        G.Dispose()
        B.Dispose()
    End Sub
End Class

1- Tu ajoutes une classe à ton projet que tu nommes par exemple : TabControlEx
2- Tu te mets en mode concepteur de vues
3- Tu régénères ton projet
4- Tu te rends dans la boite à outils (partie composants de ton projet), tu repères le controle TabControlEx et tu le fais glisser su ton formulaire.

A toi d'agrémenter ce contrôle et de l'adapter à tes besoins. A noter qu'il est possible d'ajouter un contrôle ImageList pour ajouter des images à chaque tabpage.

A+

**furious.builder** · 05/04/2015, 14h59

Merci beaucoup

Par contre cela fait appelle à beaucoup de fonctions que je ne connais pas... Est-il possible via l'exemple que tu viens de me donner de réaliser un rendu "flat" comme sur les screens de mon premier post ? Et est-il possible de rendre la tabpage transparente sans faire tout bugger ?

EDIT : J'en ai trouvé un sympa et métro : http://www.ultimateprogrammingtutori...for-vbnet.html Le problème c'est que comme c'est un .dll, Visual Studio ne me laisse pas la possibilité de modifier la couleur du panel, comment puis-je faire ? (Et toujours impossible de mettre une image en Background ou de mettre en transparent du coup...

**wallace1** · 05/04/2015, 16h57

Il est tout à fait possible de le modifier mais si les notions GDI te sont méconnu alors cela risque d'être compliqué....

Voilà un autre contrôle plus flat (by Darko155) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
Imports System.Drawing.Drawing2D
 
'Made by Darko155
 
Public Class TabControlClass
    Inherits Windows.Forms.TabControl
 
    Dim LightColor As Color = Color.FromArgb(95, 105, 127)
    Dim DarkColor As Color = Color.FromArgb(71, 80, 100)
    Dim LightBrush As New SolidBrush(LightColor)
    Dim DarkBrush As New SolidBrush(DarkColor)
    Dim NotSelectedColor As New SolidBrush(Color.FromArgb(90, 102, 127))
 
 
    Sub New()
        SetStyle(ControlStyles.UserPaint Or ControlStyles.Opaque Or ControlStyles.ResizeRedraw Or ControlStyles.AllPaintingInWmPaint Or ControlStyles.Opaque, True)
        SetStyle(ControlStyles.Selectable, False)
        Dock = DockStyle.Fill
        SizeMode = TabSizeMode.Fixed
        Alignment = TabAlignment.Left
        ItemSize = New Size(25, 120)
        DrawMode = TabDrawMode.OwnerDrawFixed
        Font = New Font("Verdana", 8)
    End Sub
 
    Protected Overrides Sub CreateHandle()
        MyBase.CreateHandle()
        Alignment = TabAlignment.Left
    End Sub
 
    Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
        Dim bm As New Bitmap(Width, Height)
        Dim g As Graphics = Graphics.FromImage(bm)
        g.Clear(DarkColor)
        g.SmoothingMode = SmoothingMode.AntiAlias
 
        For i = 0 To TabCount - 1
            Dim TabRectangle As Rectangle = GetTabRect(i)
            If i = SelectedIndex Then
                g.FillRectangle(LightBrush, TabRectangle)
                g.FillRectangle(Brushes.DeepSkyBlue, New Rectangle(TabRectangle.Location.X + 2, TabRectangle.Location.Y + 2, 3, TabRectangle.Height - 4))
            Else
                g.FillRectangle(DarkBrush, TabRectangle)
                g.FillRectangle(NotSelectedColor, New Rectangle(TabRectangle.Location.X + 2, TabRectangle.Location.Y + 2, 3, TabRectangle.Height - 4))
            End If
            g.DrawString(TabPages(i).Text, Font, Brushes.White, TabRectangle, New StringFormat With {.Alignment = StringAlignment.Center, .LineAlignment = StringAlignment.Center})
        Next
 
        e.Graphics.DrawImage(bm.Clone, 0, 0)
        g.Dispose() : bm.Dispose()
        MyBase.OnPaint(e)
    End Sub
 
End Class

Mais je doute qu'il prenne en charge les images sur chaque Tabpage.... A voir....

A+

**Pol63** · 06/04/2015, 13h50

lu en diagonale
la solution des panels ce n'est pas très pratique pour modifier
pour ca le mieux est de faire des usercontrol (ou des forms dans l'absolu) ce qui permet de les designer facilement
et ensuite sur le clic d'un bouton rendre visible un des usercontrol et cacher les autres

normalement il ne devrait pas y avoir trop de problèmes graphiques

**guatto** · 06/04/2015, 18h34

Bonsoir furious.builder,

peut-être que ma réponse ne te servira même pas mais essaye de t'inspirer de l’installable de "MVS Community 2013" le design est incroyable je ne sais pas comment c'est créé mais peut-être que l'un des membres pourrait t'éclairer plus sur ça.

Bonne chance pour ton projet !

**furious.builder** · 06/04/2015, 22h12

Merci pour vos réponses, j'ai finalement opté pour la première solution, me baser sur des thèmes déjà existants, le rendu est plutôt sympas ! Un mélange métro avec animations material design

@guatto : Aurai-tu un screen stp ? Je pourrai toujours essayer de m'en inspirer

**Pol63** · 06/04/2015, 23h34

il y a de forte chance que par mvs community 2013 il entende microsoft visual studio community 2013
pas teste lé community, et ca me paraitrait étrange qu'il diffère beaucoup du 2013 précédent
mais sinon vs est codé en wpf je crois (qui a beaucoup moins de limites graphiques que les windows forms)

**Kropernic** · 07/04/2015, 14h43

J'arrive en retard et ce que je vais proposer n'est p-e pas la meilleure solution mais je pense qu'elle est assez simple.

Ma proposition est de garder les boutons sur la gauche et d'utiliser un tabcontrol pour la partie contenu. Le seul truc est de masquer les onglets. Ce qui se fait en 3 lignes de codes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
        'these 3 lines are for masking the tabcontrol's tabs
        tcSummary.Appearance = TabAppearance.FlatButtons
        tcSummary.ItemSize = New Size(0, 1)
        tcSummary.SizeMode = TabSizeMode.Fixed

où tcSummary est un TabControl.

A partir de là, tu peux customiser chaque onglet facilement à ta guise et les afficher au moment opportun.

**furious.builder** · 07/04/2015, 21h33

C'est gentil à vous tous de me répondre !
@Kropernic : J'avais pensé à cette technique mais j'avais pas réussi à cacher les onglets du TabControl, merci !

**Kropernic** · 08/04/2015, 09h33

C'était pourtant pas dur...

Avec le TabControl de mon exemple, cela donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
tcSummary.TabPages.Remove(leTabPage)
tcSummary.TabPages.Add(leTabPage)

Faut savoir qu'à la création du formulaire (New Form(), les tabpages seront créés automatiquement. Suffit de les référencer dans une liste (ou un dictionnaire pour y accéder par leur nom) et de les retirer tous du tabcontrol sauf celui par défaut. Après, au clic du bouton, tu ajoutes et retires et voilà.

**mactwist69** · 08/04/2015, 09h47

Comme le suggérait Pol63,
Pourquoi alors ne pas utiliser directement des forms dans une parentForm Mdi ?
Ou des user controls ?

Si on utilise pas le controlPanel comme un ControlPanel, c'est que ça ne doit pas être le bon contrôle.
En l’occurrence : ajouter ou supprimer en live des panels au controlPanel et cacher les onglets

Si le chargement est long, on peut toujours charger les forms au démarrage de l'application (sans les afficher ni remplir les données, après, ça ira hyper vite).

**furious.builder** · 09/04/2015, 19h34

Je vais explorer un peu toutes les options que vous avez donné

Le WPF est-il compliqué à comprendre ? J'ai toujours fait du winform et je suis un peu perdu sur le WPF du coup

**Pol63** · 09/04/2015, 20h59

ca fait bizarre au début et ca prend pas mal de temps à comprendre tout
après il y a un côté plaisant une fois qu'on a compris
mais il faut prendre le temps de lire des tutos pour comprendre comment l'utiliser, et ne pas garder ses habitudes de windows forms

le principe c'est de dissocier totalement l'interface du code
donc par exemple on écrit pas me.button1.enabled = false, ca se fait par binding de la propriété IsEnabled sur une propriété d'une classe (ou gérer le canexecute)
donc il faut déjà bien maitriser la POO

après si tu veux te lancer dessus, il faut lire sur le MVVM et connaitre les 4 panels qui servent à définir l'interface

**furious.builder** · 09/04/2015, 21h44

Merci, je vais me renseigner alors

Optimisation de mon application (affichage d'objets)

VB.NET

Discussions similaires

Partager

Partager