【问题标题】:XAML : How to make content size force height of parent and other objects?XAML:如何使内容大小强制父对象和其他对象的高度?
【发布时间】:2012-12-01 19:41:21
【问题描述】:

如果可能,我想用纯 XAML 解决以下问题,但如果不可能,请告诉我。我也没有 C# 解决方案,所以如果必须使用它,请发送给我适当的路径:

在下面,有一个 2 列的网格。左列是具有动态内容的滚动查看器。右列是具有动态内容的堆栈面板。我希望右栏的内容控制父网格和左栏的高度——换句话说,我希望右栏为主。在右列中可能有 3 个项,也可能有 10 个。如果只有 3 个,则整个网格的高度应该很短,并且左侧滚动查看器中的内容应该滚动。左侧滚动查看器中可能有 100 个项目,所以我不能让该项目控制高度。

下面是示例代码:

    <Grid x:Name="grd_Parent" Background="#FFF4E9FF">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <ScrollViewer x:Name="Left" Grid.Column="0">
            <!-- This side should scale (and scroll) to the height of the right column-->
            <StackPanel VerticalAlignment="Top">
                <Rectangle Height="50" Fill="Red"/>
                <Rectangle Height="50" Fill="Blue"/>
                <Rectangle Height="50" Fill="Black"/>
                <Rectangle Height="50" Fill="Brown"/>
                <Rectangle Height="50" Fill="Purple"/>
                <Rectangle Height="50" Fill="DarkGreen"/>
                <Rectangle Height="50" Fill="Violet"/>
                <Rectangle Height="50" Fill="Wheat"/>
                <Rectangle Height="50" Fill="DarkCyan"/>
                <Rectangle Height="50" Fill="DarkGray"/>
                <Rectangle Height="50" Fill="DarkOrange"/>
            </StackPanel>
        </ScrollViewer>
        <StackPanel x:Name="Right" Grid.Column="1" VerticalAlignment="Top">
            <!-- This content is dynamic as well, but height of this should be the height of the parent grid -->
            <TextBlock Height="50" Text="This"/>
            <TextBlock Height="50" Text="Side"/>
            <TextBlock Height="50" Text="Should"/>
            <TextBlock Height="50" Text="Determine"/>
            <TextBlock Height="50" Text="The"/>
            <TextBlock Height="50" Text="Height"/>
            <TextBlock Height="50" Text="Of"/>
            <TextBlock Height="50" Text="Parent"/>
        </StackPanel>
    </Grid>

这里是示例的屏幕截图,因为它存在:

这是我希望它看起来像的屏幕截图:

提前致谢, 比姆斯

【问题讨论】:

  • 能否使用元素绑定将 ScrollViewer 或内部 StackPanel 的高度绑定到 Right StackPanel 的高度?

标签: c# xaml


【解决方案1】:

试试这个,让我知道它是否有效。以下更改导致 ScrollViewer 绑定到 StackPanel 的 ActualHeight。这样,它永远不会大于 StackPanel。

<Grid x:Name="grd_Parent" Background="#FFF4E9FF">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <ScrollViewer x:Name="Left" Height="{Binding ElementName=Right, Path=ActualHeight}" Grid.Column="0">
        <!-- This side should scale (and scroll) to the height of the right column-->
        <StackPanel VerticalAlignment="Top">
            <Rectangle Height="50" Fill="Red"/>
            <Rectangle Height="50" Fill="Blue"/>
            <Rectangle Height="50" Fill="Black"/>
            <Rectangle Height="50" Fill="Brown"/>
            <Rectangle Height="50" Fill="Purple"/>
            <Rectangle Height="50" Fill="DarkGreen"/>
            <Rectangle Height="50" Fill="Violet"/>
            <Rectangle Height="50" Fill="Wheat"/>
            <Rectangle Height="50" Fill="DarkCyan"/>
            <Rectangle Height="50" Fill="DarkGray"/>
            <Rectangle Height="50" Fill="DarkOrange"/>
        </StackPanel>
    </ScrollViewer>
    <StackPanel x:Name="Right" Grid.Column="1" VerticalAlignment="Top">
        <!-- This content is dynamic as well, but height of this should be the height of the parent grid -->
        <TextBlock Height="50" Text="This"/>
        <TextBlock Height="50" Text="Side"/>
        <TextBlock Height="50" Text="Should"/>
        <TextBlock Height="50" Text="Determine"/>
        <TextBlock Height="50" Text="The"/>
        <TextBlock Height="50" Text="Height"/>
        <TextBlock Height="50" Text="Of"/>
        <TextBlock Height="50" Text="Parent"/>
    </StackPanel>
</Grid>

【讨论】:

  • 完美!我在 Grid 中添加了相同的绑定,它也进行了缩放!我之前尝试过绑定,但我不知道“Path=ActualHeight”!谢谢谢谢谢谢!
  • 没问题!如果查看此内容的任何人使用 Silverlight,请不要使用此代码,因为 ActualHeight 属性不会发布对值的更新。有关“备注”部分下第三段的更多详细信息,请参见此处:msdn.microsoft.com/en-us/library/…
猜你喜欢
  • 1970-01-01
  • 2019-11-27
  • 1970-01-01
  • 2015-06-25
  • 2012-04-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多