Форум программистов, компьютерный форум, киберфорум
Наши страницы
C#: WPF, UWP и Silverlight
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
MaxSlim
110 / 110 / 64
Регистрация: 03.06.2013
Сообщений: 584
1

Кнопка в виде крестика

09.05.2016, 14:32. Просмотров 942. Ответов 16
Метки нет (Все метки)

Ev_Hyper, в вот еще немного в другой сфере не поможете? Хочу сделать кнопку: просто крестик такой обьемный внутри. У меня есть этот самый крестик нарисованый в Path. А как сдеелать чтобы граница кнопки и был тот самый крестик.
Задал вот такой стиль, это корректно вообще?
XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Style x:Key="butClose" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border">
                        <Grid>
                            <Path Data="M7.1999998,0L16,8.7999997 24.799999,0 32,7.1999998 23.2,16 32,24.799999 24.799999,32 16,23.2 7.1999998,32 0,24.799999 8.7999997,16 0,7.1999998z" 
                             Stretch="Uniform" 
                             Fill="#FF5BE440" 
                             Width="40" Height="40" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.05.2016, 14:32
Ответы с готовыми решениями:

Нужна кнопка в виде шарика с текстом, и анимированный шарик с текстом.
где найти готовый? дополню: шарик с текстом у меня есть, но это просто плоский...

Замена "крестика", "свернуть", "развернуть" на кусок изображения
Добрый вечер! Для красоты своей программы хочу сделать так, чтобы вместо...

Кнопка в виде стрелки
Нужно сделать кнопку, в виде стрелочки вправо, тоесть правую сторону кнопки...

Кнопка в виде картинки
А как можно сделать кнопку в виде картинки подскажите плз.

Кнопка в виде трапеции
С CSS знаком недавно, пользуюсь из-за необходимости и погружаться в него не...

16
Ev_Hyper
Заблокирован
09.05.2016, 16:09 2
Цитата Сообщение от MaxSlim Посмотреть сообщение
А как сдеелать чтобы граница кнопки и был тот самый крестик.
MaxSlim, не могу понять, о чем вы говорите
0
golubyatnikovtv
176 / 176 / 95
Регистрация: 30.04.2016
Сообщений: 478
Завершенные тесты: 3
09.05.2016, 18:50 3
MaxSlim, Вы наверное обратили внимание, что стандартное визуальное поведение кнопки полностью исчезло. Наверное, это не то что Вам хотелось.
Может стоит просто установить прозрачный цвет фона кнопки в состоянии "по умолчанию"?

XML
1
2
3
4
5
6
<Button Background="Transparent" Width="45" Height="45">
            <Path Data="M7.1999998,0L16,8.7999997 24.799999,0 32,7.1999998 23.2,16 32,24.799999 24.799999,32 16,23.2 7.1999998,32 0,24.799999 8.7999997,16 0,7.1999998z" 
                                     Stretch="Uniform" 
                                     Fill="#FF5BE440" 
                                     Width="40" Height="40" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5"/>
        </Button>
0
MaxSlim
110 / 110 / 64
Регистрация: 03.06.2013
Сообщений: 584
09.05.2016, 20:15  [ТС] 4
golubyatnikovtv, не могли бы вы показать как. Я конечно её уже модифицировал идаже повесил всякие тригеры, но всё же интересно.
0
golubyatnikovtv
176 / 176 / 95
Регистрация: 30.04.2016
Сообщений: 478
Завершенные тесты: 3
09.05.2016, 20:37 5
MaxSlim, не особо понятно чего Вы хотите добиться...

Код в Вашем первом сообщении полностью убирает стандартное поведение кнопки, т.е. при наведении на неё мыши не происходит подсветка кнопки.

Я с Вами согласен, что просто поместив картинку (или что-то картникоподобное) в кнопку, выглядит она не презентабельно (на самом деле чистая вкусовщина).

Я Вам предложил сделать минимально затратный вариант - задать свойству Background значение Brushes.Transparent, а в Content кнопки напрямую поместить крест.

Тем самым поведение кнопки останется прежним (остается подсветка при неведении, анимация при клике) и фон кнопки "по умолчанию" не виден, что мне кажется выглядит уже несколько лучше.

