垂直对齐= 画布内标签的"Stretch"不起作用

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>