4

Как нарисовать такую панель в 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"/>
13
  • 3
    Во-первых, разберитесь со старыми вопросами, писать комментарии в пустоту, лично мне, надоело. Поймите, это не форум, где вы чатитесь с людьми, а база вопросов и ответов на них! Приносите пользу обществу и общество будет приносить пользу вам! Во-вторых, где ваши попытки? Не уж то трудно сделать StackPanel или Grid, где будут размещены 3 контрола (TextBlock в Border, просто TextBlock, ну и Slider (или ProgressBar)) с нужными стилями?
    – EvgeniyZ
    7 окт 2020 в 21:31
  • @EvgeniyZ не трудно, пробовал, но там конфликтуют между собой гриды, сдвигают друг друга, не знаю что делать с ними. Спасибо за помощь. 7 окт 2020 в 21:36
  • Я вам задавал уже вопросы, на которые так и не получил ответ. Не ставьте статичные размеры объектам, не используйте дизайнер для создания UI, и почему DockPanel? Вот если бы вы это все послушали и хоть как-то среагировали, то наверно уже бы научились чему-то. Но вы продолжаете в пустую задавать вопросы, даже не принимаете ответы, которые для вам старательно подготавливают другие участники... Также, еще раз повторю где ваши попытки?
    – EvgeniyZ
    7 окт 2020 в 21:39
  • @EvgeniyZ касаемо панельки - вот: <Grid Name="ListOfServers" Grid.Row="2"> <Grid.ColumnDefinitions> <ColumnDefinition Width="332"> </ColumnDefinition> <ColumnDefinition Width="500"></ColumnDefinition> </Grid.ColumnDefinitions> </Grid> 7 окт 2020 в 21:41
  • 1
    Я вижу, как вы учитесь. 2 дня прошло с моего комментария (и день с другого), который вы благополучно проигнорировали. Также, там вам дали ответ на "Как надо", который вы тоже благополучно проигнорировали. Научитесь пользоваться сеткой, дайте волю объектам, пусть они сами подставиваются под нужный размер.
    – EvgeniyZ
    7 окт 2020 в 21:45

1 ответ 1

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.

16
  • 1
    Зря заголовок поменяли вопроса. Теперь его можно расценивать как дубликат, ибо вопросов по закруглению ProgressBar на SO есть несколько (один я уже вам кидал). Тут больше вопрос про создание такой структуры, а не про ProgressBar. Также стоило бы расписать человеку как позиционировать объекты в WPF, ибо это его основная проблема и каждый вопрос связан с этим (предположу, что и следующие тоже будут связаны с проблемой позиционирования). Ну и OpacityMask тут не нужен.
    – EvgeniyZ
    8 окт 2020 в 10:28
  • 1
    @EvgeniyZ я не нашел дубликата на RU SO по вопросам, содержащим "ProgressBar" в заголовке, поэтому и поменял заголовок. По поводу расписать, я и так показал почти готовый xaml, в котором все позиционируется как надо. Думаю, рано или поздно автор разберется с этим сам, но я добавил немного пояснений.
    – aepot
    8 окт 2020 в 10:47
  • 2
    Я вам кидал ссылку, вот чем не дубликат? Создание закругленного ProgressBar, то, какой вы заголовок поставили. А по поводу "я и так показал почти готовый xaml" - судя по тому, что вы написали предыдущий ответ, но автор даже не вник что там и как, я думаю, этого мало...
    – EvgeniyZ
    8 окт 2020 в 10:50
  • @EvgeniyZ там через ControlTemplate. И там progress bar, а не ProgressBar, и там про свечение, а не про закругляхи. С точки зрения поиска - оно разное. Видимо, поэтому я и не нашел.
    – aepot
    8 окт 2020 в 10:53
  • А для дубликата имеет разницу, как решена задача? Нет. Поэтому давайте все же определим, этот вопрос про "ProgressBar с закругленными краями", или "Как нарисовать такую панель в WPF?", если первое, то я буду голосовать за дубликат.
    – EvgeniyZ
    8 окт 2020 в 10:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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