ProgressBar с закругленными краями

Question

Как нарисовать такую панель в WPF?

Битый час сижу кручу эллипсы, еще что-то, в wpf 1-й проект, до этого Win Application использовал, древняя вещь.
Буду очень благодарен!

Визуальная часть

<StackPanel HorizontalAlignment="Left" Height="60" Margin="0,25,0,0" VerticalAlignment="Top" Width="361" >
                <Border Background="#282727" BorderBrush="#282727" CornerRadius="10" BorderThickness="1" HorizontalAlignment="Left" Height="50" Margin="35,10,0,0" Width="305">
                    <Border Background="#68C73E" BorderBrush="#68C73E" CornerRadius="10"  BorderThickness="0" Margin="228,-9,16,42" Width="55" Height="14"/>
            &lt;/Border&gt;

        &lt;/StackPanel&gt;
        &lt;Image&gt;
            &lt;Image.Effect&gt;
                &lt;BlurEffect Radius=&quot;1&quot;&gt;

                &lt;/BlurEffect&gt;
            &lt;/Image.Effect&gt;
        &lt;/Image&gt;
        &lt;Label Content=&quot;ВЫБРАНО&quot; Margin=&quot;266,23,0,0&quot; VerticalAlignment=&quot;Top&quot; HorizontalAlignment=&quot;Left&quot; FontSize=&quot;10&quot; FontFamily=&quot;Exo 2.0&quot;/&gt;

        &lt;ProgressBar Name=&quot;ProgressBar1&quot; Value=&quot;100&quot; HorizontalAlignment=&quot;Left&quot; Height=&quot;8&quot; Margin=&quot;45,63,0,0&quot; VerticalAlignment=&quot;Top&quot; Width=&quot;280&quot; Style=&quot;{DynamicResource CornerRadius}&quot;/&gt;
        &lt;Image Name=&quot;PointOnline1&quot; HorizontalAlignment=&quot;Left&quot; Height=&quot;14&quot; Margin=&quot;313,60,0,0&quot; VerticalAlignment=&quot;Top&quot; Width=&quot;16&quot; Source=&quot;ellipse.png&quot; Stretch=&quot;None&quot; RenderTransformOrigin=&quot;0.5,0.5&quot;&gt;
            &lt;Image.Effect&gt;
                &lt;BlurEffect Radius=&quot;1&quot;&gt;&lt;/BlurEffect&gt;
            &lt;/Image.Effect&gt;
        &lt;/Image&gt;
        &lt;Label Content=&quot;Игроков онлайн: {%d}&quot; HorizontalAlignment=&quot;Left&quot; Margin=&quot;213,41,0,0&quot; VerticalAlignment=&quot;Top&quot; Foreground=&quot;White&quot; FontSize=&quot;10&quot; FontFamily=&quot;Exo 2.0&quot;/&gt;

