VariableSizedWrapGrid 和 WrapGrid 儿童尺寸测量答案

【问题标题】：VariableSizedWrapGrid and WrapGrid children size measuringVariableSizedWrapGrid 和 WrapGrid 儿童尺寸测量
【发布时间】：2012-07-23 15:38:32
【问题描述】：

VariableSizedWrapGrid 和 WrapGrid 都有奇怪的衡量标准 - 他们根据第一项衡量所有孩子。

因此，以下 XAML 将剪辑第三项。

    <VariableSizedWrapGrid Orientation="Horizontal">
        <Rectangle Width="50" Height="100" Margin="5" Fill="Blue" />
        <Rectangle Width="50" Height="50" Margin="5" Fill="Red" />
        <Rectangle Width="50" Height="150" Margin="5" Fill="Green" />
        <Rectangle Width="50" Height="50" Margin="5" Fill="Red" />
        <Rectangle Width="50" Height="100" Margin="5" Fill="Red" />
    </VariableSizedWrapGrid>

似乎VariableSizedWrapGrid 测量第一个项目，然后用第一个项目的所需大小测量其余的孩子。

有什么解决方法吗？

【问题讨论】：

标签： windows-8 microsoft-metro windows-runtime

【解决方案1】：

您需要在每个 Rectangle VariableSizeWrapGrid.ColumnSpan 和 VariableSizeWrapGrid.RowSpan 上使用附加属性，并将 ItemHeight 和 ItemWidth 添加到 VariableSizeWrapGrid：

<VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="50" ItemWidth="50"> 
    <Rectangle 
        VariableSizedWrapGrid.ColumnSpan="1" 
        VariableSizedWrapGrid.RowSpan="2"
        Width="50" Height="100" Margin="5" Fill="Blue" /> 
</VariableSizedWrapGrid>

【讨论】：

【解决方案2】：

这可能不是最好的方法，但这就是我在@MetroRSSReader 应用程序中的做法

<common:VariableGridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid ItemWidth="225" 
                                           ItemHeight="{Binding ElementName=bounds, Path=Text}" 
                                           MaximumRowsOrColumns="5" Orientation="Vertical"
                                           />
                </ItemsPanelTemplate>
                </common:VariableGridView.ItemsPanel>
        </common:VariableGridView>

注意 ItemHeight 值绑定到 TextBlock

<TextBlock x:Name="bounds" Grid.Row="1" Margin="316,8,0,33" Visibility="Collapsed"/>

在LayoutAwarePage.cs中设置

public string Fix_item_height_for_current_screen_resolution()
    {
        var screenheight = CoreWindow.GetForCurrentThread().Bounds.Height;
        var itemHeight = screenheight < 1000 ? "100" : "140";

        return itemHeight;
    }

您可以浏览完整的源代码http://metrorssreader.codeplex.com/SourceControl/changeset/view/18233#265970

【讨论】：

【解决方案3】：

要使用 VariableSizeWrapGrid，您应该创建自己的 GridView 自定义控件并覆盖 PrepareContainerForItemOverride 并在该方法中设置元素 RowSpan 和 ColumnSpan。这样每个元素都有自己的高度/宽度。

这是 Jerry Nixon 的精彩教程/演练：http://dotnet.dzone.com/articles/windows-8-beauty-tip-using

【讨论】：

任何想法如何添加这样的行/列跨度会在模型更改时获得数据绑定和更新。 PrepareContainerForItemOverride 不会在更改时调用。

【解决方案4】：

今天设法解决了这个问题。您需要使用 WinRT XAML 工具包 (http://winrtxamltoolkit.codeplex.com) 中的 VisualTreeHelperExtension.cs。对我来说，我试图调整一个以 GridView 作为其 ItemsPanelTemplate 的 ListView，同样的概念应该适用于你。

1) 附加到 ListView 的 LayoutUpdated 事件（此时您需要更新尺寸）

_myList.LayoutUpdated += _myList_LayoutUpdated;

2) 使用 VisualTreeHelperExtensions.GetDescendantsOfType() 在您的项目的数据模板中查找常见（且唯一）元素类型（例如：宽度动态的 TextBlock）：

var items = VisualTreeHelperExtensions.GetDescendantsOfType<TextBlock>(_myList);  

if (items == null || items.Count() == 0)
  return;

3) 获取找到的项目的最大宽度：

double maxWidth = items.Max(i => i.ActualWidth) + 8;

4) 使用 VisualTreeHelperExtensions.GetDescendantsOfType() 找到 ListView 的主 WrapGrid 容器：

var wg = _categoryList.GetDescendantsOfType<WrapGrid>();
if (wg == null || wg.Count() != 1)
  throw new InvalidOperationException("Couldn't find main ListView container");

5) 将 WrapGrid 的 ItemWidth 设置为您计算的 maxWidth：

wg.First().ItemWidth = maxWidth;

【讨论】：