Question

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

<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的{{1}}：

ActualWidth

但如上所述，如果您对动态拉伸布局感兴趣，<Canvas> <Label Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Canvas}}, Path=ActualWidth}">...</Label> </Canvas>不是理想的控制选择。

Answer 2

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

Answer 3

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

<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>在可用空间内动态（并独立）布局：

{{1}}

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

4 个答案: