為什么我的UserControl的大小為零？

Question

在布局過程中，我的用戶控件似乎未遵循Horizo​​ntalAlignment或VerticalAlignment。

我有一個Windows Store XAML用戶控件，定義如下：

<UserControl
    x:Class="IWalker.Views.PDFPageUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:IWalker.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="200"
    d:DesignWidth="250">

    <Image x:Name="ThumbImage"/>

</UserControl>

它位於ItemsControl水平列表中，如下所示（為簡便起見，我將Page XAML decl放在了頂部，但它來自Windows Store空白模板）：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ScrollViewer VerticalScrollMode="Disabled" HorizontalScrollMode="Auto" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
        <ItemsControl x:Name="SlideStrip">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:PDFPageUserControl Margin="0 0 5 0" Height="{Binding Path=ActualHeight, ElementName=SlideStrip, Mode=OneWay}" ViewModel="{Binding}" RespectRenderingDimension="Vertical" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>

如您所見，PDFPageUserControl的Height綁定到將要放置的ItemsControl的ActualHeight。發生這種情況時，一切正常。 如果我刪除該綁定，則我的用戶控件的大小為0,0。

這是棘手的部分。 PDFPageUserControl沒有隱式大小。 我需要設置其高度，寬度或兩者（如您在上面的代碼片段中所見）。 然后，它將使用PDF渲染代碼生成正確大小的圖像並顯示（所有這些工作）。

我的理論是，Windows Store XAML的自動布局默認情況下不會嘗試擴展內容。 它使大多數控件可以確定自己的大小，並將其報告給布局引擎。 然后，布局引擎圍繞它們進行布局，從而建立布局。 我的報告說它最初是0,0，等待被告知其高度，以便它可以通知系統其寬度，反之亦然。 由於ItemsControl的StackPannel從不強制項目拉伸以適合其內部，因此不會發生。

但是，很明顯，某些控件被允許擴展以填充所有可用空間，例如此處的Grid或ScrollViewer。 我以為“水平”和“垂直”對齊的“拉伸”模式將在布局引擎中為您完成此操作。 但這似乎對我的UserControl不起作用-好像我沒有正確參與布局過程。

有沒有一種方法可以修復我的控件，使其按水平對齊和垂直對齊的順序拉伸以填充可用空間？

如果您覺得這里缺少一些基本的信息/代碼，請詢問，我會添加它。 您還可以在此處查看所有代碼： https : //github.com/gordonwatts/IndicoWalker/tree/master/IWalker/IWalker.Windows/Views

Answer 1

WinRT / XAML中的ActualHeight不可綁定-它不會引發更改通知，因此您應該手動更新它。 考慮我對這個問題的DoubleViewModel答案：

帶有2列的GridView，填充寬度

Answer 2

事實證明，解決此特定問題的關鍵是參與布局引擎的過程。 特別是，用戶控件應覆蓋MeasureOverride方法。 完成此操作后，我可以在上面的XAML中刪除Height綁定。

MeasureOverride會告訴您可用的大小，這取決於諸如VerticalAlignment和Horizo​​ntalAlignment之類的內容。 視情況而定，某些建議的大小將是合理的數字，而其他大小將為NaN。 然后，我可以計算圖像的大小，然后將其遞回。

完成后，布局引擎將調整我的UserControl的大小。 我迷上了SizeChanged事件，每次看到它，我都會重新生成圖像。 結果代碼很干凈！

對於新手，請注意-確保為可用大小輸入NaN值。