[WPF] Personnalisation tabControl

**Nanos** · 27/03/2010, 19h07

Tu pourrais me donner le résultat afin que je comprenne la procédure, etc... Car je ne comprend pas grand chose S.T.P ...

**Nanos** · 04/05/2010, 19h11

J'ai lu la partie sur les classes en C# sur le cours de Serge Tahé disponible sur ce site. Et j'ai mieux compris se que tu me demandais. Sauf :

Envoyé par Pyroa

[...] Sur le constructeur de la classe, on lui passe en paramètre l'URL de la page. [...]

et :

Envoyé par Pyroa

Ensuite dans une observable collection, on y insère toutes les classes instanciées de type Web_Class et on bind au tabcontrol la collection. un templateItem se charge de mettre en place le favicon, le titre de définir l'URL au webbrowser contenu dans le tabitem. [...]

J'aurais besoin d'une traduction.

Peut-tu m'expliquer S.T.P...

Voici mon code :

Code C# :

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
namespace Protom_Navigator
{
    class WebPage
    {
        private string titrepage;
        public string urlpage;
        private string urlfavicon;
 
        //Constructeur
        public WebPage() : base()
        {
            GetTitleEtFavicon();
        }
 
        //Procédure
        private void GetTitleEtFavicon()
        {
 
        }
 
        //Propriiétés
        private string Titre
        {
            get
            {
                return titrepage;
            }
            set
            {
                titrepage = value;
            }
        }
 
        private string Url
        {
            get
            {
                return urlpage;
            }
            set
            {
                urlpage = value;
            }
        }
 
        private string Favicon
        {
            get
            {
                return urlfavicon;
            }
            set
            {
                urlfavicon = value;
            }
        }
    }
}

Merci d'avance,

**binoo** · 06/05/2010, 14h41

Salut,

Est-ce que tu as déjà vu ce post ?
http://www.developpez.net/forums/d90...l/#post5108408

Ça ressemble fortement à ce que tu désires faire

**Nanos** · 06/05/2010, 19h51

Salut et merci de m'avoir répondu.

J'ai compris ce qu'était une observable collection (je l'ai créer dans mon fichier Window1.cs (qui n'est pas ma classe)). Mais comment ajouter les classes instanciées. Et qu'est-ce qu'une classe instancié ? Dans mon cas, comment faudra t-il faire pour appliquer tout ça à mon TabControl.

Ma classe :

Code C# :

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
namespace Protom_Navigator
{
    class WebPage : WebKit.WebKitBrowser
    {
        private string titrepage;
        public string urlpage;
        private string urlfavicon;
 
        //Constructeur
        public WebPage() : base()
        {
            GetTitleEtFavicon();
        }
 
        //Procédure
        private void GetTitleEtFavicon()
        {
            WebKit.WebKitBrowser wb = new WebPage();
            titrepage = DocumentTitle;
            try
            {
                urlfavicon = "http://" + wb.Url.Authority + "/favicon.ico";
                System.Net.WebRequest myRequest = System.Net.WebRequest.Create(urlfavicon);
                System.Net.WebResponse myResponse = myRequest.GetResponse();
            }
            catch(System.Exception)
            {
                urlfavicon = "@/Images/UrlNonExistante.png";
            }
        }
 
        //Propriiétés
        private string Titre
        {
            get
            {
                return titrepage;
            }
            set
            {
                titrepage = value;
            }
        }
 
        private string Url
        {
            get
            {
                return urlpage;
            }
            set
            {
                urlpage = value;
            }
        }
 
        private string Favicon
        {
            get
            {
                return urlfavicon;
            }
            set
            {
                urlfavicon = value;
            }
        }
    }
}

Merci d'avance,

(Je vais bien finir par y arriver ^^ )

**binoo** · 07/05/2010, 00h44

Comme tu as lu le cours de c#, je reviens un peu sur ta classe

:

Tu as créer des champs :

Code c# :

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

1
2
3
        private string titrepage;
        public string urlpage;
        private string urlfavicon;

Généralement, on les mets en private.

Et des propriétés :

Code c# :

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
        //Propriiétés
        private string Titre
        {
            get
            {
                return titrepage;
            }
            set
            {
                titrepage = value;
            }
        }
 
        private string Url
        {
            get
            {
                return urlpage;
            }
            set
            {
                urlpage = value;
            }
        }
 
        private string Favicon
        {
            get
            {
                return urlfavicon;
            }
            set
            {
                urlfavicon = value;
            }
        }

Ce sont généralement les propriétés que tu vas mettre en public.

Voilà pour commencer

Sinon une classe possède un constructeur. Dans ta classe, le constructeur :

Code c# :

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

1
2
3
4
5
        //Constructeur
        public WebPage() : base()
        {
            GetTitleEtFavicon();
        }

Tu peux très bien en ajouter autant que tu veux tant que les paramètres passé au constructeur varient. Par exemple :

Code c# :

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

1
2
3
4
5
6
        //Constructeur
        public WebPage(string myurl) : base()
        {
            this.urlpage = myurl;
            GetTitleEtFavicon();
        }

