如何制作另一个StackPanel的StackPanel宽度？

Question

我有两个dockpanels，每个都有一个左边的StackPanel。

底部的宽度 StackPanel由文本的宽度决定位于其中。

的顶部 StackPanel中的宽度应该是相同为底部的StackPanel的宽度。

我试着通过ElementName将顶部StackPanel的宽度绑定到底部StackPanel的宽度，但这不起作用。

如何使顶部宽度与底部宽度相同？

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

将其绑定到ActualWidth的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> 

只需添加到您的阿森纳另一种方式来做到这一点。您还可以使用Grid的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

可以使用Grid s的一个SharedSizeGroup代替DockPanel就做这个。即

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

需要记住的重要事情是给你的网格内的每个列SharedSizeGroup具有相同名称（“A”，在这个例子中），并添加Grid.IsSharedSizeScope="True"到Grid s的共享父（该StackPanel含在Grid S IN本示例）