0

кнопка

Помогите пожалуйста, необходимо сделать нечто подобное на xaml, заранее благодарю

1
  • 1
    а что вы уже сделали, с чего начали, какой код написали? Здесь за вас задачу решать никто не будет! Начните, хотя бы с того что, математически опишите нарисованную фигуру.
    – Monomax
    16 авг 2018 в 17:00

1 ответ 1

10

Как вариант - использовать векторную графику.

Допустим открываем изображение в .png формате через Inkscape, далее жмем Path-Trace Bitmap (Shift+Alt+B), играемся с настройками:

Inkscape

После нажатия OK у нас будет создан дополнительно слой с векторной графикой, проверяем что бы все было гладко и как нужно, удаляем слой с .png сзади и сохраняем наш вектор (Files - Save As...).

Имея файл мы можем из него вытянуть нужную нам информацию, открываем файл через любой текстовый редактор, это обычный xml формат. Спускаемся самый низ и видим раздел path, у меня он такой:

<path
     style="fill:#000000;stroke-width:1.33333337"
     d="m 241.41823,107.11833 c -15.54109,-4.28541 -24.3626,-10.942132 -39.85927,-30.077862 -16.5635,-20.4531 -5.8525,-18.6543 -111.077607,-18.6543 -77.06159,0 -88.9123671,-0.25947 -88.9123671,-1.94667 0,-1.68335 12.0381421,-1.99896 88.9999971,-2.33333 103.654437,-0.45034 93.982727,1.02222 108.306537,-16.49016 13.28726,-16.24508 22.42419,-24.55061 32.02679,-29.11254 8.66667,-4.1173004 8.66667,-4.1173004 415.99999,-4.1173004 407.3334,0 407.3334,0 416,4.1173004 9.6026,4.56193 18.7396,12.86746 32.0268,29.11254 14.3296,17.5194 4.5525,16.03992 108.9732,16.48981 77.554,0.33413 89.6667,0.64933 89.6667,2.33333 0,1.68781 -11.9256,1.94702 -89.579,1.94702 -105.9948,0 -95.1748,-1.80627 -111.7443,18.6543 -15.7393,19.43531 -24.3648,25.862592 -40.4586,30.147612 -9.8256,2.6161 -800.87552,2.54802 -810.36887,-0.0697 z"
     id="path3690"
     inkscape:connector-curvature="0" />

Внутри него есть самая длинная строка d, которая содержит все точки нашей фигуры, смело копируем ее. Все, остается сделать стиль...

В xaml за векторную графику отвечает компонент Path, значит на его основе можем сделать простенький стиль для кнопок:

<Style TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Viewbox>
                    <Grid>
                        <Path Data="m 241.41823,107.11833 c -15.54109,-4.28541 -24.3626,-10.942132 -39.85927,-30.077862 -16.5635,-20.4531 -5.8525,-18.6543 -111.077607,-18.6543 -77.06159,0 -88.9123671,-0.25947 -88.9123671,-1.94667 0,-1.68335 12.0381421,-1.99896 88.9999971,-2.33333 103.654437,-0.45034 93.982727,1.02222 108.306537,-16.49016 13.28726,-16.24508 22.42419,-24.55061 32.02679,-29.11254 8.66667,-4.1173004 8.66667,-4.1173004 415.99999,-4.1173004 407.3334,0 407.3334,0 416,4.1173004 9.6026,4.56193 18.7396,12.86746 32.0268,29.11254 14.3296,17.5194 4.5525,16.03992 108.9732,16.48981 77.554,0.33413 89.6667,0.64933 89.6667,2.33333 0,1.68781 -11.9256,1.94702 -89.579,1.94702 -105.9948,0 -95.1748,-1.80627 -111.7443,18.6543 -15.7393,19.43531 -24.3648,25.862592 -40.4586,30.147612 -9.8256,2.6161 -800.87552,2.54802 -810.36887,-0.0697 z" >
                            <Path.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF1A3E53" Offset="0"/>
                                    <GradientStop Color="#FF1A3E53" Offset="1"/>
                                    <GradientStop Color="Black" Offset="0.25"/>
                                    <GradientStop Color="Black" Offset="0.75"/>
                                </LinearGradientBrush>
                            </Path.Fill>
                            <Path.Effect>
                                <DropShadowEffect ShadowDepth="0"/>
                            </Path.Effect>
                        </Path>
                        <Viewbox>
                            <TextBlock Foreground="White" Margin="8" Text="Привет мир!" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Viewbox>
                    </Grid>
                </Viewbox>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Поясняю:

  • Viewbox - первый элемент, который изменяет размер внутреннего объекта автоматически, без него наш вектор был бы очень большого размера, нам ведь нужна небольшая кнопка...
  • Grid - следующий элемент, это сетка, которая позволяет располагать внутренние объекты друг на друге, что нам и нужно...
  • Path - наш вектор, скопированный код из файла мы задаем в свойство Data, ну а также наводим марафет (покраска и все дела).
  • TextBlock - это собственно наш текст, что бы он менял размер автоматически, мы можем его засунуть в Viewbox. Я не стал тут брать текст из Content, это уж сами...

Все, создаем простую кнопку и смотрим как все будет смотреться:

Result

Вот и все! Вам останется поколдовать над стилем, добавить триггеры, цвета получше сделать и так далее. В общем удачи!

2
  • Огромное спасибо
    – Kchipson
    17 авг 2018 в 16:17
  • @Kchipson Да на здоровье. Удачи в изучение WPF! ;-)
    – EvgeniyZ
    18 авг 2018 в 6:36

Ваш ответ

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

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