Разработка собственного шаблона для кнопки - это около 100 (+-50) строк XAML. Делать это самостоятельно с нуля - целый день.

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

Ссылки с шаблонами:
http://stackoverflow.com/a/17639062
https://gist.github.com/alimbada/3083937
https://msdn.microsoft.com/ru-ru/library/ms753328(v=vs.110).aspx
0
MaxSlim
110 / 110 / 64
Регистрация: 03.06.2013
Сообщений: 584
09.05.2016, 21:35  [ТС] 6
golubyatnikovtv, меня полностью устравивает ваш вариант, но я не пойму как это делается. Как поместить в контент крест, если я имею только Path, покажите пожалуйста.
0
golubyatnikovtv
176 / 176 / 95
Регистрация: 30.04.2016
Сообщений: 478
Завершенные тесты: 3
09.05.2016, 21:37 7
Вот я код уже приводил.

XML
1
2
3
4
5
6
<Button Background="Transparent" Width="45" Height="45">
            <Path Data="M7.1999998,0L16,8.7999997 24.799999,0 32,7.1999998 23.2,16 32,24.799999 24.799999,32 16,23.2 7.1999998,32 0,24.799999 8.7999997,16 0,7.1999998z" 
                                     Stretch="Uniform" 
                                     Fill="#FF5BE440" 
                                     Width="40" Height="40" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5"/>
        </Button>
Просто засуньте Path в Content кнопки.

Не по теме:

Как Вас это устраивает, если Вы даже не попробовали?:)

0
MaxSlim
110 / 110 / 64
Регистрация: 03.06.2013
Сообщений: 584
09.05.2016, 21:43  [ТС] 8
golubyatnikovtv, я так делал, дело в том что мне не надо подсвечивать весь бэкграунд кнопки при наведении и не нужна граница, тогда без собственного шаблона не обойтись, так?
0
golubyatnikovtv
176 / 176 / 95
Регистрация: 30.04.2016
Сообщений: 478
Завершенные тесты: 3
09.05.2016, 21:50 9
Цитата Сообщение от MaxSlim Посмотреть сообщение
дело в том что мне не надо подсвечивать весь бэкграунд кнопки при наведении и не нужна граница
Тогда чем Вас не устраивал первоначальный вариант, который вы привели в первом сообщении?
Там Вы полностью избавились от всяких подсветок, границ и фона.

Может быть нарисуете то, что Вы хотите добиться? Какие состояния у кнопки должны быть?
0
MaxSlim
110 / 110 / 64
Регистрация: 03.06.2013
Сообщений: 584
09.05.2016, 22:28  [ТС] 10
golubyatnikovtv, вот такую я кнопку сделал, можете вставить посмотреть. Меня просто интересует нормально это или говнокод.
XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<Style x:Key="butClose" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="Border">
                        <Grid>
                            <Rectangle Fill="Transparent"/>
                            <Path Data="M2.999979,0C3.8000264,0,4.4999763,0.30000305,5.1000115,0.90000927L15.999954,11.700012 26.899959,0.90000927C28.099967,-0.29998779 29.999927,-0.29998779 31.099961,0.90000927 32.299972,2.1000061 32.299972,4 31.099961,5.1000061L20.199958,16 31.099961,26.900009C32.299972,28.100006 32.299972,30 31.099961,31.100006 29.899951,32.300003 27.999931,32.300003 26.899959,31.100006L15.999954,20.200012 5.1000115,31.100006C3.9000017,32.300003 1.9999809,32.300003 0.90000743,31.100006 -0.30000248,29.900009 -0.30000248,28 0.90000743,26.900009L11.800011,16 0.90000743,5.1000061C-0.30000248,3.9000092 -0.30000248,2 0.90000743,0.90000927 1.4999818,0.30000305 2.1999928,0 2.999979,0z" 
                             Stretch="Uniform" 
                             Fill="{TemplateBinding Background}" 
                             Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                                                             To="160" Duration="0:0:0.5"></DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                                                            Duration="0:0:0.5"></DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
0
golubyatnikovtv
176 / 176 / 95
Регистрация: 30.04.2016
Сообщений: 478
Завершенные тесты: 3
09.05.2016, 22:47 11
Еще бы код самой кнопки поставили, а то самому догадываться пришлось что там RotateTransform.

