VerticalAlignment=“拉伸”对于画布内的标签不起作用

Question

如何在 Canvas 内使用 VerticalAlignment="Stretch" 和 Label？我试图将按钮中的文本“取消”居中，如下面的代码所示。使用标签的固定高度和宽度并不是理想的选择。

<Button Name="buttonCancel" Width="80" Height="40" IsCancel="True" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Canvas>
        <Label Canvas.Top="0" Canvas.Left="0" Padding="0" FontSize="10">Esc</Label>
        <Label VerticalContentAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">Cancel</Label>
    </Canvas>
</Button>

Answer 1

使用与 Canvas 的 ActualWidth 的绑定：

<Canvas>
    <Label Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Canvas}}, Path=ActualWidth}">...</Label>
</Canvas>

但如上所述，如果您对动态拉伸布局感兴趣，则 Canvas 并不是控制的理想选择。

Answer 2

Canvas 不会对其内容执行任何缩放布局；如果要缩放内容，在这种情况下可以使用 Grid，默认情况下，它将缩放两个 Label 元素以填充 Content 空间。

Answer 3

假设您需要用于其他具有固定性质的对象的画布，您可以将 Canvas 覆盖在 Grid 上，然后将标签放入网格中。您可以将标签放在画布之前，使它们成为背景 z 索引（被画布对象覆盖），或将标签放在画布之后，使它们具有更高的 z 索引（将覆盖画布对象）。例如：

<Button Name="buttonCancel" Width="80" Height="40" IsCancel="True" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid>
        <Label Padding="0" FontSize="10">Esc</Label>
        <Label VerticalContentAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">Cancel</Label>
        <Canvas>
            <!-- Your Canvas content here -->
        </Canvas>
    </Grid>
</Button>

Answer 4

重复我的评论中的解决方案，因为 (a) 你真的不需要 Canvas 并且 (b) 听起来这解决了你的问题，所以我将把它作为答案更容易被其他人看到。

Canvas 适用于固定像素大小的布局，这可能是最不常见的情况。您应该将 Canvas 替换为 Grid，如下所示，以便两个 Label 都在可用空间内动态（且独立）布局:

<Grid>
    <Label Padding="0" FontSize="10">Esc</Label>
    <Label VerticalAlignment="Center" HorizontalAlignment="Center">Cancel</Label>
</Grid>