拉伸项目以填充画布答案

【问题标题】：Stretch items to fill canvas拉伸项目以填充画布
【发布时间】：2012-11-17 05:55:17
【问题描述】：

我有一个 Dockpanel，其中包含 Canvas 内的项目。我放置在画布内的 Dockpanel 和任何其他项目（网格等）仅占用它们所需的最小空间。如何拉伸这些项目以填满整个 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>

谢谢！

【问题讨论】：

标签： wpf canvas controls components

【解决方案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}">

【讨论】：

谢谢！我需要它仍然是我的动画的画布：D
解决了我也遇到的问题：)
也许这是我的网络开发者，但不应该将 Top、Bottom、Left 和 Right 设置为 0 使其表现得像填充整个 Canvas 一样？

【解决方案2】：

你可以做的是：

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

通过像这样将两个面板包裹在一个网格中，您可以在画布中放置您无法相对于左侧、顶部等定位的元素。画布和停靠面板都将填满可用空间。请注意，当在 xaml 中定义停靠面板时，停靠面板中的元素将呈现在画布中的元素之上。

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

【讨论】：