1

Тема: Настройка тем из Silverlight Toolkit (часть 1)

Настройка тем из Silverlight Toolkit (часть 1)


Мы поставляем Silverlight Toolkit со следующими Темами:

http://silverlight.su/data/themes/tools/Toolkit/Themes/CustomizingTheme/clip_image002_thumb.jpg  http://silverlight.su/data/themes/tools/Toolkit/Themes/CustomizingTheme/clip_image004_thumb.jpg  http://silverlight.su/data/themes/tools/Toolkit/Themes/CustomizingTheme/clip_image006_thumb.gif  http://silverlight.su/data/themes/tools/Toolkit/Themes/CustomizingTheme/clip_image008_thumb.gif  http://silverlight.su/data/themes/tools/Toolkit/Themes/CustomizingTheme/clip_image010_thumb.jpg  http://silverlight.su/data/themes/tools/Toolkit/Themes/CustomizingTheme/clip_image012_thumb.jpg

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

Thumbs up Thumbs down

2

Re: Настройка тем из Silverlight Toolkit (часть 1)

Настройка темы Shiny Blue

Сперва, если конечно вы еще этого не сделали, загрузите Silverlight Tooklkit. В каталоге Source\Controls.Samples\Theming\ThemeBrowser\ вы найдете все файлы с темами, а также исходный код примера обозревателя тем. Данное руководство предполагает, что вы уже знакомы с Implicit Style Manager. Эта тема описана в блогах Beatriz и Jesse Liberty (русский перевод). Для более глубокого понимания почитайте статью в блоге Jafar’а – разработчика ISM.

Сейчас мы будем работать с  ShinyBlue.xaml.


Шаг 1:

Создайте новый проект Silverlight.


Шаг 2:

Добавьте ссылки на  Microsoft.Windows.Controls.Theming.dll и System.Windows.Controls.dll

Sergey пишет:

В Silverlight 3 вам нужно добавить следующие библиотеки:

System.Windows.Controls.Input.Toolkit.dll
System.Windows.Controls.Theming.Toolkit.dll
System.Windows.Controls.Input.dll
System.Windows.Controls.DataVisualization.Toolkit.dll
System.Windows.Controls.Data.dll
System.Windows.Controls.dll

Даже если лично вам от этих библиотек ничего не нужно, то они нужны ImplicitStyleManager’у.

И еще добавьте библиотеку :

System.Windows.Controls.Toolkit.dll

Она хотя и не нужна ImplicitStyleManager’у, в примере используется контрол Expander, который требует ее подключения.

Если вы пропустите хотя бы одну из них, то получите исключение вроде:

Invalid attribute value <*> for property TargetType


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


Шаг 3:

Добавьте ShinyBlue.xaml в свой проект в каталог themes, переименуйте его в ShinyDarkTeal.xaml и задайте Build Action = Content:

http://silverlight.su/data/themes/tools/Toolkit/Themes/CustomizingTheme/image_thumb_1.png


Шаг 4:

В разметку файла page.xaml добавьте следующие ссылки на библиотеки:

xmlns:theming="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.Toolkit"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"

И следующие строки кода разметки:

<StackPanel Orientation="Horizontal">
    <!--ShinyDarkTeal-->   
    <StackPanel Width="100"
    theming:ImplicitStyleManager.ApplyMode="Auto"
    theming:ImplicitStyleManager.ResourceDictionaryUri="themes/ShinyDarkTeal.xaml">

        <Button Content="Button" />
        <CheckBox Content="CheckBox" />
        <RadioButton Content="RadioButton"/>
        <Slider />
        <ListBox x:Name="List1" />
        <ProgressBar Height="15" Value="30"/>
        <controls:Expander ExpandDirection="Down"/>
        
    </StackPanel>
</StackPanel>

Шаг 5:

Откройте файл ShinyDarkTeal и найдите следующие строки (ближе к началу файла):

 <Color x:Key="NormalBrushGradient1">#FFBAE4FF</Color>
 <Color x:Key="NormalBrushGradient2">#FF398FDF</Color> 
 <Color x:Key="NormalBrushGradient3">#FF006DD4</Color> 
 <Color x:Key="NormalBrushGradient4">#FF0A3E69</Color>

И замените их следующими строками:

<Color x:Key="NormalBrushGradient1">#FFC5E1D7</Color> 
<Color x:Key="NormalBrushGradient2">#FF7CB2A2</Color> 
<Color x:Key="NormalBrushGradient3">#FF3F8570</Color> 
<Color x:Key="NormalBrushGradient4">#FF294C41</Color> 

Шаг 6:

Скомпилируйте и запустите пример. Вы увидите следующее:

http://silverlight.su/data/themes/tools/Toolkit/Themes/CustomizingTheme/image_thumb_2.png

Thumbs up Thumbs down

3

Re: Настройка тем из Silverlight Toolkit (часть 1)

Заключение

Как видите, изменять цветовую гамму темы довольно просто. В следующий раз я более углубленно опишу настройку темы, а пока вы можете скачать код примера. Я добавил большее кол-во вариантов Shinу-тем вам для развлечения:

http://silverlight.su/data/themes/tools/Toolkit/Themes/CustomizingTheme/image_thumb_3.png


Так можете загрузить любую из этих тем отдельно:

• ShinyDarkTeal.xaml

• ShinyDarkGreen.xaml

• ShinyDarkPurple.xaml

Thumbs up Thumbs down

4

Re: Настройка тем из Silverlight Toolkit (часть 1)

Продолжение

Thumbs up Thumbs down