在ProgressBar上应用文本 [英] Applying text over a ProgressBar

问题描述

我是WPF的新手，但我对WPF中的样式非常是新的。 

I'm new to WPF but I'm very new to styles in WPF. 

基本上，我有一个ProgressBar和我试图显示酒吧本身的百分比。我已经想出了如何旋转文本，但我无法将其准确定位到我想要的位置，我更喜欢文本行动< g class =" gr_ gr_259 gr-alert
gr_gramm gr_inline_cards gr_run_anim语法multiReplace"数据-GR-ID =" 259" ID = QUOT; 259">像< / g取代; ProgressBar上的掩码。

Basically, I have a ProgressBar and I'm trying to display the percentage over the bar itself. I've figured out how to rotate the text but I'm unable to position it exactly where I want and I'd prefer for the text to act <g class="gr_ gr_259 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" data-gr-id="259" id="259">like</g> a mask over the ProgressBar.

例如，我的ProgressBar是OrangeRed，文本是黑色。看起来很棒，直到ProgressBar低于15％左右，然后文本才会落入黑色背景。我宁愿文本是OrangeRed，但在ProgressBar上作为一个掩码，在黑色背景中显示
。如果这是有道理的。

For example, my ProgressBar is OrangeRed and the text is Black. Which looks great until the ProgressBar is below 15% or so then the text just falls into the black background. I'd rather the text be OrangeRed but act as a mask when over the ProgressBar, revealing the black background. If that makes sense.

这就是我现在在网格中的内容......

Here's what I have now inside of a Grid...

                       <ProgressBar Grid.Column="2" Orientation="Vertical" Width="20" BorderThickness="0" Foreground="OrangeRed" Background="Transparent"
 Maximum="100" Value="100" />
                        <TextBlock Grid.Column="2" Text="100%" FontWeight="Bold" FontSize="20" VerticalAlignment="Bottom" HorizontalAlignment="Right">
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="-90" />
                            </TextBlock.RenderTransform>
                        </TextBlock>

正如您在此图片中所看到的，文字不是'一直在底部，也不在右边。

As you can see in this pic, the text isn't all the way at the bottom nor is it on the right.

关于如何正确对齐文本的任何想法？

Any ideas on how to properly align the text?

推荐答案

嗨T Gregory，

Hi T Gregory,

根据您的描述，您想在ProgressBar的底部应用文本，我是对吗？

According to your description, you want to applying text at the bottom of ProgressBar, am I right?

如果是，我建议您可以在网格中添加两行，如下所示：

If yes, I suggest you can add two row in grid, like this:

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ProgressBar
            Name="pbLifePassed"           
            Height="24"
            Margin="5"
            Background="Transparent"
            Foreground="OrangeRed"
            Maximum="100"
            Minimum="0"
            Orientation="Vertical"
            Value="14" />
        <TextBlock
            Grid.Row="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            FontSize="20"
            FontWeight="Bold"
            Text="{Binding ElementName=pbLifePassed, Path=Value, StringFormat={}{0:0}%}" />
    </Grid>

如果没有，您可以在这里提供整个项目，我会尝试在我身边重现您的问题。

If not, can you provide entire project here, I will try to reproduce your issue at my side.

最好的问候，

Cherry

这篇关于在ProgressBar上应用文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！