主页布局中忽略的用户控件尺寸

Question

我有一个 Canvas ，上面有一个 Grid 。网格包含 3 列。第一列包含另一个 Grid，第二列不包含任何内容，第三列包含一个图像（一个框）。 （我有一个空白列，用于与此问题无关的动画目的。）

在我的孩子 Grid 中，我有 2 行。第一行包含一个用户控件（盒子的架子），第二行包含一个图像（条形码）。

问题在于布局引擎似乎完全忽略了用户控件的尺寸。在预览中，我看到我的 UserControl 以及直接位于其顶部的其他两个图像。当然，Canvas 不会自动调整其子级的大小，但我已经通过页面的 SizeChanged 事件中的一些调整大小语句解决了这个问题。

事实上，该框在运行时显示在我的窗口的右下角，但条形码的显示位置就好像 UserControl 不存在一样。

有关我的问题的说明，请参阅 http://www.wynright.com/temp/Problem.png

以下是我的 XAML 代码：

<Canvas x:Name="MainCanvas" Background="Silver">
    <Grid Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid Name="LayoutChild" Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <LightPickDemo:Picker x:Name="PickZone" ZoneCleared="PickZone_ZoneCleared" HorizontalAlignment="Left" VerticalAlignment="Top" />
            <Image Name="BarCode" Source="/LightPickDemo;component/Images/BarcodeScan.png" HorizontalAlignment="Center" Stretch="None" VerticalAlignment="Center" Grid.Row="1" />
        </Grid>
        <Image Name="imgShippingBox" Source="/LightPickDemo;component/Images/Empty-Box.png" VerticalAlignment="Bottom" Stretch="None" Grid.Column="2" />
    </Grid>
</Canvas>

所以我想知道我需要做什么才能让 UserControl 为布局引擎提供其大小。我可以在设计器中看到控件的大小，因此编译器清楚地知道该控件有大小。

我希望条形码显示在用户控件下方居中。

以下是 UserControl 的 XAML：

<Canvas>
    <Image Name="ImageBase" Source="/LightPickDemo;component/Images/BayShelves.png" />
    <LightPickDemo:ZoneLight x:Name="ZoneLight" Canvas.Left="345" Canvas.Top="0" ButtonPress="ZoneLight_ButtonPress" />
    <LightPickDemo:PickerModule x:Name="pickerCalculator" Canvas.Left="74" Canvas.Top="266" OnPicked="Picker_PickChanged" />
    <LightPickDemo:PickerModule x:Name="pickerCalendar" Canvas.Left="207" Canvas.Top="266" OnPicked="Picker_PickChanged" />
    <LightPickDemo:PickerModule x:Name="pickerPaperClip" Canvas.Left="521" Canvas.Top="266" OnPicked="Picker_PickChanged" />
    <LightPickDemo:PickerModule x:Name="pickerRuler" Canvas.Left="649" Canvas.Top="266" OnPicked="Picker_PickChanged" />
    <LightPickDemo:PickerModule x:Name="pickerScissor" Canvas.Left="75" Canvas.Top="532" OnPicked="Picker_PickChanged" />
    <LightPickDemo:PickerModule x:Name="pickerStapler" Canvas.Left="250" Canvas.Top="532" OnPicked="Picker_PickChanged" />
    <LightPickDemo:PickerModule x:Name="pickerStapleRemover" Canvas.Left="435" Canvas.Top="532" OnPicked="Picker_PickChanged" />
    <LightPickDemo:PickerModule x:Name="pickerTapeDispenser" Canvas.Left="635" Canvas.Top="532" OnPicked="Picker_PickChanged" />
</Canvas>

Answer 1

用户控件的 ActualHeight 很可能为零。查看用户控件的 XAML，您应该能够在用户控件的 XAML 中设置 Height 和 Width。

Answer 2

我无法从您的图像中确定 UserControl 是什么，但如果您将属性设置为“折叠”，引擎将不会读取我认为不正确的大小。如果 UserControl 不可见，但您想要显示尺寸，请为不透明度属性而不是可见性设置动画。条形码位于第 1 行（即顶行），它应该位于第 2 行吗？

我是否正确假设条形码需要位于带有 2 行盒子的图像下方？用户控件在哪里？它是什么？

Answer 3

我的问题的答案似乎是将以下代码放入我的 UserControl 中，但是，我无法想象这是最好的答案，而且我知道它根本不允许屏幕缩放。因此，如果有人知道如何正确执行此操作，请告诉我。

感谢华尔街程序员引导我找到了这个解决方法。

Protected Overrides Function MeasureOverride(ByVal availableSize As System.Windows.Size) As System.Windows.Size
    Dim bmp As BitmapImage
    bmp = BaseImage.Source
    Return New Size(bmp.PixelWidth, bmp.PixelHeight)
    'Return MyBase.MeasureOverride(availableSize)
End Function