拉伸项目以填满画布

Question

我有一个Dockpanel，里面有一些放在Canvas中的元素。无论我把哪些其他控件（比如Grid）放进Canvas中，都只会占据它们的最小空间。请问如何让这些元素自动拉伸以充满整个Canvas？

    <Canvas x:Name="InfoCanvas" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="72,53,0,0">
        <DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="ReferenceInfo" Canvas.Left="0" Canvas.Top="0">
            <TextBox x:Name="ReferenceAuthor" GotFocus="FieldEnter" LostFocus="FieldLeave" FontSize="16" FontFamily="Segoe UI Light" Text="Author" Foreground="Gray" Background="Transparent" DockPanel.Dock="Top" VerticalAlignment="Top" HorizontalAlignment="Stretch" BorderThickness="0" Margin="0,2,0,2"/>
            <TextBox x:Name="ReferenceTitle" GotFocus="FieldEnter" LostFocus="FieldLeave" FontSize="16" FontFamily="Segoe UI Light" Text="Title" Foreground="Gray" Background="Transparent" DockPanel.Dock="Top" VerticalAlignment="Top" HorizontalAlignment="Stretch" BorderThickness="0" Margin="0,2,0,2"/>
            <TextBox x:Name="ReferenceDate" GotFocus="FieldEnter" LostFocus="FieldLeave" FontSize="16" FontFamily="Segoe UI Light" Text="Date" Foreground="Gray" Background="Transparent" DockPanel.Dock="Top" VerticalAlignment="Top" HorizontalAlignment="Stretch" BorderThickness="0" Margin="0,2,0,2"/>
        </DockPanel>  
    </Canvas>

谢谢！

- JosephGarrone

Answer 1

Canvas 面板不支持这种功能。它非常基础——只允许您使用顶部、底部、左侧和右侧绝对定位子元素，并且总是给它们所需的空间。因此，通常您会使用仅具有1列和1行的 Grid。但是，您可以将 DockPanel 的宽度和高度绑定到 Canvas 的宽度和高度。这样，DockPanel 就会始终填充 Canvas。

<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
            Margin="0,0,0,0" x:Name="ReferenceInfo" Canvas.Left="0" Canvas.Top="0"
            Width="{Binding ActualWidth, ElementName=InfoCanvas}"
            Height="{Binding ActualHeight, ElementName=InfoCanvas}">

- Peter Hansen

---

谢谢！我需要它仍然是一个画布来制作我的动画:D - JosephGarrone

解决了我遇到的问题，太棒了：） - Kestami

也许这是我作为 Web 开发者的想法，但是将 Top、Bottom、Left 和 Right 设置为 0，难道不应该使其看起来像填满整个画布吗？ - Adam Plocher

Answer 2

你可以做的事情有：

<Grid>
    <Canvas x:Name="InfoCanvas">
        <!--Elements with canvas layout here-->
    </Canvas>
    <DockPanel x:Name="ReferenceInfo">
        <!--Elements with dockpanel layout here-->
    </DockPanel>
</Grid>

通过在网格中包装两个面板，您可以将要相对于左侧、顶部等位置定位的元素放置在画布中。画布和停靠面板都将填充可用空间。请注意，在xaml中定义停靠面板后，停靠面板中的元素将呈现在画布中的元素上方。

我假设您发布的代码是伪代码，如果不是，请删除画布。

- Johan Larsson