如何使 StackPanel 的宽度等于另一个 StackPanel 的宽度？

发布于 2024-08-05 19:11:08 字数 1529 浏览 12 评论 0原文

我有两个停靠面板，每个面板都有一个左侧 StackPanel。

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

顶部 StackPanel 的宽度应与底部 StackPanel 的宽度相同。

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

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

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

原文

I have two dockpanels which each have a left StackPanel.

The width of the bottom StackPanel is determined by the width of the text is in it.

The width of the top StackPanel should be the same as the width of the bottom StackPanel.

I've tried to bind the Width of the top StackPanel to the Width of the bottom StackPanel via ElementName but this doesn't work.

How can I make the top width the same as the bottom width?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

茶底世界 2024-08-12 19:11:08

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

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

回复收藏 0 原文

送舟行 2024-08-12 19:11:08

您可以使用带有 SharedSizeGroup 的 Grid 而不是 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>

要记住的关键事项是为网格内的每一列提供一个具有相同名称（本例中为“A”）的 SharedSizeGroup，并添加 Grid.IsSharedSizeScope="True" code> 到 Grid 的共享父级（本例中包含 Grid 的 StackPanel）

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)

回复收藏 0 原文

~没有更多了~