Стилі і ресурси Metro

Стиль – це спеціальний механізм, який дозволяє зібрати в одному місці всі загальні властивості певної групи елементів управління Очевидно, що якщо Ви створюєте інтерфейс, то всі кнопки, поля редагування, написи і т д виконані в єдиному стилі Навряд чи кнопки у Вашому додатку розфарбовані в різні кольори, а написи мають різний шрифт

Розглянемо невеликий приклад, що демонструє створення чотирьох кнопок

&ltStackPanel&gt

&ltButton Width=&quot100&quot Height=&quot50&quot Background=&quotGreen&quot

Content=&quotButton 1&quot Margin=&quot5&quot FontFamily=&quotArial&quot FontSize=&quot12&quot FontWeight=&quotBold&quot

Foreground=&quotBlue&quot BorderThickness=&quot3&quot&gt

&lt/Button&gt

&ltButton Width=&quot100&quot Height=&quot50&quot Background=&quotGreen&quot

Content=&quotButton 2&quot Margin=&quot5&quot FontFamily=&quotArial&quot FontSize=&quot12&quot FontWeight=&quotBold&quot

Foreground=&quotBlue&quot BorderThickness=&quot3&quot&gt

&lt/Button&gt

&ltButton Width=&quot100&quot Height=&quot50&quot Background=&quotGreen&quot

Content=&quotButton 3&quot Margin=&quot5&quot FontFamily=&quotArial&quot FontSize=&quot12&quot FontWeight=&quotBold&quot

Foreground=&quotBlue&quot BorderThickness=&quot3&quot&gt

&lt/Button&gt

&ltButton Width=&quot100&quot Height=&quot50&quot Background=&quotGreen&quot

Content=&quotButton 4&quot Margin=&quot5&quot FontFamily=&quotArial&quot FontSize=&quot12&quot FontWeight=&quotBold&quot

Foreground=&quotBlue&quot BorderThickness=&quot3&quot&gt

&lt/Button&gt

&lt/StackPanel&gt

Таким чином, створивши всього чотири кнопки, ми продублювали безліч рядків коду Це не тільки значно збільшує розмір файлу, але і веде до виникнення помилок Адже вказавши невірно один атрибут, можна зіпсувати зовнішній вигляд всього інтерфейсу

Для виділення загальних властивостей в окремий стиль в XAML використовується спеціальний елементStyle Оскільки він не повинен входити в дерево елементів, а лише задає набір властивостей групи елементів, то розташовувати його слід всередині ресурсів програми, сторінки або окремого елемента (Залежно від області застосування) Про ресурси ми поговоримо в наступному розділі, а зараз продемонструємо роботу елемента Style на нашому прикладі Для цього визначимо наступний блок коду відразу після відкриваючого елемента Page

&ltPageResources&gt

&ltStyle x:Key=&quotbuttonStyle&quot TargetType=&quotButton&quot&gt

&ltSetter Property=&quotBackground&quot Value=&quotGreen&quot&gt&lt/Setter&gt

&ltSetter Property=&quotMargin&quot Value=&quot5&quot&gt&lt/Setter&gt

&ltSetter Property=&quotFontFamily&quot Value=&quotArial&quot&gt&lt/Setter&gt

&ltSetter Property=&quotFontSize&quot Value=&quot12&quot&gt&lt/Setter&gt

&ltSetter Property=&quotFontWeight&quot Value=&quotBold&quot&gt&lt/Setter&gt

&ltSetter Property=&quotForeground&quot Value=&quotBlue&quot&gt&lt/Setter&gt

&ltSetter Property=&quotBorderThickness&quot Value=&quot3&quot&gt&lt/Setter&gt

&lt/Style&gt

&lt/PageResources&gt

Як бачите, щоб задати стиль, необхідно вказати ключ і тип елементів, для яких застосовуватиметься стиль Ключ використовується для пошуку необхідного стилю, а TargetType визначає, до яких елементам застосуємо стиль Далі за допомогою набору елементівSetter  ми перерахували всі властивості та їх значення Код XAML нашого інтерфейсу виглядає наступним чином

&ltStackPanel&gt

&ltButton Width=&quot100&quot Height=&quot50&quot

Style=&quot{StaticResource buttonStyle}&quot Content=&quotButton 1&quot&gt

&lt/Button&gt

&ltButton Width=&quot100&quot Height=&quot50&quot

Style=&quot{StaticResource buttonStyle}&quot Content=&quotButton 2&quot&gt

&lt/Button&gt

&ltButton Width=&quot100&quot Height=&quot50&quot

Style=&quot{StaticResource buttonStyle}&quot Content=&quotButton 3&quot&gt

&lt/Button&gt

&ltButton Width=&quot100&quot Height=&quot50&quot

Style=&quot{StaticResource buttonStyle}&quot Content=&quotButton 4&quot&gt

&lt/Button&gt

&lt/StackPanel&gt

