How to create/make rounded corner buttons in WPF?
I need to create a rounded corner glossy button in WPF. Can anyone please explain me what steps are needed?
15 Answers 15
I know this post is super old, but I have an answer that’s surprisingly missing from the above and is also much simpler than most.
Since the default ControlTemplate for the Button control uses a Border element, adding a style for Border to the Button’s resources applies that style to that Border. This lets you add rounded corners without having to make your own ControlTemplate and without any code. It also works on all varieties of Button (e.g. ToggleButton and RepeatButton).
You have to create your own ControlTemplate for the Button. just have a look at the sample
created a style called RoundCorner and inside that i changed rather created my own new Control Template with Border (CornerRadius=8) for round corner and some background and other trigger effect. If you have or know Expression Blend it can be done very easily.
Using
The simplest solution without changing the default style is:
Then just define your button like this:
This is more of a minimal control template to get a button with rounded corners, however you will not have any hover or click visual effects. But you can add these to the control template as needed. I was working with a dark background, hence the white background.
You can try this.
despite the fact years have gone, i thing it’s interesting to think about different way to approach it.
The way to recreate all the button template is an excellent way if you want to change everything but it’s demoralizing for the beginner or if you just want to round corner of the button. It’s true you don’t have to change everything but at least you will must change events.
The way to modify "border" design in the button.resources is excellent too, if you are a beginner but it can be very boring to change all your buttons if you want to raise your design with more parameters.
There is a solution with a foot in both camps:
Put this code in window/page resources:
Then for the buttons:
As alternative, you can code something like this:
The «Button» will look something like this:
You could set any other content instead of the image.
The most simple way is
This is an adapted version of @Kishore Kumar ‘s answer that is simpler and more closely matches the default button style and colours. It also fixes the issue that his «IsPressed» trigger is in the wrong order and will never be executed since the «MouseOver» will take precedent:
You can use attached properties for setting button border radius (also the same will work for textboxes).
Create class for attached property
Then you can use attached property syntax for multiple buttons without style duplicates:
in your app.xaml add this part of style :
Well the best way to get round corners fast and with standard animation is to create a copy of the control template with Blend. Once you get a copy set the corner radius on the Grid tag and you should be able to have your control with full animation functionality and applyable to any button control. look this is the code:
I also edited the VisualState=»PointerOver» specifically at Storyboard.TargetName=»BorderBrush», because its ThemeResource get squared corners whenever PointerOver triggers.
Then you should be able to apply it to your control style like this:
So you can apply your styles to any Button.
Although this question is long-since answered, I used an alternative approach that people might find simpler than any of these solutions (even Keith Stein’s excellent answer). So I’m posting it in case it might help anyone.
You can achieve rounded corners on a button without having to write any XAML (other than a Style, once) and without having to replace the template or set/change any other properties. Just use an EventSetter in your style for the button’s «Loaded» event and change it in code-behind.
(And if your style lives in a separate Resource Dictionary XAML file, then you can put the event code in a code-behind file for your resource dictionary.)
pocari / wpf_rounded_corner_button_sample.xaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| < Style x : Key = " RoundedButton " TargetType = " |
| < Style .Setters> |
| < Setter Property = " Template " > |
| < Setter .Value> |
| < ControlTemplate TargetType = " |
| < Border x : Name = " button " CornerRadius = " 5 " BorderBrush = " Black " BorderThickness = " 1 " Background = " Azure " > |
| < TextBlock Text = " |
| </ Border > |
| < ControlTemplate .Triggers> |
| < Trigger Property = " IsMouseOver " Value = " True " > |
| < Setter TargetName = " button " Property = " BorderBrush " Value = " #FF5798d8 " /> |
| < Setter TargetName = " button " Property = " Background " Value = " Red " /> |
| < Setter Property = " Foreground " Value = " White " /> |
| </ Trigger > |
| < Trigger Property = " IsPressed " Value = " True " > |
| < Setter TargetName = " button " Property = " Background " Value = " Green " /> |
| </ Trigger > |
| < Trigger Property = " IsFocused " Value = " True " > |
| < Setter TargetName = " button " Property = " BorderBrush " Value = " #FF282828 " /> |
| </ Trigger > |
| < Trigger Property = " IsEnabled " Value = " False " > |
| < Setter TargetName = " button " Property = " Opacity " Value = " 0.7 " /> |
| < Setter Property = " Foreground " Value = " Gray " /> |
| </ Trigger > |
| </ ControlTemplate .Triggers> |
| </ ControlTemplate > |
| </ Setter .Value> |
| </ Setter > |
| </ Style .Setters> |
| </ Style > |
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Как закруглить кнопку в wpf
Круглая кнопка с векторной иконкой
Всем привет. Когда я только начал знакомится с WPF, одним из первых моих заданий было создание нестандартной кнопки. Самая элементарная и, наверное, самая популярная сейчас – это круглая форма. Поэтому следуя моде на Modern UI , я решил сделать такую-же кнопку.
Обычную «одноразовую» кнопку можно создать и так:
Все. Кнопка готова. Она круглая и иконка есть. Проблема в том, что для каждой кнопки придется делать такой копипаст, а это и неудобно и некрасиво. Пример правильный, только нужно вынести шаблон в ресурсы и применять его к каждой кнопке.
Так и сделаю, но сначала опишу требования, которые я поставил перед своей кнопкой:
- Иконка должна быть векторная;
- Реализовать нужные привязки, что бы кнопка могла менять размеры и цвета;
- Все это должно красиво выглядеть;
Изначально, думал сразу же писать код, но желание нарисовать иконку меня перебороло. Поэтому сделаю небольшое отступление и создам иконку. Ни, или несколько…
Знаю, многие скажут, что то вроде «Не программиста это дело — иконки рисовать». Может и так, но я люблю рисовать, создавать дизайн своих программ, и уж тем более контролировать этот процесс, если кто-то мне помогает )). Может, сказалось, то, что я вырос в семье художников? Ну, или то, что я и сам на художника учился, до того как программированием не занялся 🙂 пропустить создание иконки
Создание иконки
Выберем графический редактор. Например, Adobe Illustrator , Microsoft Expression Design и т.д. Я буду использовать CorelDRAW , а переведу в xaml уже в Design . Странная комбинация получилась, но никак руки не доходили познакомиться с Design как следует.
Открываем Corel , создаем новый проект – рисуем. Можете нарисовать стандартную геометрическую фигуру, звездочку или стрелочку. Правда, если речь идет о чем то таком простом, то проще это нарисовать в самом WPF .
Я нарисовал иконку. Что дальше?
Нужно сохранить ее в векторном формате. Выбираем Экспорт и сохраняем, например в emf . Что бы перевести иконку в xaml я использую программу Microsoft Expression Design . Она входит в пакет Microsoft Expression Studio.
Открываем иконку. Находим Экспорт . В появившемся окне выбираем нужный формат. Я выбрал XAML WPF Resource Dictionary .
Дальше, в WPF проекте создаем Resource Dictionary с именем Icons . Туда копируем генерируемую разметку иконки. Можно и не создавать отдельный файл, а записать все в ресурсы окна или приложения, но лучше структурировать сразу. Тогда можно держать все свои иконки в отдельной библиотеке и с легкостью переносить в другие проекты.
Можно создать в библиотеке Icons ресурс SolidColorBruch и, там где иконки будут одноцветные, задать его в Brush свойства. Потом, если нужно будет поменять цвет иконкам, достаточно будет изменить свойство Color в этом ресурсе. Хотя, думаю, все зависит от ваших личных предпочтений.
Библиотека Icons , пока с одной иконкой:
Значение свойства Geometry я сознательно стер с примера – слишком много лишнего получилось бы. Скажу только, что там укороченная запись геометрических путей, из которых состоит иконка. Детально, можете посмотреть на msdn.
Иконка создана. Можно вернуться к кнопке…
Круглая кнопка
Что я узнал, покопавшись в интернете, посмотрев исходники?
У каждой кнопки есть свойство Content . Это очень удобное свойство, так как влияет на внешний вид, всего, что наследуется от ContentControl (кнопка его потомок), через шаблон. Поэтому у кнопки может быть любое содержимое. Например, кнопка с обычным текстом содержит TextBlock , на которой и отображается на самом деле текст кнопки. Или опять же в Content можно поместить контейнер, в котором может быть все что угодно.
Создаем папку Themes , а в ней generic.xaml . И шаблон кнопки:
Теперь, если кнопке задать стиль BubleButton , то она примет форму обычного эллипса.
Пара моментов:
- StrokeThickness принимает значение только одно, а у BorderThickness четыре значения, так что нужно присвоить одно из них.
- Если кнопке не задать Background , то при нажатии на пустое пространство внутри круга, ничего не случится (обработчик события кнопки не сработает), поэтому его придется задать .
Теперь я добавлю в Grid шаблона Rectangle , и привяжу к свойству Fill Content кнопки:
И разметка кнопки в окне:
Результат меня как-то не впечатлил. Иконка одного размера с кнопкой (
Первое, что пришло на мысль, задать фиксированный размер для Rectangle . Но тогда и кнопка должна быть точного размера. Но, все-таки, можно сделать иконку, скажем, 80% от размера кнопки. Привязки позволяют нам это сделать с помощью конвертеров . Название говорит само за себя.
Я создал класс ScaleConverter , который реализует интерфейс IValueConverter :
Дополненный вариант шаблона, с применением конвертера ScaleConverter :
Можно еще добавить эффект, который будет при наведении на кнопку.
Например, задать для Grid Opacity = ".8" , а в ControlTemplate создать триггер:
Стиль кнопки готовый. Векторная иконка, изменение размера, эффект при наведении. Красиво?
Ну, относительно. Хотелось же, помимо размера, свободно изменять и цвет. Если для Ellipse можно спокойно менять и Stroke через Foreground и Fill через Background кнопки, то, как изменить цвет иконки? Первое о чем я сразу же подумал ContentConverter .
Перед тем как присвоить DrawingBrush , достать из него все GeometryDrawing и поменять им свойства Brush .
Испробовав ( ну конечно! ) это извращение , я был немого разочарован, когда узнал что GeometryDrawing нельзя редактировать. За это отвечает свойство IsFrozen . Если оно возвращает true , то объект заморожен и доступен только для чтения. И действительно, я же питался изменить цвет ресурса, для конкретной кнопки. Но можно создать копию, у которой по умолчанию IsFrozen равно false , изменить уже в ней нужные свойства и вернуть в качестве результата ))).
Это сработает, но показывать уже не буду, так как то, что я описал, показалось мне настолько корявым, что лучше отказаться от изменения цвета. Да и спихнуть все на то, что обычно в приложениях кнопки определенного цвета всегда можно 🙂
Опишу еще один вариант шаблона. Мне он показался более красивым и удачным решением, чем предыдущий шаблон:
И все-таки создаем ContentConverter . Хотя цель его будет не та что описана ранее. Код конвертера:
Здесь возвращается PathGeometry , который содержит всю геометрию иконки.
И полная разметка нового шаблона с ContentConverter и применением геометрии:
Теперь можно менять и размер, и цвет иконки. А еще получился красивый эффект при наведении.
Думаю, что теперь кнопка соответствует всем требованиям, что я поставил в начале. Поэкспериментируйте с исходниками сами. Буду рад услышать ваше мнение.