防止 StackPanel 项目重叠答案

【问题标题】：Preventing StackPanel items from overlapping防止 StackPanel 项目重叠
【发布时间】：2015-02-05 03:19:24
【问题描述】：

我正在设计一个 Windows Phone 应用程序，我想将一个 TextBlock 和一个 Button 水平堆叠在一起。这是我想要实现的伪代码：

<StackPanel Name="titlePanel" Orientation="Horizontal" Margin="0,-6.5,0,26.5">
    <TextBlock Name="titleBox" Text="{Binding Title}" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
    <Button Content="press" Width="whatever space is left" Length="what the width is"/> <!--how do I do this?-->
</StackPanel>

当我尝试输入Width="*" 时出现错误，因此我希望执行Width="titlePanel.Width - titleBox.Width" 和Length="this.Width" 之类的操作，只是我似乎无法在XAML 中引用其他对象。我不想每次出现该页面时都放入代码隐藏文件来格式化按钮的大小......这将如何实现？

【问题讨论】：

标签： wpf xaml windows-phone controls stackpanel

【解决方案1】：

您不能使用 StackPanel 来做到这一点，因为堆栈面板会测量每个具有正无穷大的子元素，作为它正在堆叠元素的轴的约束。子控件必须返回它们想要的大小（正无穷大不是来自任一轴的 MeasureOverride 的有效返回），因此它们返回适合所有内容的最小尺寸。他们无法知道自己真正需要填满多少空间。

因此您应该使用网格来实现所需的行为。

【讨论】：

【解决方案2】：

您可以为此目的使用网格控件

试试这个

<Grid HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Name="titleBox" Grid.Column="0" Margin="5,0" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="Your text goes here." />
        <Button Content="press" Grid.Column="1" Margin="5,0" HorizontalAlignment="Stretch"/>

    </Grid>

希望这会有所帮助。

【讨论】：