How to make a StackPanel Width that of another StackPanel?

Answer 1

You can do this using Grids with a SharedSizeGroup instead of DockPanels. 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>

The key things to remember are to give each column inside your grids a SharedSizeGroup with the same name ("A" in this example), and add Grid.IsSharedSizeScope="True" to a shared parent of the Grids (the StackPanel containing the Grids in this example)

Answer 2

Hey Edward.

Bind it to ActualWidth of 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>

Just to add to your arsenal another way to do this. You can also use Grid's IsSharedScope property:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
   <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>