Как закруглить кнопку в wpf

Как закруглить кнопку в 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

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 Button Style with Rounded Corners and Hover Effects

WPF Button Style with Rounded Corners and Hover Effects.

In this post I will be sharing WPF Design to produce WPF Buttons with Rounded corners and hover effects. Each button have separate hover color but same design. We will be using StaticResource style property and declare our WPF Button style in App.xaml file of our WPF Project.

Take a new WPF Window or Page in your Project and Edit it as below. Name it as “ButtonDemo”.

ButtonDemo.xaml :

Now open your App.xaml file and create the following styles for our WPF Buttons.

App.xaml :

This styling will create below results when you run this WPF Window or Page :

Create Buttons With Rounded Corner In WPF

In this post, we’ll learn to create buttons with rounded corners in WPF.

The default button template in WPF has a border. So, we have to change value of the CornerRadius property of the border in the button template.

Single Button With Rounded Corners

If you want rounded corners for a single button, modify the XAML code as shown below.

Apply to all Buttons

To apply rounded corners to all buttons in the application, add this style in the App.xaml file in the Application.Resources tag.

Here is a screenshot of the result.

report this ad

Как скруглить углы у элемента WPF?

Возник вопрос, как закруглять углы элементов? Кнопок, Gryd`ов и т.д.
В целом, весьма распространённая задача, но без поллитра не разобраться.

К слову, насколько хорошая практика, пилить интерфейсы в Blend?

• Вопрос задан более трёх лет назад
• 22110 просмотров

• Facebook
• Вконтакте
• Twitter

Наиболее оптимальный способ — вручную прорисовывать шаблон элемента. Той же кнопки, к примеру.
Первая попавшаяся ссылка с вменяемым по размеру примером:
https://professorweb.ru/my/WPF/Template/level17/17.
Общая суть:
Нужно указать параметр Template у объекта, углы которого скруглять вздумали.
Это можно сделать как в примере на странице через ссылку на StaticResource, либо по месту, указав

Сам шаблон описывается элементом <ControlTemplate TargetType=»Button»> . Ну или не Button, а тот элемент, который вы хотите выдать.
Внутри вы можете нарисовать кнопку так, как вам того хочется. Можно <Rectangle RadiusX=»10″ RadiusY=»10″> , можно <Border CornerRadius=»10″> — на ваше усмотрение. Не забываете добавить <ContentPresenter> , чтобы отобразить содержимое кнопки (её текст или любые другие элементы, которые на ней должны размещаться). В реальности вам придётся ещё впоследствии добавить раскраску в зависимости от состояния (активная, курсор наведён, курсор не наведён), и возможно анимацию перехода между этими состояниями!

Чтобы не делать это всё с нуля, часто бывает удобно скопировать стиль по-умолчанию с сайта майкрософт , а потом перкроить его на свой вкус.

Blend так ни разу и не довелось использовать. Всё-таки мне показалось более удобным работать с чистым кодом. Вся идея бленда заключалась на мой взгляд в том, чтобы посадить за него дизайнера, и чтобы последний выдавал на нём готовые для использования блоки. Программеру он ни к чему.