Como hacer un ancho de StackPanel que de otro StackPanel?

Question

Tengo dos dockpanels que tienen cada uno un StackPanel izquierdo.

El ancho de la fondo StackPanel está determinada por la anchura de la texto está en ella.

El ancho de la top StackPanel debe ser el mismo como la anchura de la fondo StackPanel.

He tratado de obligar a la anchura de la StackPanel superior a la anchura de la parte inferior a través de StackPanel ElementName pero esto no funciona.

¿Cómo puedo hacer que el ancho de la parte superior de la misma que la anchura de fondo?

<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

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

Sólo para añadir a su arsenal de otra manera de hacer esto. También puede utilizar la propiedad IsSharedScope de cuadrícula:

<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

Puede hacerlo utilizando Grids con un SharedSizeGroup en lugar de DockPanels. Es decir.

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

Las cosas importantes a tener en cuenta son dar a cada columna dentro de sus redes de una SharedSizeGroup con el mismo nombre ( "A" en este ejemplo), y añadir Grid.IsSharedSizeScope="True" a un padre común de los Grids (el StackPanel que contiene los Grids en este ejemplo )