Как создать отрицательный угловой радиус

Итак, у меня есть этот Progress-Bar и на его правой стороне простой Border, который внутри этого Border я хочу поместить Label (Progress-Bar находится на левой стороне):

И вот после этого 2 Progress-Bar со значением 100%:

Как создать отрицательный угловой радиус

Как вы можете видеть, я вижу Progress-BarCorner Radius, и я хочу, чтобы моя левая сторона Border была с отрицательным Corner Radius

Мой стиль Progress-Bar:

<Style x:Key = "{x:Type ProgressBar}" TargetType = "{x:Type ProgressBar}">
        <Setter Property = "Template">
            <Setter.Value>
                <ControlTemplate TargetType = "{x:Type ProgressBar}">
                    <Grid MinHeight = "14" MinWidth = "200">
                        <Border Name = "PART_Track"
                                CornerRadius = "5,0,0,5"
                                Background = "{DynamicResource ProgressBarBackgroundColor}"
                                BorderBrush = "{DynamicResource ProgressBarBackgroundColor}"
                                BorderThickness = "0" />
                        <Border Name = "PART_Indicator"
                                CornerRadius = "8" 
                                Background = "{DynamicResource ProgressBarFillBackgroundColor}"
                                BorderBrush = "{DynamicResource ProgressBarFillBackgroundColor}" 
                                BorderThickness = "0" 
                                HorizontalAlignment = "Left" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

XAML

<StackPanel Orientation = "Horizontal">
    <ProgressBar Name = "progressBar"
                 Height = "20"
                 Width = "700"
                 Minimum = "0"
                 VerticalAlignment = "Center"
                 Maximum = "100"
                 HorizontalAlignment = "Left"
                 Value = "{Binding Progress, UpdateSourceTrigger=PropertyChanged}"                                                                                                                                                             
                 Style = "{StaticResource {x:Type ProgressBar}}"
                 Margin = "0,0,0,0"/>
    <Border Width = "40"
            Height = "19"
            VerticalAlignment = "Center"
            HorizontalAlignment = "Left"
            CornerRadius = "0,5,5,0"
            Margin = "0,0,0,0">
        <Border.Background>
            <SolidColorBrush Color = "#FF343D46" Opacity = "0.4"/>
        </Border.Background>
    </Border>
</StackPanel>

**UPDATE**

Как создать отрицательный угловой радиус

Извините, но опубликованный вами код не соответствует снимкам экрана. Думаю, я понимаю, что вы пытаетесь сделать, но опубликуйте образец кода, который действительно соответствует вашей проблеме, и вам, вероятно, повезет больше с ответом.

— 20.07.2018 14:32

Это мой код

— 20.07.2018 14:38

wpf border progress

20.07.2018 13:15

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

472

Ответы 1

По сути, то, что вы хотите сделать, - это когда у вас есть значение индикатора выполнения, равное 100, вы хотите применить другой шаблон, а также тот, который у вас есть, когда вы просто отображаете индикатор выполнения. Используйте следующий XAML:

Вы можете видеть это в шаблоне триггера - свойство радиуса угла было установлено слишком равным нулю для правильных углов дорожки индикатора выполнения.

 <Style x:Key = "{x:Type ProgressBar}" TargetType = "{x:Type ProgressBar}">
        <Setter Property = "Template">
            <Setter.Value>
                <ControlTemplate TargetType = "{x:Type ProgressBar}">
                    <Grid MinHeight = "14" MinWidth = "200">
                        <Border Name = "PART_Track"
                                CornerRadius = "5,0,0,5"
                                Background = "{DynamicResource ProgressBarBackgroundColor}"
                                BorderBrush = "{DynamicResource ProgressBarBackgroundColor}"
                                BorderThickness = "0" />
                        <Border Name = "PART_Indicator"
                                CornerRadius = "5"
                                Background = "{DynamicResource ProgressBarFillBackgroundColor}"
                                BorderBrush = "{DynamicResource ProgressBarFillBackgroundColor}"
                                BorderThickness = "0"
                                HorizontalAlignment = "Left" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property = "Value" Value = "100">
                <Setter Property = "Template">
                    <Setter.Value>
                        <ControlTemplate TargetType = "{x:Type ProgressBar}">
                            <Grid MinHeight = "14" MinWidth = "200">
                                <Border Name = "PART_Track"
                                        CornerRadius = "5,0,0,5"
                                        Background = "{DynamicResource ProgressBarBackgroundColor}"
                                        BorderBrush = "{DynamicResource ProgressBarBackgroundColor}"
                                        BorderThickness = "0" />
                                <Border Name = "PART_Indicator"
                                        CornerRadius = "5,0,0,5"
                                        Background = "{DynamicResource ProgressBarFillBackgroundColor}"
                                        BorderBrush = "{DynamicResource ProgressBarFillBackgroundColor}"
                                        BorderThickness = "0"
                                        HorizontalAlignment = "Left" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>

Это приведет к следующему поведению:

Пожалуйста, посмотрите мое обновление, то, что вы сделали с полосой выполнения, в порядке, но с правой стороны я хочу, чтобы граница с закругленными углами, но на этот раз напротив

— 20.07.2018 16:37

То, что я сделал в подобных ситуациях, - это то, что индикатор выполнения слегка перекрывает метку. Вместо того, чтобы помещать полосу внутри панели стека, поместите ее в сетку и перекрывайте индикатор выполнения над этикеткой.

— 20.07.2018 17:00

Извините, но я не понял ваш метод, можно мне простой пример кода?

— 20.07.2018 17:03

20.07.2018 15:05