다른 StackPanel의 StackPanel 너비 만드는 법?

Question

저는 각각 왼쪽 StackPanel을 가진 두 개의 독 패널을 가지고 있습니다.

StackPanel의 하단의 폭은 그것에 인 텍스트의 폭에 의해 결정된다.

StackPanel의 상부의 폭은 StackPanel의 바닥의 폭과 동일한 이어야한다.

상단 StackPanel의 너비를 ElementName을 통해 하단 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

:

<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

대신 DockPanel s의 SharedSizeGroup와 Grid의를 사용하여이 작업을 수행 할 수 있습니다. 나는. 기억해야 할

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

중요한 일들은 그리드 내부의 각 열에 같은 이름 (이 예에서는 "A")와 SharedSizeGroup을주고, 포함합니다 (Grid s의 공유 부모에게 StackPanel을 Grid.IsSharedSizeScope="True"를 추가 할 수 있습니다 이 예에서 Grid들) LeftMenuWrapper의 ActualWidth에 그것을 바인딩