Comment faire une largeur StackPanel celle d'un autre StackPanel?

Question

J'ai deux dockpanels qui ont chacun un StackPanel gauche.

La largeur du fond StackPanel est déterminée par la largeur du texte est en elle.

La largeur de la partie supérieure StackPanel devrait être la même que la largeur du fond 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?

alt text http://i33.tinypic.com/59wj6s.jpg

<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> 

Answer 1

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é de la grille IsSharedScope:

<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> 

Answer 2

Vous pouvez le faire en utilisant Grid s avec un SharedSizeGroup au lieu de DockPanel s. C'est à dire.

<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 partagé des Grid s (la StackPanel contenant les Grid s dans cet exemple)