Во-первых, разберитесь со старыми вопросами, писать комментарии в пустоту, лично мне, надоело. Поймите, это не форум, где вы чатитесь с людьми, а база вопросов и ответов на них! Приносите пользу обществу и общество будет приносить пользу вам! Во-вторых, где ваши попытки? Не уж то трудно сделать StackPanel или Grid, где будут размещены 3 контрола (TextBlock в Border, просто TextBlock, ну и Slider (или ProgressBar)) с нужными стилями? — EvgeniyZ, Oct 07 '20 at 21:31
@EvgeniyZ не трудно, пробовал, но там конфликтуют между собой гриды, сдвигают друг друга, не знаю что делать с ними. Спасибо за помощь. — CatException, Oct 07 '20 at 21:36
Я вам задавал уже вопросы, на которые так и не получил ответ. Не ставьте статичные размеры объектам, не используйте дизайнер для создания UI, и почему DockPanel? Вот если бы вы это все послушали и хоть как-то среагировали, то наверно уже бы научились чему-то. Но вы продолжаете в пустую задавать вопросы, даже не принимаете ответы, которые для вам старательно подготавливают другие участники... Также, еще раз повторю где ваши попытки? — EvgeniyZ, Oct 07 '20 at 21:39
@EvgeniyZ касаемо панельки - вот:
` <Grid.ColumnDefinitions>

</ColumnDefinition> <ColumnDefinition Width="500"></ColumnDefinition> </Grid.ColumnDefinitions> </Grid>` — CatException, Oct 07 '20 at 21:41
Width="332", Width="500", Не ставьте статичные размеры объектам. — EvgeniyZ, Oct 07 '20 at 21:41
@EvgeniyZ я самоучка, не стоит говорить что я не учусь и использую готовое и между прочем, к большей части советов я прислушивался и что-либо применял. Стоит учитывать такие моменты, когда применяя одно, изменений может потребовать другое. (TDD - Test Driven Development) — CatException, Oct 07 '20 at 21:43
@EvgeniyZ а как лучше ставить? У меня просто панель фиксированного размера и она расплывется без этого. И плюс ко всему, получается в этом Row должно быть 2 Column, слева одни панельки, справа другие — CatException, Oct 07 '20 at 21:44
Я вижу, как вы учитесь. 2 дня прошло с моего комментария (и день с другого), который вы благополучно проигнорировали. Также, там вам дали ответ на "Как надо", который вы тоже благополучно проигнорировали. Научитесь пользоваться сеткой, дайте волю объектам, пусть они сами подставиваются под нужный размер. — EvgeniyZ, Oct 07 '20 at 21:45
Эллипсы здесь не нужны, нужен Border с закругленными краями, вроде CornerRadius задает. И обрезкой контента внутри него, по-моему ClipToBounds. — aepot, Oct 07 '20 at 23:16
@aepot Вы что обрезать тут решили?) Простой Border с закруглением и нужным цветом и контент внутри с отступом, вот и все, за края там не выходит что-либо. Помниться отвечал однажды на один вопрос, там был простой стиль для ProgressBar с закруглением, и вот этого достаточно для решения данной задачи. Только вот автор вопроса до сих пор не хочет понимать, как позиционировать объекты в WPF, много лишнего пишет, не показывая это нам, увы... — EvgeniyZ, Oct 07 '20 at 23:27
@aepot визуальную часть сделал, код закрепил. Осталось с кругом разобраться, что бы двигался в соотношении с значением прогресс бара. У меня была идея сделать что-то такое: ВзятьЗначениеКругаПоОсиX = ЗначениеПрогрессБара Данный способ не идеал и даже не правильный, но лучше чем ничего) Посмотрел, есть метод RenderTransform, но он не совсем то, что нужно наверное.. — CatException, Oct 07 '20 at 23:39
Мдя, слушать вы явно не хотите. Говорю, чтоб не использовали дизайнер для создания UI, что он генерирует много лишнего, но нет, и так (Margin="228,-9,16,42" Width="55" Height="14") сойдет, да? Чтож, ваше дело, не спрашивайте потом, почему у вас нету какого-либо объекта, все плывет и так далее. — EvgeniyZ, Oct 07 '20 at 23:40
Не надо белый круг, выглядит плохо, похоже не на прогресс, а на регулируемый ползунок. Сделайте просто без круга. — aepot, Oct 08 '20 at 06:09

aepot · Accepted Answer · 2020-10-08T11:07:14.033

6

Лучше пишите xaml руками, а не используйте визуальный дизайнер. В таком случае, вам не придется воевать с марджинами, а интерфейс будет более аккуратный и отзывчивый на изменение размеров окна. Используйте где можно относительное позиционирование и выравнивание, избегайте абсолютных величин в пикселях для перемещения контролов на большие расстояния.

<Grid>
    <Border CornerRadius="20" Background="#222222" Margin="0,8,0,0">
        <StackPanel Orientation="Vertical" Margin="10" >
            <TextBlock Text="Игроков онлайн: 412" HorizontalAlignment="Right" Foreground="White"/>
            <Grid Margin="0,5">
                <Border x:Name="MaskBorder" CornerRadius="5" Background="Black" Height="10"/>
                <ProgressBar Value="40" BorderBrush="Black" BorderThickness="0.001" Background="{x:Null}" Foreground="LawnGreen">
                    <ProgressBar.Effect>
                        <DropShadowEffect ShadowDepth="0" Color="LawnGreen" Opacity="1" BlurRadius="20"/>
                    </ProgressBar.Effect>
                    <ProgressBar.OpacityMask>
                        <VisualBrush Visual="{Binding ElementName=MaskBorder}"/>
                    </ProgressBar.OpacityMask>
                </ProgressBar>
            </Grid>
        </StackPanel>
    </Border>
    <Border CornerRadius="5" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10,0" Background="LawnGreen">
        <TextBlock Text="ВЫБРАНО" Padding="3,1"/>
    </Border>
</Grid>

Вот здесь есть еще один вариант решения с использованием ControlTemplate.

edited Oct 08 '20 at 11:07

answered Oct 08 '20 at 08:00

aepot

49,560

1

Зря заголовок поменяли вопроса. Теперь его можно расценивать как дубликат, ибо вопросов по закруглению ProgressBar на SO есть несколько (один я уже вам кидал). Тут больше вопрос про создание такой структуры, а не про ProgressBar. Также стоило бы расписать человеку как позиционировать объекты в WPF, ибо это его основная проблема и каждый вопрос связан с этим (предположу, что и следующие тоже будут связаны с проблемой позиционирования). Ну и OpacityMask тут не нужен. – EvgeniyZ Oct 08 '20 at 10:28
1

