ScrollViewer + GridSplitter : incompatibles ?

**yvesall** · 08/03/2012, 12h08

Hello !

Je tente de faire un comportement particulier à l'un de mes controls.
j'ai 2 Expanders l'un au dessus de l'autre
J'ai placé le tout dans une Grid pour utiliser un GridSplitter
Et tout ceci est placé dans un ScrollViewer

l'idée est assez simple, je souhaite pouvoir modifier la taille de l'expander supérieur en manipulant le GridSplitter.

Le ScrollViewer est là pour gérer l'overflow car ma fenêtre est volontairement plus petite que le contenu.

voici le XAML :

Code xaml :

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
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" VerticalAlignment="Stretch">
	<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
		<Grid.RowDefinitions>
			<RowDefinition Height="1*" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="1*" />
		</Grid.RowDefinitions>
		<Expander IsExpanded="True" Name="Expander_Splitter" Margin="0" BorderBrush="#FF707070" Background="#FFDFDFDF">
			<Expander.Header>
				<TextBlock FontWeight="Bold">Splitter</TextBlock>
			</Expander.Header>
			<Grid Background="White">
				<Button Content="Browse" Height="23" HorizontalAlignment="Left" Margin="6,35,0,4" VerticalAlignment="Top" Width="50" />
				<Button Content="Generate" HorizontalAlignment="Right" Margin="0,35,6,4" Width="77" FontWeight="Bold" Height="23" VerticalAlignment="Top" />
				<TextBox Margin="6,6,6,0" Height="23" VerticalAlignment="Top" />
			</Grid>
		</Expander>
		<GridSplitter Grid.Row="1" Height="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext"  Background="White" />
		<Expander IsExpanded="True" Grid.Row="2" Margin="0" Name="Expander_SongName" BorderBrush="#FF707070" Background="#FFDFDFDF">
			<Expander.Header>
				<TextBlock FontWeight="Bold">Song Name</TextBlock>
			</Expander.Header>
			<Grid Background="White">
				<Grid.RowDefinitions>
					<RowDefinition Height="62" />
					<RowDefinition Height="*" />
					<RowDefinition Height="29" />
				</Grid.RowDefinitions>
				<Button Content="Browse" Height="23" HorizontalAlignment="Left" Margin="6,35,0,0" VerticalAlignment="Top" Width="50" />
				<TextBox Margin="6,6,0,0" Height="23" VerticalAlignment="Top" HorizontalAlignment="Left" Width="133" />
				<ListBox Name="listBox1" Margin="4,0,4,0" Grid.Row="1" MinHeight="160" >
				</ListBox>
				<Button Content="RENAME" Grid.Row="2" HorizontalAlignment="Left" Margin="6,0,0,4" Height="23" Name="button1" Width="75" />
			</Grid>
		</Expander>
	</Grid>
</ScrollViewer>

j'ai tenté de modifier le ResizeBehavior avec toute les valeurs possibles, mais rien n'y fait.

Si je retire mon conteneur ScrollViewer, le GridSplitter fonctionne.

Je ne comprend donc pas comment agencer les ScrollViewer et GridSplitter

Si l'un d'entre vous à une solution, je suis preneur

**koyot3** · 08/03/2012, 13h16

Salut yvesall,

Essaie

Code xml :

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

1
2
3
4
5
6
7
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" VerticalAlignment="Stretch">
	<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
		</Grid.RowDefinitions>

@+ sur les ondes

**yvesall** · 08/03/2012, 14h57

Ça marche ! c'était si simple

j'ai du mal à comprendre pourquoi Auto marche si bien :/

Merci beaucoup koyot3 !

**yvesall** · 08/03/2012, 15h09

En faite peut être pas tout à fait complètement.
Si je lance l'appli, le GridSplitter marche correctement mais les Expanders ne se rétractent plus si j'ai modifié la positon du GridSplitter (les Expanders sont en état rétracté mais prennent toujours autant de place)
si je ne touche pas au GridSplitter les Expanders se rétractent correctement.

**koyot3** · 08/03/2012, 15h58

Re

Effectivement en testant, il y a bien un soucis en jouant avec le gridplitter.
J'ai cherché sur internet par curiosité et j'ai trouvé un lien sympa

ce qui donne dans ton cas pour le xaml

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
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" VerticalAlignment="Stretch">
 
        <Grid x:Name="root" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="10" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
 
            <Expander IsExpanded="True" Name="Expander_Splitter" Margin="0" BorderBrush="#FF707070" Background="#FFDFDFDF">
                <Expander.Header>
                    <TextBlock FontWeight="Bold">Splitter</TextBlock>
                </Expander.Header>
                <Grid Background="White">
                    <Button Content="Browse" Height="23" HorizontalAlignment="Left" Margin="6,35,0,4" VerticalAlignment="Top" Width="50" />
                    <Button Content="Generate" HorizontalAlignment="Right" Margin="0,35,6,4" Width="77" FontWeight="Bold" Height="23" VerticalAlignment="Top" />
                    <TextBox Margin="6,6,6,0" Height="23" VerticalAlignment="Top" />
                </Grid>
            </Expander>
            <GridSplitter Grid.Row="1" Height="4" Background="LightGray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext"  />
            <Expander IsExpanded="True" Grid.Row="2" Margin="0" Name="Expander_SongName" BorderBrush="#FF707070" Background="#FFDFDFDF">
                <Expander.Header>
                    <TextBlock FontWeight="Bold">Song Name</TextBlock>
                </Expander.Header>
                <Grid Background="White">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="62" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="29" />
                    </Grid.RowDefinitions>
                    <Button Content="Browse" Height="23" HorizontalAlignment="Left" Margin="6,35,0,0" VerticalAlignment="Top" Width="50" />
                    <TextBox Margin="6,6,0,0" Height="23" VerticalAlignment="Top" HorizontalAlignment="Left" Width="133" />
                    <ListBox Name="listBox1" Margin="4,0,4,0" Grid.Row="1" MinHeight="160" >
                    </ListBox>
                    <Button Content="RENAME" Grid.Row="2" HorizontalAlignment="Left" Margin="6,0,0,4" Height="23" Name="button1" Width="75" />
                </Grid>
            </Expander>
 
        </Grid>
    </ScrollViewer>

