Question

我有两个dockpanel，每个都有一个左侧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

将它绑定到LeftMenuWrapper的ActualWidth：

 <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而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"添加到{{的共享父级1}} s（此示例中包含Grid的{{1}}）

如何使StackPanel宽度为另一个StackPanel的宽度？

2 个答案: