Ласкаво просимо до dev.net.ua Увійти | Приєднатися | Допомога

Helen

designer for developers

Новини

Полезные ссылки

Эти простые стили и ресурсы

Когда мы говорим “стили”, то в первую очередь в голову приходят “стили для элементов управления”:  кнопок, текстовых полей для ввода, списков и т.д.  Стили и ресурсы дают возможность избавиться от кучи повторяющихся свойств-мусора, таких как внутренние и внешние отступы, границы, тени, цвета фона, текста и задать универсальные значения для многих элементов.

Давайте рассмотрим несколько примеров простых стилей для элементов, находящихся в контейнере Grid.

Стиль для текстового блока

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

<Grid x:Name="LoginForm">
	<Grid.RowDefinitions>
		<RowDefinition />
		<RowDefinition />
		<RowDefinition />
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="0.4*" />
		<ColumnDefinition Width="0.6*" />
	</Grid.ColumnDefinitions>
	<TextBlock  Text="Username" />
	<TextBlock  Text="Password" Grid.Row="1" />					
	<TextBox x:Name="textBox" Grid.Column="1"/>					
	<PasswordBox Grid.Column="1"  Grid.Row="1"/>
	<Button Content="Log In"  Grid.Row="2" Grid.Column="1" />
</Grid>

В зависимости от свойств родительского контейнера, этот элемент визуально в приложении может выглядеть так:

1

Мягко говоря, все смешалось в кучу, а точнее выглядит очень даже “ugly”. Для того чтоб привести в порядок это безобразие, начнем с создания стиля для текстового блока.

1. Выделяем текстовый элемент, нажимаем правую кнопку, выбираем Edit Style – > Create Empty.

2

2. так как вряд ли в нашем приложении текстовые блоки будут использоваться только как метки для текстовых полей, то создаем индивидуальный стиль “TextBlockInGrid” и размещаем его в Application.

3

3. Теперь, попав в режим редактирования стиля, можно приступить к внешним изменениям текстового блока. Задаем шрифт и его размер.

4

4. Выносим эти параметры в отдельные ресурсы, нажав на кнопку advanced options, и затем Convert to New Resource.

5

Называем ресурс для размера шрифта FontSizeNormal, размещаем его в Application.

6 

Аналогично делаем для семейства шрифта – FontFamilyNormal. В результате визуально эти два свойства будут завязаны на созданные локальные ресурсы.

7

5. Также выставляем отступы Margin – все значения по 5, и преобразовываем их в ресурс MarginToGrid.

8

6. На этом базовые приготовления закончены, поэтому возвращаемся для работы в наш корневой документ через панель Object & Timeline.

9

7. Выделяем второй текстовый блок и применяем к нему созданный стиль.

10

Стиль текстового поля для ввода

Выделяем теперь текстовое поле для ввода и в меню Object выбираем Edit Style – > Create Empty. Задаем ему имя TextBoxInGrid, размещаем в Application.

Для Margin –используем ресурс MarginToGrid, для размера текста FontSizeNormal и для семейства шрифта – FontFamilyNormal. Задаем еще свойство минимальной ширины и конвертируем его в ресурс FieldMinWidth.

11

Возвращаемся для работы в наш корневой документ через панель Object & Timeline.

Получившийся стиль:

<Style x:Key="TextBoxInGrid" TargetType="TextBox">
	<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
	<Setter Property="MinWidth" Value="{StaticResource FieldMinWidth}"/>
	<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
	<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
</Style>

Стиль поля пароля

Аналогично для поля пароля делаем стиль PasswordInGrid, с теми же привязками как и для текстового поля для ввода.

Получившийся стиль:

<Style x:Key="PasswordInGrid" TargetType="PasswordBox">
	<Setter Property="MinWidth" Value="{StaticResource FieldMinWidth}"/>
	<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
	<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
	<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
</Style>

Стиль кнопки

Стиль для кнопки – ButtonInGrid – те же привязки, с добавление только нового свойства – горизонтального выравнивания и занесением его в ресурс ButtonAlignment.

<Style x:Key="ButtonInGrid" TargetType="Button">
	<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
	<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
	<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
	<Setter Property="HorizontalAlignment" Value="{StaticResource ButtonAlignment}"/>
</Style>

 

Итого:

Файл ресурсов:

<Application
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:System="clr-namespace:System;assembly=mscorlib"
	x:Class="SimpleStyles.App">
	<Application.Resources>
		<!-- Resources scoped at the Application level should be defined here. -->		
		<System:Double x:Key="FontSizeNormal">12</System:Double>
		<FontFamily x:Key="FontFamilyNormal">Segoe UI</FontFamily>
		<Thickness x:Key="MarginToGrid">5</Thickness>
		<System:Double x:Key="FieldMinWidth">120</System:Double>
		<HorizontalAlignment x:Key="ButtonAlignment">Left</HorizontalAlignment>
		<Style x:Key="TextBlockInGrid" TargetType="TextBlock">
			<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
			<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
			<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
		</Style>		
		<Style x:Key="TextBoxInGrid" TargetType="TextBox">
			<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
			<Setter Property="MinWidth" Value="{StaticResource FieldMinWidth}"/>
			<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
			<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
		</Style>
		<Style x:Key="PasswordInGrid" TargetType="PasswordBox">
			<Setter Property="MinWidth" Value="{StaticResource FieldMinWidth}"/>
			<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
			<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
			<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
		</Style>		
		<Style x:Key="ButtonInGrid" TargetType="Button">
			<Setter Property="Margin" Value="{StaticResource MarginToGrid}"/>
			<Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
			<Setter Property="FontFamily" Value="{StaticResource FontFamilyNormal}"/>
			<Setter Property="HorizontalAlignment" Value="{StaticResource ButtonAlignment}"/>
		</Style>
	</Application.Resources>
</Application>

Всего 28 строк для стилей и ресурсов и довольно таки значительная универсализация.

Блок разметки:

<Grid x:Name="LoginForm">
	<Grid.RowDefinitions>
		<RowDefinition />
		<RowDefinition />
		<RowDefinition />
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="0.4*" />
		<ColumnDefinition Width="0.6*" />
	</Grid.ColumnDefinitions>
	<TextBlock  Text="Username" Style="{StaticResource TextBlockInGrid}" />
	<TextBlock  Text="Password" Grid.Row="1" Style="{StaticResource TextBlockInGrid}" />					
	<TextBox x:Name="textBox" Grid.Column="1" Style="{StaticResource TextBoxInGrid}" />					
	<PasswordBox Grid.Column="1"  Grid.Row="1" Style="{StaticResource PasswordInGrid}" />
	<Button Content="Log In"  Grid.Row="2" Grid.Column="1" Style="{StaticResource ButtonInGrid}" />					
</Grid>

 

Внешний вид: намного аккуратнее, стили и ресурсы можно использовать для других подобных элементов, расположенных в контейнере Grid.

13

P.S. Как штрих-дополнение, можно в стиль текстового блока добавить вертикальное выравнивание по центру.

Исходный проект

Posted: Wednesday, October 20, 2010 1:15 PM від Helen

Коментарі

mormat сказав:

>> P.S. Как штрих-дополнение, можно в стиль текстового блока добавить вертикальное выравнивание по центру.

Не надо по центру :-)

т.е. в данном случае прокатит, но как только на форме появится поле ввода высотой в 3 или 5 строк к примеру (пикселей 100), это "выравнивание по центру" будет смотреться нехорошо. Потому проще просто довесить выравнивание по верху + маржины чтобы текст TextBlock-a и текст первой строки TextBox-a находились приблизительно на одном уровне.

Это так, side note просто :-)

# October 20, 2010 5:08 AM

Helen сказав:

да, конечно, это для однострочной короткой метки. :)Согласна, что если делать ограничение первой колонки грида по ширине, то придеться дописать еще пару свойств в стили текстового блока(перенос текста, выравнивание по верхней линии). Плюс еще выравнивание текстового поля для ввода, выравнивание текста внутри этого поля и т.д.

# October 20, 2010 5:21 AM

progg.ru сказав:

Thank you for submitting this cool story - Trackback from progg.ru

# October 20, 2010 10:01 AM
Анонімні коментарі деактивовані. Увійдіть або Зареєструйтесь щоб мати доступ до ресурсів Спільноти.