DevCrm 05: «Что-то как-то кандовенько выглядит, тебе так не кажется?»

В очередной раз запускаю проверить, как всё работает, и тут до меня доходит: внешний вид как-то кандовенько смотрится.

Какие-то отзвуки того, что тут даже не Виндоус ХРю, а скорее Линолему — в смысле Миллениуму, Windows Millennium Edition. Дааа, было время... несколько переустановок винды в день, и каждый раз по-разному. Синие окна смерти, постоянная борьба с зависанием.

Он самый - win98!
Он самый - win98!

Так, всё, это ностальгия. А теперь похожий облик — уже не комильфо.

Стиль, рубленный топором, — в этом, конечно, что-то есть. Но в конечном счёте эстетическое качество тоже должно присутствовать, хотя бы в первом приближении.

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

Сначала задаём основную цветовую палитру, чтобы каждый раз не прописывать и не путаться:

<SolidColorBrush x:Key="AccentGold" Color="#C9A04E"/> <SolidColorBrush x:Key="AccentDeepBlue" Color="#2A3B8C"/> <SolidColorBrush x:Key="BackgroundLight" Color="#F5F7FA"/> <SolidColorBrush x:Key="CardBackground" Color="#FFFFFF"/> <SolidColorBrush x:Key="TextDark" Color="#1E1E2A"/> <SolidColorBrush x:Key="TextMuted" Color="#5A5A6E"/> <SolidColorBrush x:Key="BorderLight" Color="#E0E4EA"/> <SolidColorBrush x:Key="DangerRed" Color="#D32F2F"/>

Дописываем тени:

<DropShadowEffect x:Key="ShadowEffect" BlurRadius="10" ShadowDepth="2" Opacity="0.08"/>

Стиль кнопок:

<Style TargetType="Button" x:Key="AccentButton"> <Setter Property="Background" Value="{StaticResource AccentDeepBlue}"/> <Setter Property="Foreground" Value="White"/> <Setter Property="Padding" Value="12,6"/> <Setter Property="FontWeight" Value="SemiBold"/> <Setter Property="Cursor" Value="Hand"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border Background="{TemplateBinding Background}" CornerRadius="6" Padding="{TemplateBinding Padding}"> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#3A4EAA"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" Value="#1F2E6E"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Background" Value="#B0B0B0"/> </Trigger> </Style.Triggers> </Style>

А дальше — кнопка такая, кнопка сякая: LoginButton, DangerButton, FlatButton и другие. Вот, например, «опасная» кнопка, чтобы удаление всегда смотрелось как удаление:

<Style TargetType="Button" x:Key="DangerButton"> <Setter Property="Background" Value="{StaticResource DangerRed}"/> <Setter Property="Foreground" Value="White"/> <Setter Property="Padding" Value="12,6"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="Cursor" Value="Hand"/> </Style>

Дальше — стиль для вкладок, чтобы выглядело приглядно:

<Style TargetType="TabItem"> <Setter Property="Background" Value="Transparent"/> <Setter Property="Foreground" Value="{StaticResource TextMuted}"/> <Setter Property="Padding" Value="16,8"/> <Setter Property="FontWeight" Value="SemiBold"/> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Foreground" Value="{StaticResource AccentDeepBlue}"/> <Setter Property="BorderBrush" Value="{StaticResource AccentDeepBlue}"/> </Trigger> </Style.Triggers> </Style>

И стили для гридов — фон, выделение строк, шапка колонок. С различной конфигурацией, а дальше только привязки к основному и вспомогательным окнам.

Для начала пойдёт. Хотя бы где-то около XP остановились — уже неплохо!

А потом я глянул на верхнюю панель — ту, где логотип, поиск, кнопки экспорта и вход. Она разрослась и занимала чуть ли не четверть окна. И я подумал: а не пора ли ей... уйти к себе? Но об этом — следующая статья.