Style et autres joyeusetés pour faire un menu en expander

**Harpist** · 19/06/2008, 11h12

Salutations à tous,
Oui c'est encore moi

Un nouveau soucis (oui j'abuse je sais mais que voulez vous quand y des pros faut en profiter

)

Le problème du Jour en deux points
1- Du design
Je dois concevoir un menu retractible... retractable... enfin qui s'agrandit ou qui rétrécit à la demande

avec des expander. Façon Outlook sans les "boutons" du bas en gros.
Soucis si j'ai bien mes expandos... C'est tout moche, rien n'est stylé de base

2- Du fait de prendre la "place" du menu quand celui ci est minimisée (collapsed)
A coté de ce menu j'ai un "rectangle" qui me servira à mettre mes données (sous forme de tabitems dans un tabcontrol à la façon IE/Firefox)
Soucis lorsque le menu se rétrécit, ce "rectangle" lui ne bouge pas, ce qui n'est pas l'effet rechercher (il devrait s'agrandir pour prendre la place laissée vacante).

Un jour c'est moi qui donnerait les réponses...un jour...

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
<UserControl x:Name="userControl" x:Class="NavigationBarIntro.MainControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:system="clr-namespace:System;assembly=mscorlib">
 
    <UserControl.Resources>
        <!-- Data Providers -->
        <ObjectDataProvider x:Key="CommonThemeNameProvider" MethodName="GetValues" ObjectType="{x:Type system:Enum}" />
        <ObjectDataProvider x:Key="FlowDirectionTypeProvider" MethodName="GetValues" ObjectType="{x:Type system:Enum}">
            <ObjectDataProvider.MethodParameters>
                <x:Type TypeName="FlowDirection"/>
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>
 
        <!-- Styles -->
		<Style x:Key="ItemListBoxStyle" TargetType="ListBox">
			<Setter Property="BorderThickness" Value="0" />
			<Setter Property="ItemContainerStyle">
				<Setter.Value>
					<Style TargetType="ListBoxItem">
						<Setter Property="HorizontalContentAlignment" Value="Stretch" />
						<Setter Property="Template">
							<Setter.Value>
								<ControlTemplate TargetType="ListBoxItem">
									<Grid>
										<Rectangle Fill="{TemplateBinding Background}" />
										<DockPanel LastChildFill="True">
											<ContentPresenter Selector.IsSelected="{TemplateBinding Selector.IsSelected}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" 
												HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> 
										</DockPanel>
									</Grid>
 
									<ControlTemplate.Triggers>
										<Trigger Property="Selector.IsSelected" Value="True">
											<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" /> 
										</Trigger>
									</ControlTemplate.Triggers>
								</ControlTemplate>
							</Setter.Value>
						</Setter>
					</Style>
				</Setter.Value>
			</Setter>
		</Style>
	</UserControl.Resources>
 
    <Border>
        <Grid Margin="5">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="180*" MinWidth="34" MaxWidth="250" />
				<!-- <ColumnDefinition Width="0" /> -->
				  <!-- <ColumnDefinition Width="Auto" MinWidth="5" /> -->
				  <!-- <ColumnDefinition Width="1" /> -->
				  <!-- <ColumnDefinition Width="317*" MinWidth="16" /> -->
				  <!-- <ColumnDefinition Width="Auto" /> -->
				<ColumnDefinition Width="Auto" />
			</Grid.ColumnDefinitions>
 
            <Expander IsExpanded="True" ExpandDirection="Right" MaxWidth="Infinity" BorderBrush="black">
                <Expander.Header>
                    <Border Margin="0,0,0,0" BorderThickness="1,1,1,1" BorderBrush="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="16" Height="227">
                        <TextBlock FontWeight="Bold" Text="Menu" Foreground="#666666" FontSize="18"
                       Margin="0,9,0,0" Padding="0,0,0,0" Height="87" VerticalAlignment="Center" TextAlignment="Center" TextTrimming="None" TextWrapping="Wrap" Width="14" />
                    </Border>
                </Expander.Header>
 
                <DockPanel LastChildFill="True">
                    <StackPanel DockPanel.Dock="Left" Orientation="Vertical">
                        <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="1" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
 
                        <Expander IsExpanded="True" BorderBrush="#324465" BorderThickness="1,1,1,1" Margin="0,0,0,0" Padding="0,0,0,0">
                            <Expander.Header>
                                <TextBlock FontWeight="Bold" Text="Paramètrages" FontSize="12" />
                            </Expander.Header>
                            <Expander.Content>
                                <ListBox Style="{StaticResource ItemListBoxStyle}" Background="{DynamicResource OutlookButtonBackground}">
                                    <ListBoxItem Margin="10,0,0,0">Menu1.1</ListBoxItem>
                                    <ListBoxItem Margin="10,0,0,0">Menu1.2</ListBoxItem>
                                    <ListBoxItem Margin="10,0,0,0">Menu1.3</ListBoxItem>
                                    <ListBoxItem Margin="10,0,0,0">Menu1.4</ListBoxItem>
                                    <ListBoxItem Margin="10,0,0,0">Menu1.5</ListBoxItem>
                                </ListBox>
                           </Expander.Content>
                        </Expander>
 
                        <Rectangle Grid.Row="1" Height="1" />
 
                        <Expander Grid.Row="2" IsExpanded="False" BorderBrush="#324465" Background="#ffffff" BorderThickness="1,1,1,1" Margin="0,0,0,0" Padding="0,0,0,0">
                            <Expander.Header>
                                <TextBlock FontWeight="Bold" Text="Menu2" FontSize="12" />
                            </Expander.Header>
                            <Expander.Content>
                                <ListBox Style="{StaticResource ItemListBoxStyle}">
                                    <ListBoxItem Margin="10,0,0,0">Menu2.1</ListBoxItem>
                                    <ListBoxItem Margin="10,0,0,0">Menu2.2</ListBoxItem>
                                    <ListBoxItem Margin="10,0,0,0">Menu2.3</ListBoxItem>
                                    <ListBoxItem Margin="10,0,0,0">Menu2.4</ListBoxItem>
                                    <ListBoxItem Margin="10,0,0,0">Menu2.5</ListBoxItem>
                                </ListBox>
                           </Expander.Content>
                        </Expander>
                    </Grid>
                    </StackPanel>
                </DockPanel>
            </Expander>
 
            <!-- Menu -->
                  <GridSplitter Grid.Column="1" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext" Background="Transparent" Width="0" HorizontalAlignment="Left" />
 
			<!-- Document -->
            <Border Grid.Column="2" BorderThickness="1" Padding="7">
				<DockPanel LastChildFill="True">
					<StackPanel DockPanel.Dock="Top" Orientation="Vertical">
						<TextBlock FontWeight="Bold" FontSize="16" Text="C'est ici qu'on mettra les tabcontrol..." TextWrapping="Wrap" TextTrimming="CharacterEllipsis" />
                        <Rectangle Margin="0,7,0,0" Height="1" SnapsToDevicePixels="True" />
                    </StackPanel>
                </DockPanel>
			</Border>
        </Grid>
    </Border>
</UserControl>

**Jérem22** · 19/06/2008, 11h33

Je pense que tu pourrai utiliser un Expander 'animé' déjà pour avoir un effet sympa (exemple ici).

Ensuite pour ton problème de Layout, je changerai ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
    <Border BorderBrush="Red" BorderThickness="1">
        <Grid Margin="5" ShowGridLines="True">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="180*" MinWidth="34" MaxWidth="250" />
				<ColumnDefinition Width="Auto" MinWidth="5" />
				<ColumnDefinition Width="1" />
				<ColumnDefinition Width="317*" MinWidth="16" />
				<ColumnDefinition Width="Auto" /> -->
				<ColumnDefinition Width="Auto" />
			</Grid.ColumnDefinitions>

par ça:

Code :

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

1
2
3
4
5
6
     <Border BorderBrush="Red" BorderThickness="1">
        <Grid Margin="5" ShowGridLines="True">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto" MinWidth="34" MaxWidth="250" />
				<ColumnDefinition Width="Auto" />
			</Grid.ColumnDefinitions>

**Harpist** · 19/06/2008, 11h50

Jérem22

(grand merci à charge de revanche)
Point 2 résolu, reste l'épine du design

**Jérem22** · 19/06/2008, 12h00

Pour le design, tu peux agir sur un contrôle de 2 manières:
- en changeant son style (donc ses propriétés: couleurs, arrière plan...)
- en changeant son template (dans ce cas, tu donnes une complète représentation du nouveau visuel de ton contrôle)

Il y aussi la solution d'utiliser un Expander animé (cf. mon lien plus haut) qui permettra d'ajouter un peu de 'piment' à ton menu

Tu devrais te renseigner un peu sur ces 2 possibilités, il y a plein de tutoriaux. Je suppose que tu utilises Blend (vue le code que tu nous as montré, je pense que c'est le cas), dans ce cas, Blend te facilitera la vie en pouvant visualiser et éditer ces styles au fur et à mesure que tu les changes.

**Harpist** · 19/06/2008, 14h22

Si Blend est livré avec VS2008 alors oui, sinon j'utilise le VS2008 de base...
(un peu comme on fait des page dhtml avec un notepad ^^)

Style et autres joyeusetés pour faire un menu en expander

Windows Presentation Foundation

Discussions similaires

Partager

Partager