Текст на ProgressBar в WPF - PullRequest
       59

Текст на ProgressBar в WPF

50 голосов
/ 16 сентября 2008

Это может быть легкой задачей для WPF Cognoscenti, но я хотел бы знать, если есть простой способ поместить текст в WPF ProgressBar. Для меня пустой индикатор выполнения выглядит голым. Это экранная недвижимость, которая может нести сообщение о о том, что выполняется, или даже просто добавить цифры к представлению. Теперь WPF - это все о контейнерах и расширениях, и я постепенно обдумываю это, но так как я не вижу свойства «Текст» или «Содержимое», я думаю, что мне придется что-то добавить в контейнер, который является моим индикатором выполнения. Есть ли техника или два, которые более естественны, чем мои оригинальные импульсы WinForms? Какой самый лучший, самый естественный для WPF способ добавления текста в индикатор выполнения?

Ответы [ 6 ]

58 голосов
/ 19 сентября 2008

Оба предыдущих ответа (создание нового CustomControl или Adorner) являются лучшими практиками, но если вы просто хотите быстро и грязно (или визуально понять, как это сделать), тогда этот код будет работать:

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

Просто помните, что z-индекс таков, что последний элемент в списке будет сверху.

Кроме того, если у вас еще нет Kaxaml , не забудьте забрать его - он отлично подходит для игры с XAML, когда вы пытаетесь разобраться.

28 голосов
/ 19 июня 2015

Это может быть очень просто (если есть множество способов заставить это работать).

Вы можете использовать Style, чтобы сделать это, или просто наложить TextBlock и ProgressBar.

Я лично использую это, чтобы показать процент прогресса при ожидании завершения.

Чтобы было очень просто, я хотел иметь только one 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>

Вот как это может выглядеть:

enter image description here

Ознакомьтесь с WPF Tutorial для полного поста.

28 голосов
/ 16 сентября 2008

Если вам нужен многократно используемый метод для добавления текста, вы можете создать новый стиль / ControlTemplate, который имеет дополнительный TextBlock для отображения текста. Вы можете перехватить вложенное свойство TextSearch.Text, чтобы установить текст на индикаторе выполнения.

Если его не нужно многократно использовать, просто поместите индикатор выполнения в сетку и добавьте текстовый блок в сетку. Поскольку WPF может составлять элементы вместе, это будет прекрасно работать.

Если вы хотите, вы можете создать UserControl, который отображает ProgressBar и TextBlock в качестве открытых свойств, так что это будет меньше работы, чем создание пользовательского ControlTemplate.

5 голосов
/ 16 сентября 2008

Вы можете использовать Adorner для отображения текста поверх него.

См. MSDN статью об Adorners

Вы бы создали класс, который наследуется от класса Adorner. Переопределите метод OnRender, чтобы нарисовать нужный текст. Если вы хотите, вы можете создать свойство зависимости для вашего пользовательского Adorner, который содержит текст, который вы хотите отобразить. Затем используйте пример в ссылке, которую я упомянул, чтобы добавить этого Adorner в слой adorner вашего индикатора выполнения.

1 голос
/ 29 января 2016

Щелкните правой кнопкой мыши ProgressBar и выберите Редактировать шаблон> Редактировать копию.

Затем поместите TextBlock, как показано ниже, чуть выше закрывающего тега Grid в стиле, созданном VS.

   <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
   <TextBlock Background="Transparent" Text="work in progress" Foreground="Black" TextAlignment="Center"/>
 </Grid>
 <ControlTemplate.Triggers>
0 голосов
/ 14 января 2019

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>

Rezult:

enter image description here


То же самое, но с% прогресса :

<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>

enter image description here

...