2

Есть TextBlock и ProgressBar в WPF. Фон у окна чёрный.

<TextBlock Text="My First Text" Foreground="White" TextAlignment="Center" VerticalAlignment="Center" FontSize="35"/>
<ProgressBar Width="600" Height="100"/>

Вопрос: Как сделать так, чтобы value у ProgressBar увеличивалось заполняя текст белым цветом слева направо?

5
  • Что вы имеете ввиду? Можете показать эскиз? 8 апр 2018 в 15:38
  • По умолчанию фон и текст чёрные. Нужно, чтобы ProgressBar наложился на текст и, изменяя value, заполнял текст белым цветом. Грубо говоря, ForeGround у текста должно быть ProgrssBar 8 апр 2018 в 15:41
  • Вам нужен VisualBrush по идее. Или LinearGradientBrush с привязкой
    – VladD
    8 апр 2018 в 16:56
  • Можете показать, как их нужно использовать? 8 апр 2018 в 18:13

1 ответ 1

5

Предлагаю такое простое решение:

Возьмем 2 TextBox и обернем их Gridом, причем в гриде 2 колонки и текстблоки расположены каждый в своей колонке. Текстблоки выравниваем левый по левому краю, правый - по правому. Ширину грида установим равной ширине одного текстблока. Всё: теперь простой регулировкой ширины колонки грида текстблоки будут торчать на ту или иную ширину. Нам понадобится лишь конвертер, который, в зависимости от значения ProgressBar, будет вычислять требуемую ширину колонки:

public class ProgressToWidthConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        var minimum = (double)values[0];
        var maximum = (double)values[1];
        var value = (double)values[2];
        var width = (double)values[3];
        var part = (value - minimum) / (maximum - minimum);
        return new GridLength(part * width);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Разметка:

<StackPanel Background="Gray">
    <Grid Width="{Binding ElementName=Template, Path=ActualWidth}">
        <Grid.Resources>
            <local:ProgressToWidthConverter x:Key="conv"/>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition>
                <ColumnDefinition.Width>
                    <MultiBinding Converter="{StaticResource conv}">
                        <Binding ElementName="ProgressBar" Path="Minimum"/>
                        <Binding ElementName="ProgressBar" Path="Maximum"/>
                        <Binding ElementName="ProgressBar" Path="Value"/>
                        <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Grid}" Path="ActualWidth"/>
                    </MultiBinding>
                </ColumnDefinition.Width>
            </ColumnDefinition>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Name="Template" Text="Some text" Foreground="White" HorizontalAlignment="Left"/>
        <TextBlock Grid.Column="1" Text="{Binding ElementName=Template, Path=Text}" Foreground="Black" HorizontalAlignment="Right"/>
    </Grid>
    <ProgressBar Name="ProgressBar" Height="10" Minimum="0" Maximum="100"/>
</StackPanel>

Поехали:

введите сюда описание изображения

Минимальные модификации разметки позволяют добиться разных способов заливки текста: слева направо, справа налево, изнутри наружу, снаружи внутрь, сверзу вниз и т.д.:

введите сюда описание изображениявведите сюда описание изображения

3
  • Отличное решение! Не могли бы Вы подробнее объяснить класс, вычисляющий ширину колонки? Какие модификации разметки позволяют добиться разных способов заливки? 10 апр 2018 в 23:27
  • Хм, а что не понятно? Представьте себе числовую ось и на ней отметки в точках равных Minimum (т.А), Maximum (т.С) и Value (т.В), нам нужно узнать какую часть отрезка АС составляет отрезок АВ. Длина АВ это value - minimum, длина АС это maximum - minimum. Просто делим и получаем нужную долю. Например, если minimum = 100, maximum = 200, a value = 150, то получим 0,5, умножаем это значение на полную ширину текстблока (пусть 60 пикселей) и получаем что нам надо закрасить половину (30 пикселей) 11 апр 2018 в 6:12
  • А модификации разметки такие: чтобы получить заливку справа налево, просто меняем в гриде способы вычисления ширины столбцов, тогда левый будет иметь ширину *, а правый - вычисляться через конвертер (как в примере). Чтобы заполнять из центра наружу - надо сделать 3 столбца (и соответственно 3 текстблока), левый и правый *, а центральный - через конвертер. И т.д. 11 апр 2018 в 6:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.