كيفية جعل عرض STACKPANEL أنه من StackPanel آخر؟

Question

لدي اثنين من dockpanels التي لديها كل منها stackpanel اليسرى.

عرض الأسفل يتم تحديد stackpanel من خلال عرض نص في ذلك.

عرض أعلى يجب أن يكون stackpanel هو نفس كما عرض الأسفل stackpanel.

لقد حاولت ربط عرض أعلى 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>

Answer 1

اربطها إلى ActualWidth of LareMenuWrapper:

 <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

يمكنك القيام بذلك باستخدام GridS مع أ 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" إلى الوالد المشترك من GridS ( StackPanel تحتوي على Gridفي هذا المثال)