et dans le code-behind :

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
GridLength[] tab;
 
public MainWindow()
{
	InitializeComponent();
 
	tab = new GridLength[3];           
	tab[0] = root.RowDefinitions[0].Height;
	tab[2] = root.RowDefinitions[2].Height;
 
	ExpandedOrCollapsed(Expander_Splitter);
	ExpandedOrCollapsed(Expander_SongName);
 
	Expander_Splitter.Expanded += ExpandedOrCollapsed;
	Expander_Splitter.Collapsed += ExpandedOrCollapsed;
	Expander_SongName.Expanded += ExpandedOrCollapsed;
	Expander_SongName.Collapsed += ExpandedOrCollapsed;
}
 
void ExpandedOrCollapsed(object sender, RoutedEventArgs e)
{
	ExpandedOrCollapsed(sender as Expander);            
}
 
void ExpandedOrCollapsed(Expander expander)
{
	var rowIndex = Grid.GetRow(expander);
	var row = root.RowDefinitions[Grid.GetRow(expander)];
	if (expander.IsExpanded)
	{
		row.Height = tab[rowIndex];
		row.MinHeight = 50;
	}
	else
	{
		tab[rowIndex] = row.Height;
		row.Height = GridLength.Auto;
		row.MinHeight = 0;
	} 
}

En gros il faut conserver les valeurs des rows contenant tes expanders pour les réassigner lors d'une ouverture/fermeture.
Car quand tu bouges ton gridsplitter, il redimensionne la valeur de la hauteur fixe de ta ligne. Quand tu veux fermer ton expander, cette hauteur ne change pas (contrairement à celle de l'expander).

En espérant que cela t'aide

**yvesall** · 08/03/2012, 17h26

En effet !

j'étais déjà passé par ce lien mais je l'avais bypass car je cherchais une solution sans Code-Behind.

Dommage que cela ne puisse se faire que dans le Designer (peut-être qu'en utilisant des DataTrigger il existerait une solution, je fouillerais :p)

dans tout les cas, merci beaucoup (encore

) !

**yvesall** · 08/03/2012, 17h47

je reviens avec un code un peu plus générique pour la partie CodeBehind :

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
 
private GridLength[] m_GridTab = null;
private List<Expander> m_ExpanderList = null;
private List<GridSplitter> m_GridSplitterList = null;
 
public MyControl()
{
	InitializeComponent();
	InitExpanders();
}
 
private void InitExpanders()
{
	m_ExpanderList = ExpanderGridRoot.Children.OfType<Expander>().ToList<Expander>();
	m_GridSplitterList = ExpanderGridRoot.Children.OfType<GridSplitter>().ToList<GridSplitter>();
 
	m_GridTab = new GridLength[m_ExpanderList.Count * 2];
	for (int i = 0; i < m_ExpanderList.Count; ++i)
	{
		m_GridTab[i * 2] = ExpanderGridRoot.RowDefinitions[i * 2].Height;
		ExpandedOrCollapsed(m_ExpanderList[i]);
		m_ExpanderList[i].Expanded += ExpandedOrCollapsed;
		m_ExpanderList[i].Collapsed += ExpandedOrCollapsed;
	}
}
 
private void ExpandedOrCollapsed(object sender, RoutedEventArgs e)
{
	ExpandedOrCollapsed(sender as Expander);
}
 
private void ExpandedOrCollapsed(Expander _Expander)
{
	var rowIndex = Grid.GetRow(_Expander);
	var row = ExpanderGridRoot.RowDefinitions[Grid.GetRow(_Expander)];
	if (_Expander.IsExpanded)
	{
		row.Height = m_GridTab[rowIndex];
		row.MinHeight = 50;
	}
	else
	{
		m_GridTab[rowIndex] = row.Height;
		row.Height = GridLength.Auto;
		row.MinHeight = 0;
	}
	// Change drop availability on GridSplitter
	GridSplitter_IsEnabled(_Expander, _Expander.IsExpanded == true);
}
 
private void GridSplitter_IsEnabled(Expander _Expander, bool _Enabled)
{
	for (int i = 0; i < m_GridSplitterList.Count && i < m_ExpanderList.Count; ++i)
	{
		if (_Expander == m_ExpanderList[i])
		{
			m_GridSplitterList[i].IsEnabled = _Enabled;
			return;
		}
	}
}

En espérant aider

Edit:
j'ai au passage ajouté un bout de code qui empêche de manipuler les GridSplitter quand l'Expander est collapsed

ScrollViewer + GridSplitter : incompatibles ?

Windows Presentation Foundation

Discussions similaires

Partager

Partager