Pour créer une instance de ta classe WebPage :

Code c# :

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

1
2
3
WebPage webp1 = new WebPage();
// ou bien
WebPage webp2 = new WebPage("www.developpez.net");

Enfin, pour ajouter une WebPage à ton ObservableCollection :

Code c# :

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

1
2
ObservableCollection<WebPage> obs = new ObservableCollection<WebPage>();
obs.Add(webp2);

**Nanos** · 07/05/2010, 17h21

Merci à toi pour ta réponse claire.

Je suis rendue maintenant au binding. Comment bindé une ObservableCollection ?

Les sources de mon projet sont disponible ici. Le projet est libre (je distribue les sources). Mais. sa ne veut pas dire que vous avez le droit de le modifier à votre manière et le recompiler et le distribuer (droit d'auteur).

**binoo** · 07/05/2010, 18h12

Tu peux tout simplement associé ton ObservableCollection à la propriété ItemsSource de ton TabControl :

Code c# :

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

this.TonTabControl.ItemsSource = obs;

Pas besoin de binding.

**Nanos** · 07/05/2010, 18h58

C'est fait. Mais par contre j'ai une erreur (que j'ai depuis pas mal de temps) me disant qu'il est impossible de trouver mon style car en fait j'ai une fenêtre normal, dedans j'ai un WindowsFormHost qui héberge un UserControl qui contient un ToolStripContainer qui contient un ElementHost qui héberge un UserControl qui contient mon TabControl ayant un style. Mon UserControl qui contient le style trouve le style tandis que mon UserControl hébergé par le ToolStripContainer (WinForm) ne le trouve pas. Du coup, sa me provoque une erreur de génération. Je ne peux pas mieux expliqué, c'est très difficile, essaye d'ouvrir mon projet et ouvre le fichier ToolStripContainer1.cs (Fenêtre WinForm (tu verras l'erreur de génération)).

**Nanos** · 05/06/2010, 18h41

Y'a t'il une solution à ce problème ou, dois-je faire avec ?

**Nanos** · 25/07/2010, 10h21

Enfin bref, je viens de régler ce problème. Voici mon .xaml désormais :

Code xml :

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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<UserControl x:Class="Protom_Navigator.TabControlViewer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">
 
    <UserControl.Resources>
        <GradientStopCollection x:Key="Reflection">
            <GradientStop Offset="0.00" Color="#88FFFFFF" />
            <GradientStop Offset="0.20" Color="#66FFFFFF" />
            <GradientStop Offset="0.55" Color="#33FFFFFF" />
            <GradientStop Offset="0.56" Color="#00FFFFFF" />
            <GradientStop Offset="1.00" Color="#22FFFFFF" />
        </GradientStopCollection>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Key="Refl" GradientStops="{StaticResource Reflection}" />
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0" x:Key="ReflV" GradientStops="{StaticResource Reflection}" />
 
        <Style TargetType="Button" x:Key="ClearBtn">
            <Setter Property="Background" Value="#20000000" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Padding" Value="3" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="BorderBrush" Value="#30000000" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border IsHitTestVisible="True">
 
                            <Grid>
 
                                <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2" Margin="0" SnapsToDevicePixels="True"
                    Name="Hover" Opacity="0">
                                    <Border CornerRadius="1" Background="{StaticResource Refl}">
                                        <Border BorderBrush="#30FFFFFF" BorderThickness="1" CornerRadius="0">
 
                                            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="-1">
 
                                                <Border Opacity="1" Name="HoverHost">
                                                    <Border CornerRadius="1" Background="#40FFFFFF" Opacity="0" HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch" />
                                                </Border>
                                                <Border CornerRadius="1" Name="Pressed" Background="#40000000" Opacity="0"
                            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
 
                                            </Grid>
 
                                        </Border>
                                    </Border>
                                </Border>
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Name="Presenter"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}">
 
                                </ContentPresenter>
                            </Grid>
                        </Border>
 
                        <ControlTemplate.Triggers>
 
                            <Trigger Property="IsPressed" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity"
                          Duration="0:0:0.1" To="0.3" />
                                            <DoubleAnimation Storyboard.TargetName="HoverHost" Storyboard.TargetProperty="Opacity"
                          Duration="0:0:0.1" To="0" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity"
                          Duration="0:0:0.3" To="0" />
                                            <DoubleAnimation Storyboard.TargetName="HoverHost" Storyboard.TargetProperty="Opacity"
                          Duration="0:0:0.3" To="1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity"
                          Duration="0:0:0.1" To="1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity"
                          Duration="0:0:0.3" To="0" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
 
                            <Trigger Property="IsEnabled" Value="False">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="Presenter" Storyboard.TargetProperty="Opacity"
                          Duration="0:0:0.3" To="0.5" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="Presenter" Storyboard.TargetProperty="Opacity"
                          Duration="0:0:0.3" To="1.0" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
 
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="TabControl" x:Key="MainTabControl">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabControl">
                        <Grid SnapsToDevicePixels="True">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="20"/>
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Border Background="#FCFCFC" BorderBrush="#4C4E44" BorderThickness="1" CornerRadius="0,4,4,4" Grid.Row="1"
                  Name="RootBorder">
                                <ContentPresenter Name="PART_SelectedContentHost" ContentSource="SelectedContent" />
                            </Border>
 
                            <DockPanel HorizontalAlignment="Left">
                                <Border DockPanel.Dock="Right" Margin="2" BorderBrush="#40FFFFFF" BorderThickness="1"
                    Background="#20000000" VerticalAlignment="Center" CornerRadius="3">
 
                                    <Button Width="15" Height="15" Command="New" Style="{StaticResource ClearBtn}" Padding="2">
                                        <Path Stroke="#F0FFFFFF" StrokeThickness="2" Data="M 5,0 5,10 M 0,5 10,5" Stretch="Uniform" />
                                    </Button>
                                </Border>
                                <UniformGrid Rows="1" IsItemsHost="True" />
                            </DockPanel>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="SelectedItem" Value="{x:Null}">
                                <Setter TargetName="RootBorder" Property="CornerRadius" Value="4" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="TabItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="TabItem">
                                    <Border Opacity="0.7" Name="RootGrid">
                                        <Border BorderBrush="#4C4E44" BorderThickness="1,1,1,0" HorizontalAlignment="Stretch"
                        Name="RootElement" CornerRadius="3,3,0,0" SnapsToDevicePixels="True" Opacity="0.7"
                        Margin="-1,2,0,0">
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0,1">
                                                    <GradientStop Offset="0" Color="Black" />
                                                    <GradientStop Offset="0.9" Color="White" />
                                                </LinearGradientBrush>
                                            </Border.Background>
                                            <Grid Margin="4,0" HorizontalAlignment="Stretch" VerticalAlignment="Center">
                                                <ContentPresenter ContentSource="Header" Margin="0,0,17,0" Width="135" HorizontalAlignment="Stretch"/>
                                                <Image DockPanel.Dock="Left" Width="15" Height="15" Source="http://www.google.fr/favicon.ico" Name="Favicon" HorizontalAlignment="Left" VerticalAlignment="Center" />
                                                <TextBlock Text="Titre de la page" Margin="20,0,0,0" Name="DocumentTitle" VerticalAlignment="Center"/>
                                                <Button DockPanel.Dock="Right" Width="15" Height="15" Command="Close" Style="{StaticResource ClearBtn}" Visibility="Visible" Name="CloseBtn"
                            HorizontalAlignment="Right" VerticalAlignment="Center">
                                                    <Path Stroke="#80000000" StrokeThickness="2" Data="M 0,0 10,10 M 10,0 0,10" Stretch="Uniform" />
                                                </Button>
                                            </Grid>
                                        </Border>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsSelected" Value="True">
                                            <Setter TargetName="RootElement" Property="Margin" Value="-1,0,0,-1" />
                                            <Setter TargetName="RootElement" Property="Opacity" Value="1" />
                                            <Setter TargetName="RootGrid" Property="Opacity" Value="1" />
                                            <Setter Property="Panel.ZIndex" Value="1" />
                                        </Trigger>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="RootGrid" Property="Opacity" Value="1" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
 
    <Grid>
        <TabControl Name="tabControl1" AllowDrop="True" Style="{StaticResource MainTabControl}" >
            <TabItem />
        </TabControl>
    </Grid>
</UserControl>

Mon xaml.cs :

Code C# :

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
namespace Protom_Navigator
{
    /// <summary>
    /// Logique d'interaction pour TabControlViewer.xaml
    /// </summary>
    public partial class TabControlViewer : System.Windows.Controls.UserControl
    {
        System.Collections.ObjectModel.ObservableCollection<WebPage> obs = new System.Collections.ObjectModel.ObservableCollection<WebPage>();
        TabControlViewer TCV;
 
        public TabControlViewer()
        {
            InitializeComponent();
            WebKit.WebKitBrowser wb = GetSelectedWebBrowser();
            WebPage WebP = new WebPage(System.Convert.ToString(wb.Url));
            obs.Add(WebP);
            tabControl1.ItemsSource = obs;
        }
 
        private WebKit.WebKitBrowser GetSelectedWebBrowser()
        {
            return ((System.Windows.Forms.Integration.WindowsFormsHost)((System.Windows.Controls.TabItem)TCV.tabControl1.SelectedItem).Content).Child as WebKit.WebKitBrowser;
        }
    }
}

Après que j'ai mis mon :

Code C# :

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

tabControl1.ItemsSource = obs;

Je fais quoi ensuite ?

Merci d'avance.

**Nanos** · 25/07/2010, 19h14

Bon j'ai réussis à régler mon problème en cherchant sur le net des sources pour TabControl remplaçable, avec image et avec la croix sur chaque onglets. Enfin tout est parfait !

Merci quand même de vos aides...

[WPF] Personnalisation tabControl

Windows Presentation Foundation

Discussions similaires

Partager

Partager