无法拉伸内部 StackPanel答案

【问题标题】：Not able to stretch an inner StackPanel无法拉伸内部 StackPanel
【发布时间】：2015-11-07 10:49:10
【问题描述】：

使用下面的设置，我可以将窗口的整个宽度染成紫色。内部堆栈面板是黄绿色的并且向左移动。

<StackPanel HorizontalAlignment="Stretch"
            Orientation="Horizontal"
            Background="BlueViolet"
            Height="70">
  <StackPanel HorizontalAlignment="Left"
              Orientation="Horizontal"
              Background="Chartreuse" >

我期待如果我将内部堆栈面板的水平对齐方式更改为拉伸，它也会填满所有宽度，但这不会发生。我尝试了右对齐和拉伸对齐，似乎它不会影响内部控件的宽度。

根据帖子，我发现是实现它的方式（它当然适用于外部控制）。我能错过什么？我已经删除了在外部面板中声明的其他控件（即所有兄弟姐妹到黄绿色的一个），没有任何区别。

【问题讨论】：

只需将外部的StackPanel 替换为Grid
@FlatEric 还有其他方法吗？当我添加其他组件时，我正在使用面板的堆叠性。恐怕我会影响加价的其他部分（这可能要到稍后才会显现出来）。从技术上讲，您能否就为什么这些堆叠的不当行为提出建议？此外，无论如何，您应该将您的评论作为回复发表，可能有点详细。

标签： c# xaml alignment panel

【解决方案1】：

过去我花了很多时间在堆栈面板上苦苦挣扎。

会发生以下情况：您的外部堆栈面板（＃1）具有水平方向，这意味着它可以根据需要填充尽可能多的孩子，水平堆叠它们。每当渲染孩子时，孩子和父母之间都会有一个对话：

--(Child) 我想渲染，我有这个尺寸。你能给我足够的空间吗？

--（家长）我会计算一下，看看结果如何。

在嵌套堆栈面板的情况下，您的外部堆栈面板会尝试拉伸并要求无限宽度，并且它的父网格为他提供了他拥有的所有宽度。但是stackpanel的目的是在一个方向上是无限的，如果它的孩子要求无限的宽度（当你将水平对齐设置为拉伸时，内部stackpanel会做什么）然后我们只给他最小的宽度，否则他们会长出来控制并消耗您 PC 上的所有内存。

所以这只是对所发生事情的艺术观点，可能不准确。

更新：

简单地说：您不能将水平对齐设置为拉伸具有水平方向的堆栈面板的子级，也不能设置垂直对齐以拉伸具有垂直方向的堆栈面板的子级。嗯，你可以，但它不会拉伸，因为如果它可以，那么它会无限拉伸

答案：用网格替换内部或外部堆栈面板。您使用 2 个具有相同方向的嵌套堆栈面板这一事实表明您做错了什么。老实说，在我看来，stackpanel 的唯一应用是在滚动查看器内部。在其他情况下，最好使用 WrapPanel。

【讨论】：

关于小组演讲的精彩故事，+1。

【解决方案2】：

StackPanel 将为其内容提供所需的空间，但也只提供必要的空间。

如果你想精确地填充窗口的宽度，只需将外部的 StackPanel 替换为 Grid

如果您希望StackPanel 至少填充整个，您可以将MinWidth 绑定到其父ActualWidth：

<StackPanel HorizontalAlignment="Stretch"
    Name="parent"
    Orientation="Horizontal"
    Background="BlueViolet"
    Height="70">

    <StackPanel HorizontalAlignment="Stretch"
        MinWidth="{Binding Path=ActualWidth, ElementName=parent}"
        Orientation="Horizontal"
        Background="Chartreuse" >
    </StackPanel>
</StackPanel>

【讨论】：

知道为什么我的问题被否决了吗？！也许我错过了什么？
完全不知道。我觉得没问题

【解决方案3】：

我也为此苦苦挣扎，并提供此解决方案，以防其他人正在寻找类似的解决方案。

我的特殊问题是我需要将汉堡菜单置于顶部并退出 SplitView。然后我试图让堆栈面板填写下面的整个区域。这很好用，下面的屏幕截图显示了它的样子。

如果这不是最佳做法，希望这会有所帮助并很高兴得到纠正。

<Grid Background="{ThemeResource AppBarToggleButtonCheckedPointerOverBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Height="50" Grid.Row="0">
        <StackPanel Background="Gray" Height="50" HorizontalAlignment="Stretch">
            <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
        </StackPanel>
    </StackPanel>
    <SplitView Grid.Row="1" x:Name="MySplitView" DisplayMode="Overlay"  IsPaneOpen="False" 
            CompactPaneLength="1" OpenPaneLength="150" VerticalAlignment="Stretch">
        <SplitView.Pane >
            <StackPanel >

            <StackPanel Orientation="Horizontal">
                    <Button x:Name="LogIn" FontFamily="Segoe MDL2 Assets" Content="&#xE825;" Width="50" Height="50" Background="Transparent"/>
                    <TextBlock Text="Log In" FontSize="18" VerticalAlignment="Center" />
             </StackPanel>

                <StackPanel Orientation="Horizontal">
                    <Button x:Name="SignUp" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;" Width="50" Height="50" Background="Transparent"/>
                    <TextBlock Text="Sign Up" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            <Grid VerticalAlignment="Stretch">
            </Grid>
        </SplitView.Content>
    </SplitView>    
</Grid>

菜单关闭：

菜单打开：

【讨论】：