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

                </Border>

            </StackPanel>
            <Image>
                <Image.Effect>
                    <BlurEffect Radius="1">

                    </BlurEffect>
                </Image.Effect>
            </Image>
            <Label Content="ВЫБРАНО" Margin="266,23,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" FontSize="10" FontFamily="Exo 2.0"/>

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

Answer 1

Лучше пишите 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.

БЛОГ НА HUSL

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

Ответы (1 шт):