Стиль може бути і неявним, тобто не містити ключа У такому випадку властивості, певні в стилі, будуть застосовуватися для всіх елементів зазначеного типу (якщо елемент не ставить зазначені властивості явно) Ось як виглядатиме код, що визначає неявний стиль для наших кнопок

&ltPageResources&gt

&ltStyle TargetType=&quotButton&quot&gt

&ltSetter Property=&quotBackground&quot Value=&quotGreen&quot&gt&lt/Setter&gt

&ltSetter Property=&quotMargin&quot Value=&quot5&quot&gt&lt/Setter&gt

&ltSetter Property=&quotFontFamily&quot Value=&quotArial&quot&gt&lt/Setter&gt

&ltSetter Property=&quotFontSize&quot Value=&quot12&quot&gt&lt/Setter&gt

&ltSetter Property=&quotFontWeight&quot Value=&quotBold&quot&gt&lt/Setter&gt

&ltSetter Property=&quotForeground&quot Value=&quotBlue&quot&gt&lt/Setter&gt

&ltSetter Property=&quotBorderThickness&quot Value=&quot3&quot&gt&lt/Setter&gt

&lt/Style&gt

&lt/PageResources&gt

&ltGrid Background=&quot{StaticResource ApplicationPageBackgroundBrush}&quot&gt

&ltStackPanel&gt

&ltButton Width=&quot100&quot Height=&quot50&quot Content=&quotButton 1&quot&gt

&lt/Button&gt

&ltButton Width=&quot100&quot Height=&quot50&quot Content=&quotButton 2&quot&gt

&lt/Button&gt

&ltButton Width=&quot100&quot Height=&quot50&quot Content=&quotButton 3&quot&gt

&lt/Button&gt

&ltButton Width=&quot100&quot Height=&quot50&quot Content=&quotButton 4&quot&gt

&lt/Button&gt

&lt/StackPanel&gt

&lt/Grid&gt

Стилі являють собою дуже потужний механізм, що дозволяє зробити не тільки Ваше додаток в єдиному форматі, але й надати спільність більшості запускаються Щоб у розробника була можливість створювати сторінки, дотримуючись єдиного стилю, Visual Studio включає в будь-який проект файлStandardStylesxaml, Який визначає набір стандартних стилів на всі випадки життя Так, спробуйте модифікувати код вище, прописавши кнопках стиль BackButtonStyle

&ltStackPanel&gt

&ltButton Width=&quot100&quot Height=&quot50&quot

Content=&quotButton 1&quot Style=&quot{StaticResource BackButtonStyle}&quot&gt

&lt/Button&gt

&ltButton Width=&quot100&quot Height=&quot50&quot

Content=&quotButton 2&quot Style=&quot{StaticResource BackButtonStyle}&quot&gt

&lt/Button&gt

&ltButton Width=&quot100&quot Height=&quot50&quot

Content=&quotButton 3&quot Style=&quot{StaticResource BackButtonStyle}&quot&gt

&lt/Button&gt

&ltButton Width=&quot100&quot Height=&quot50&quot

Content=&quotButton 4&quot Style=&quot{StaticResource BackButtonStyle}&quot&gt

&lt/Button&gt

&lt/StackPanel&gt

В результаті роботи коду на екрані зявиться наступна картина

Рис 31

Як видно з малюнка, колір однієї з кнопок трохи відрізняється Справа в тому, що стиль визначає не тільки зовнішній вигляд кнопки, але і її поведінка при наведенні мишею, виборі і т д Все це можливо завдяки спеціальним властивостям, дозволяє задавати шаблони елементів управління Про них ми поговоримо в одній з наступних глав

XAML в Windows Runtime підтримує і BasedOn-стилі Це дозволяє задати загальні стилі стосовно до базових класів для загальної групи елементів управління (або для конкретного типу елементів управління) і визначити додаткові стилі шляхом успадкування Нижче наведено приклад BasedOn-стилю

&ltStyle x:Key=&quotbaseStyle&quot TargetType=&quotButton&quot &gt

&ltSetter Property=&quotWidth&quot Value=&quot100&quot&gt&lt/Setter&gt

&lt/Style&gt

&ltStyle x:Key=&quotbtnStyleRus&quot

BasedOn=&quot{StaticResource baseStyle}&quot  TargetType=&quotButton&quot&gt

&ltSetter Property=&quotForeground&quot Value=&quotBlue&quot&gt&lt/Setter&gt

&lt/Style&gt

&ltStyle x:Key=&quotbtnStyle&quot

BasedOn=&quot{StaticResource baseStyle}&quot  TargetType=&quotButton&quot&gt

&ltSetter Property=&quotForeground&quot Value=&quotGreen&quot&gt&lt/Setter&gt

&ltSetter Property=&quotContent&quot Value=&quotButton&quot&gt&lt/Setter&gt

&lt/Style&gt

Приклад не зовсім вдалий (локалізувати додатки таким чином не можна),

проте загальну ідею він демонструє

Сергій Лутай, Сергій Байдачний, Windows 8 для C # розробників

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*