拉伸项目以填充画布

时间:2012-11-29 07:45:35

标签: wpf canvas controls components

我有一个带有Canvas内部项目的Dockpanel。 Dockpanel和我放置在Canvas中的任何其他项(Grid等),只占用它们所需的最小空间。如何拉伸这些项目以填充整个画布?

    <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>

谢谢!

2 个答案:

答案 0 :(得分:33)

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}">

答案 1 :(得分:2)

你能做的是:

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

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

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