Comment faire une largeur StackPanel celle d'un autre StackPanel?
-
13-09-2019 - |
Question
J'ai deux dockpanels qui ont chacun un StackPanel gauche.
La largeur de la bas StackPanel est déterminée par la largeur du texte est en elle.
La largeur de la top StackPanel devrait être même que la largeur de la bas StackPanel.
J'ai essayé de lier la largeur de la partie supérieure StackPanel à la largeur du fond StackPanel par ElementName mais cela ne fonctionne pas.
Comment puis-je faire la largeur supérieure identique à la largeur de fond?
<StackPanel>
<DockPanel LastChildFill="True" Height="100" >
<StackPanel Width="{Binding ElementName=LeftMenuText, Path=Width}"
DockPanel.Dock="Left"
Background="Yellow">
<TextBlock
Text="This is some text."/>
</StackPanel>
<StackPanel DockPanel.Dock="Right"
Background="Orange">
</StackPanel>
</DockPanel>
<DockPanel
Height="3"
Background="Black"></DockPanel>
<DockPanel LastChildFill="True" Height="100">
<StackPanel Name="LeftMenuWrapper"
DockPanel.Dock="Left"
Background="Yellow">
<TextBlock
Text="This is some text that is longer."/>
</StackPanel>
<StackPanel DockPanel.Dock="Right"
Background="Blue">
</StackPanel>
</DockPanel>
</StackPanel>
La solution
Bind à ActualWidth de LeftMenuWrapper:
<StackPanel>
<DockPanel LastChildFill="True" Height="100" >
<StackPanel Width="{Binding ElementName=LeftMenuWrapper, Path=ActualWidth}"
DockPanel.Dock="Left"
Background="Yellow">
<TextBlock
Text="This is some text."/>
</StackPanel>
<StackPanel DockPanel.Dock="Right"
Background="Orange">
</StackPanel>
</DockPanel>
<DockPanel
Height="3"
Background="Black"></DockPanel>
<DockPanel LastChildFill="True" Height="100">
<StackPanel Name="LeftMenuWrapper"
DockPanel.Dock="Left"
Background="Yellow">
<TextBlock
Text="This is some text that is longer."/>
</StackPanel>
<StackPanel DockPanel.Dock="Right"
Background="Blue">
</StackPanel>
</DockPanel>
</StackPanel>
Juste pour ajouter à votre arsenal une autre façon de le faire. Vous pouvez également utiliser la propriété IsSharedScope Grid:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel Grid.IsSharedSizeScope="True">
<Grid Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="TextHolder"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="Yellow">
<TextBlock Text="This is some text."/>
</Border>
<Border Grid.Column="1" Background="Orange"/>
</Grid>
<Border Height="3" Background="Black"/>
<Grid Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="TextHolder"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="Yellow">
<TextBlock Text="This is some text that is longer."/>
</Border>
<Border Grid.Column="1" Background="Blue"/>
</Grid>
</StackPanel>
</Page>
Autres conseils
Vous pouvez le faire en utilisant Grid
s avec un SharedSizeGroup
au lieu de DockPanel
s. I.e..
<StackPanel Grid.IsSharedSizeScope="True">
<Grid Height="100" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Width="{Binding ElementName=LeftMenuText, Path=Width}"
DockPanel.Dock="Left"
Background="Yellow">
<TextBlock
Text="This is some text."/>
</StackPanel>
<StackPanel Grid.Column="1" DockPanel.Dock="Right"
Background="Orange">
</StackPanel>
</Grid>
<DockPanel
Height="3"
Background="Black"></DockPanel>
<Grid Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Name="LeftMenuWrapper"
DockPanel.Dock="Left"
Background="Yellow">
<TextBlock
Text="This is some text that is longer."/>
</StackPanel>
<StackPanel Grid.Column="1" DockPanel.Dock="Right"
Background="Blue">
</StackPanel>
</Grid>
</StackPanel>
Les éléments clés à retenir sont de donner à chaque colonne dans vos grilles un SharedSizeGroup
avec le même nom ( « A » dans cet exemple), et d'ajouter Grid.IsSharedSizeScope="True"
à un parent commun des Grid
s (le StackPanel
contenant les Grid
s dans cet exemple )