Забавно
http://www.screencast.com/t/YY6NNArfrm

Цитата Сообщение от MaxSlim Посмотреть сообщение
Меня просто интересует нормально это или говнокод.
Ну, работает же, хотя бы у Вас, так что нормально. Да и XAML не дает много возможностей испортить код самому, XAML сам себя поганит.
0
MaxSlim
110 / 110 / 64
Регистрация: 03.06.2013
Сообщений: 584
09.05.2016, 22:57  [ТС] 12
golubyatnikovtv, да, извините.)) А вот если бы мне надо было контент из двух экземпляром Path сделать, как тогда нужно было поступить.
XML
1
2
3
4
5
6
7
8
 <Button Name="butClose" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="10"
                        Width="20" Height="20"
                        Style="{StaticResource butClose}" Background="#FF2749A4" Click="Close"
                        ToolTip="Close Application" RenderTransformOrigin="0.5,0.5">
                    <Button.RenderTransform>
                        <RotateTransform ></RotateTransform>
                    </Button.RenderTransform>
                </Button>
0
golubyatnikovtv
176 / 176 / 95
Регистрация: 30.04.2016
Сообщений: 478
Завершенные тесты: 3
09.05.2016, 23:05 13
MaxSlim, если уж Вы делаете строгую привязку в шаблоне на RotatTransform, то тогда стоит также вынести RotateTransform в стиль.

XML
1
2
3
4
5
<Setter Property="RenderTransform">
                <Setter.Value>
                    <RotateTransform />
                </Setter.Value>
            </Setter>
Цитата Сообщение от MaxSlim Посмотреть сообщение
контент из двух экземпляром Path сделать
Тогда можно еще один Path добавить в

XML
1
2
3
4
5
<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="Border">
                        <Grid>
Опять же нужна конкретика, не понятно как это должно выглядеть.
1
MaxSlim
110 / 110 / 64
Регистрация: 03.06.2013
Сообщений: 584
09.05.2016, 23:10  [ТС] 14
golubyatnikovtv, вы знаете мне сложно сказать точно чего я хочу добиться, не зная всех приколов в данной области. Может быть посоветуете какой-то источник знаний кроме MSDN и желательно чтобы был русский перевод. Я читал Метью Макдональда, но чтот не пошло.
0
golubyatnikovtv
176 / 176 / 95
Регистрация: 30.04.2016
Сообщений: 478
Завершенные тесты: 3
09.05.2016, 23:20 15
MaxSlim, извините, но не могу порекомендовать материалы по WPF, т.к. сам литературу по WPF не читал. Изучал эту технологию только на конкретных практических задачах на работе. А в таких случаях используются, как правило, источники типа MSDN и stackoverflow.
1
Ev_Hyper
Заблокирован
09.05.2016, 23:27 16
Цитата Сообщение от golubyatnikovtv Посмотреть сообщение
Изучал эту технологию только на конкретных практических задачах на работе.
golubyatnikovtv, повезло =)

Цитата Сообщение от MaxSlim Посмотреть сообщение
Я читал Метью Макдональда, но чтот не пошло.
MaxSlim, а что не так?
0
golubyatnikovtv
176 / 176 / 95
Регистрация: 30.04.2016
Сообщений: 478
Завершенные тесты: 3
09.05.2016, 23:28 17
Могу посоветовать ознакомиться с рекомендациями Prism. Это уже не столько к XAML относится, сколько к проектированию архитектуры сложных масштабируемых WPF приложений.

Введение на хабрахабре: https://habrahabr.ru/post/176851/
Стартовая страница на MSDN: https://msdn.microsoft.com/en-us/library/gg406140.aspx
Одноименная библиотека на GitHub: https://github.com/PrismLibrary/Prism
0
09.05.2016, 23:28
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
09.05.2016, 23:28

Кнопка в виде шестиугольника
Всем привет! Передо мной поставлена такая задача: есть соты, нужно сделать так,...

в встроенном виде не работает кнопка Collapse
У меня есть page. В нее встроенн вид. В виде кнопки Collapse, Expand. Так вот...

Кнопка: hover отправки формы в виде треугольника
Имеется кнопка в виде треугольника, рисунок сохранен в пнг с прозрачным фоном...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru