Grid.IsSharedSizeScope 和 ItemsControl.ItemTemplate 的 WPF 布局问题答案

【问题标题】：WPF layout problem with Grid.IsSharedSizeScope and ItemsControl.ItemTemplateGrid.IsSharedSizeScope 和 ItemsControl.ItemTemplate 的 WPF 布局问题
【发布时间】：2011-06-27 01:05:40
【问题描述】：

我正在尝试使用 Grid.IsSharedSizeScope 将 ItemsControl 显示的数据绑定控件排列在 Grid 第一列中的某些控件旁边。

问题是我无法阻止控件持续垂直增长。

如何在不设置 MaxHeight 属性的情况下阻止他们这样做。我在各个地方尝试了不同的 VerticalAlignment 和 VerticalContentAlignment 设置，但无法弄清楚。

<Grid Grid.IsSharedSizeScope="True" >
    <Grid.RowDefinitions>
        <RowDefinition SharedSizeGroup="RowOne" />
        <RowDefinition SharedSizeGroup="RowTwo" />
        <RowDefinition SharedSizeGroup="RowThree" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <SomeControl Grid.Row="0" Grid.Column="0" />
    <SomeControl Grid.Row="1" Grid.Column="0" />
    <ItemsControl Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" ItemsSource="{Binding Path=SomeSource}" ItemsPanel="{StaticResource MyHorizontalStackPanel}" >
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition SharedSizeGroup="RowOne" />
                            <RowDefinition SharedSizeGroup="RowTwo" />
                            <RowDefinition SharedSizeGroup="RowThree" />
                        </Grid.RowDefinitions>
                        <SomeControl Grid.Row="0" />
                        <SomeControl Grid.Row="1" />
                        <SomeControl Grid.Row="2" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

【问题讨论】：

标签： wpf xaml layout

【解决方案1】：

尝试在嵌套网格上使用 Grid.IsSharedSizeScope 不好，将 Grid 和 ItemsControl 并排放置在另一个具有两列的 Grid 中，很好。

这是我自己的愚蠢的解决方案：

<!-- outer grid (could be a stack panel) -->
<Grid Grid.IsSharedSizeScope="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <!-- header -->
    <Grid Grid.Column="0" Margin="0,10,10,0">
        <Grid.RowDefinitions>
            <RowDefinition SharedSizeGroup="RowOne" />
            <RowDefinition SharedSizeGroup="RowTwo" />
            <RowDefinition SharedSizeGroup="RowThree" />
        </Grid.RowDefinitions>
        <SomeControl Grid.Row="0" Grid.Column="0" />
        <SomeControl Grid.Row="1" Grid.Column="0" />
    </Grid>
    <!-- rows -->
    <ItemsControl Grid.Column="1" ItemsSource="{Binding Path=SomeSource}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition SharedSizeGroup="RowOne"   Height="Auto" />
                        <RowDefinition SharedSizeGroup="RowTwo"   Height="Auto" />
                        <RowDefinition SharedSizeGroup="RowThree" Height="Auto" />
                    </Grid.RowDefinitions>
                    <!-- define your row here -->
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

【讨论】：

虽然已经4年了...我必须说..不要对自己这么苛刻;-)
+1。非常感谢。当使用与您问题中的示例类似的内容时，您的方法消除了我在标题中看到的一些可怕的闪烁。之前它陷入了某种无休止的布局循环，但这种新方法解决了它。