@EvgeniyZ я не нашел дубликата на RU SO по вопросам, содержащим "ProgressBar" в заголовке, поэтому и поменял заголовок. По поводу расписать, я и так показал почти готовый xaml, в котором все позиционируется как надо. Думаю, рано или поздно автор разберется с этим сам, но я добавил немного пояснений. – aepot Oct 08 '20 at 10:47
2

Я вам кидал ссылку, вот чем не дубликат? Создание закругленного ProgressBar, то, какой вы заголовок поставили. А по поводу "я и так показал почти готовый xaml" - судя по тому, что вы написали предыдущий ответ, но автор даже не вник что там и как, я думаю, этого мало... – EvgeniyZ Oct 08 '20 at 10:50
@EvgeniyZ там через ControlTemplate. И там progress bar, а не ProgressBar, и там про свечение, а не про закругляхи. С точки зрения поиска - оно разное. Видимо, поэтому я и не нашел. – aepot Oct 08 '20 at 10:53
А для дубликата имеет разницу, как решена задача? Нет. Поэтому давайте все же определим, этот вопрос про "ProgressBar с закругленными краями", или "Как нарисовать такую панель в WPF?", если первое, то я буду голосовать за дубликат. – EvgeniyZ Oct 08 '20 at 10:56
@EvgeniyZ делайте, как считаете правильным, я только за, если свяжем этот вопрос с тем решением, они действительно схожие. – aepot Oct 08 '20 at 11:02
@EvgeniyZ оставили бы хотя-бы слово ProgressBar в заголовке, а то теперь этот вопрос вообще вряд-ли кто-то найдет. :) Еще я удивился, что вопрос пропал из ленты, оказывается вы просто c# тег удалили, я кстати не трекаю, ни wpf, не xaml. – aepot Oct 08 '20 at 11:34
А как он относится к вопросу? На скрине вообще Slider, судя по кругляшку. Тут именно вопрос про создание панели, а на месте всех этих объектов может быть что угодно, хоть просто Border с нужным цветом. Там и слова нет про то, как сделать закругленный ProgressBar. Также C# убрал, ибо вопрос про XAML и WPF. Я кстати проверил тот код, что у автора в вопрсое, там нормальная панель отображается, проблема только в том, что он поставил Margin и размеры статичные (о чем я уже 2 дня говорю), так что, правильней было бы объяснить его ошибки, а не писать по новой, делаяя акцент на ProgressBar. – EvgeniyZ Oct 08 '20 at 11:40
@EvgeniyZ нет предела совершенству, и времени тоже нет. Прошу меня извинить. – aepot Oct 08 '20 at 11:45
Ну к вам у меня претензий нету, кроме заголовка про ProgressBar, из-за которого вопрос можно было бы закрывать как дубликат. Вы дали хороший (хоть и костыльный) ответ, жаль только автору это мало чем поможет. Я лишь обосновал свое видение данного вопроса, и думаю, что вы согласны с тем, что я написал выше, а если нет, то можете отредактировать вопрос так, как желаете. Я за чистоту SO и как по мне, таким этот вопрос должен был быть изначально. – EvgeniyZ Oct 08 '20 at 11:50
@EvgeniyZ так и надо было закрывать как дубликат. В этом нет ничего страшного. Ну уже это все не важно, вопрос уже отвечен, и ответ принят. – aepot Oct 08 '20 at 11:57
Ну так это не дубликат. Тут нету вопроса про ProgressBar. Это вы почему-то написали в заголовке и сделали акцент именно на ProgressBar, а не на создание панели. Сам же вопрос тут про позиционирование объектов, чтоб получить именно такую панельку, как на скрине. По этому тут вряд-ли кто либо проголосовал за дубликат. – EvgeniyZ Oct 08 '20 at 11:58
@EvgeniyZ есть, он в xaml вопроса сидит, спрятался. А то что он на скриншоте выглядит как слайдер - это видимо проблема дизайна. – aepot Oct 08 '20 at 12:02
В коде что угодно может быть. Сам вопрос Как нарисовать такую панель в WPF?, это по вашему равноценно ProgressBar с закругленными краями? – EvgeniyZ Oct 08 '20 at 12:04
@EvgeniyZ в данном случае, не равноценно, а второе даже точнее отражает суть вопроса. Но это всего-лишь мое мнение. Может быть я и ошибся. Кажется, автор уже решил этот вопрос уже без нас. :) – aepot Oct 08 '20 at 12:07
Я спросил в чате у людей, как правильней тут поступить. Посмотрим, что скажут. – EvgeniyZ Oct 08 '20 at 12:14

ProgressBar с закругленными краями

1 Answers1

Linked