代码之家 › 专栏 › 技术社区 › Jacob Proffitt

WPF中进度条上的文本

progress-bar controls wpf .net

Jacob Proffitt · 技术社区 · 16 年前

什么

6 回复 | 直到 16 年前

g t Omri Btian 10 年前

两个先前的响应(创建新的 CustomControl 或 Adorner

<Grid Width="300" Height="50">  
   <ProgressBar Value="50" />
   <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
      My Text
   </TextBlock>
</Grid>

请记住,z索引是这样的,即列出的最后一项将位于顶部。

还有,如果你没有 Kaxaml 但是,一定要记住,当你试图弄清楚事情的时候,使用XAML是非常好的。

Felix D. 6 年前

这可能非常简单

你可以用 Style 要完成此操作,或者只需覆盖一个 TextBlock ProgressBar .

我个人用它来显示等待完成时的进度百分比。

为了简单起见,我只想 Binding 只有所以我附加了 TextBock.Text 到 ProgressBar.Value

然后只需复制代码即可完成。

<Grid>
   <ProgressBar Minimum="0" 
                Maximum="100" 
                Value="{Binding InsertBindingHere}" 
                Name="pbStatus" />
   <TextBlock Text="{Binding ElementName=pbStatus, Path=Value, StringFormat={}{0:0}%}" 
           HorizontalAlignment="Center" 
           VerticalAlignment="Center" />
</Grid>

下面是它的样子:

WPF Tutorial 全部职位。

Abe Heidebrecht 16 年前

如果需要使用可重用的方法添加文本,可以创建一个新的样式/控制模板,该模板具有一个额外的文本块来显示文本。您可以劫持TextSearch.Text attached属性来设置进度条上的文本。

如果需要,可以创建一个UserControl,它将ProgressBar和TextBlock公开为公共属性,因此与创建自定义ControlTemplate相比,它的工作量更少。

Bob Wintemberg 16 年前

您可以使用装饰器在其上方显示文本。

看见 MSDN article on Adorners

Andrew_STOP_RU_WAR_IN_UA 6 年前

ProgressBar,包含来自2个属性的文本和绑定( 值/最大值 ):

<Grid>
    <ProgressBar Name="pbUsrLvl"
                 Minimum="1" 
                 Maximum="99" 
                 Value="59" 
                 Margin="5"  
                 Height="24"  Foreground="#FF62FF7F"/>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock.Text>
            <MultiBinding StringFormat="{}UserLvl:{0}/{1}">
                <Binding Path="Value" ElementName="pbUsrLvl" />
                <Binding Path="Maximum" ElementName="pbUsrLvl" />
            </MultiBinding>
        </TextBlock.Text>
    </TextBlock>
</Grid>

同样但是 以%的进度 :

<Grid>
    <ProgressBar Name="pbLifePassed"
                 Minimum="0" 
                 Value="59" 
                 Maximum="100"
                 Margin="5" Height="24" Foreground="#FF62FF7F"/>
    <TextBlock Text="{Binding ElementName=pbLifePassed, Path=Value, StringFormat={}{0:0}%}" 
           HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>

AnjumSKhan 9 年前

右击 ProgressBar ,然后单击编辑模板>编辑一份副本。

然后把 TextBlock 如下图所示,就在 Grid

   <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
   <TextBlock Background="Transparent" Text="work in progress" Foreground="Black" TextAlignment="Center"/>
 </Grid>
 <ControlTemplate.Triggers>

Julian Abdulwahab Alhendi 5 年前

这是基于给出的答案。由于我使用的是MahApps Metro,因此我得出以下结论:

<Grid>
    <metro:MetroProgressBar x:Name="pbar" Value="50" Height="20"></metro:MetroProgressBar>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"></TextBlock>
</Grid>

如果要使用Metro样式的普通条:

<Grid>
    <ProgressBar x:Name="pbar" Value="50" Height="20" Style="{StaticResource MetroProgressBar}"></ProgressBar>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"></TextBlock>
</Grid>

<Grid>
    <ProgressBar x:Name="pbar" Value="60" Height="20" Style="{x:Null}"></ProgressBar>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=pbar, Path=Value, StringFormat={}{0:0}%}"></TextBlock>
</Grid>

发生了什么事?

因此,您只需使用progressbar即可。将progressbar放入网格中,并在其中放置一个文本块。