[Making Your Application Pretty WPF] Tutorial 2. Buttons part 2.

Привет, дорогой друг. Сегодня я решил рассказать тебе о том, как сделать твоё приложение не "вырвиглазным".
Пользователям будет приятно работать с твоим приложением, потому что оно будет красивым.

Уроков будет много, поэтому для удобства я буду оставлять ссылки на другие уроки.

Другие уроки

Урок 1. Часть 1.
Урок 1. Часть 2.
Урок 2 . Часть 1.

И так, вторая часть урока по кнопкам. Поехали :)
Для начала давайте сделаем круглую кнопочку с иконкой.

Весь доступный пак иконок можно найти здесь - ТЫК

Первым делом добавим круглую кнопку:

Код

<Button Style="{StaticResource MaterialDesignFloatingActionButton}" materialDesign:ShadowAssist.ShadowDepth="Depth0" Margin="382,36,28,35" Height="Auto" Width="53" Background="#FF00A8FF" BorderBrush="#FF00A8FF"></Button>

Code

<Button Style="{StaticResource MaterialDesignFloatingActionButton}" materialDesign:ShadowAssist.ShadowDepth="Depth0" Margin="382,36,28,35" Height="Auto" Width="53" Background="#FF00A8FF" BorderBrush="#FF00A8FF"></Button>

Круглая кнопка

Я сразу добавил свойства цвета и убрал на ней тень.
Теперь нужно добавить иконку, для этого делаем следующее: между тегами <Button> ... </Button> вставляем код

Код

<materialDesign:PackIcon Kind="GithubCircle" Height="24" Width="24"/>

Code

<materialDesign:PackIcon Kind="GithubCircle" Height="24" Width="24"/>

Круглая кнопка с иконкой

Такая красивая кнопка у нас получилась.
Теперь давайте добавим иконку для нашей первой кнопки.

Для начала нужно убрать у неё свойство Content, полностью стираем его в редакторе XAML.
Далее между тегами <Button> ... </Button> вставляем код

Код

<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Cookie" Height="33" Width="27"/>
<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Моя первая кнопка</TextBlock>
</StackPanel>

Code

<StackPanel Orientation="Horizontal">

<materialDesign:PackIcon Kind="Cookie" Height="33" Width="27"/>

<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Моя первая кнопка</TextBlock>

</StackPanel>

Кнопка с иконкой

На сегодня всё, если тебя ещё интересуют кнопки - мы продолжим, если нет, то переходим к следующей теме.

Скачать исходник​