1 Тема от Sergey

  • Sergey
  • Moderator
  • Неактивен
  • Зарегистрирован: 2009-06-17
  • Сообщений: 473
  • User Karma: 18

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

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

В этой части я расскажу о том, как настроить тему Rainer. Мы будет использовать пример из первой части статьи. Первым делом добавьте в наш проект файл RainerOrange.xaml из каталога Source\Sample source code\Controls.Samples\Theming\ThemeBrowser\ и переименуйте его в RainerRadialBlue.xaml (не забудьте выставить Build Action в Content). Готовы? Начнем изменения цветовой схемы контролов в их различных состояниях.

Thumbs up Thumbs down

2 Ответ от Sergey

  • Sergey
  • Moderator
  • Неактивен
  • Зарегистрирован: 2009-06-17
  • Сообщений: 473
  • User Karma: 18

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

Модификация кисти NormalBrush

Если вы загляните в содержимое файла RainerRadialBlue.xaml, то найдете там следующую кисть:

<LinearGradientBrush x:Key="NormalBrush" EndPoint=".7,1" StartPoint=".7,0">
    <GradientStop Color="#FFFFEDAC" Offset="0"/>
    <GradientStop Color="#F9F9C200" Offset="0.375"/>
    <GradientStop Color="#E5FFC600" Offset="0.625"/>
    <GradientStop Color="#C6C29700" Offset="1"/>
</LinearGradientBrush>

Изменив эту кисть, вы повлияете на цвет всех контролов в их нормальном состоянии. Предположим, я хочу изменить цвет кнопки в нормальном состоянии, как показано на рисунке:

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

Для этого я просто определю новую кисть RadialGradientBrush (обычно для таких целей я использую Blend) и заменю старую на новую:

<RadialGradientBrush x:Key="NormalBrush" GradientOrigin="0.871,0.034">
    <RadialGradientBrush.RelativeTransform>
        <TransformGroup>
            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.346" ScaleY="1.346"/>
        </TransformGroup>
    </RadialGradientBrush.RelativeTransform>
    <GradientStop Color="#FF2A3774" Offset="1"/>
    <GradientStop Color="#FFFFFFFF" Offset="0"/>
</RadialGradientBrush>

Thumbs up Thumbs down

3 Ответ от Sergey

  • Sergey
  • Moderator
  • Неактивен
  • Зарегистрирован: 2009-06-17
  • Сообщений: 473
  • User Karma: 18

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

Модификация кисти MouseOverBrush

Изменение цвета состояния контрола MouseOver требует модификации кисти MouseOverBrush, как показано ниже:

<RadialGradientBrush x:Key="MouseOverBrush" GradientOrigin="0.871,0.192">
    <RadialGradientBrush.RelativeTransform>
        <TransformGroup>
            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.346" ScaleY="1.402"/>
            <TranslateTransform X="0" Y="-0.028"/>
        </TransformGroup>
    </RadialGradientBrush.RelativeTransform>
    <GradientStop Color="#FF3B4FAB" Offset="1"/>
    <GradientStop Color="#FFFFFFFF" Offset="0"/>
</RadialGradientBrush>

Thumbs up Thumbs down

4 Ответ от Sergey

  • Sergey
  • Moderator
  • Неактивен
  • Зарегистрирован: 2009-06-17
  • Сообщений: 473
  • User Karma: 18

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

Изменяем кисть SelectedBackgroundBrush

Изменение цвета в состоянии «выделение» требует модификации фоновой кисти, как показано ниже:

<RadialGradientBrush x:Key="SelectedBackgroundBrush" GradientOrigin="0.946,0.163">
    <RadialGradientBrush.RelativeTransform>
        <TransformGroup>
            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.346" ScaleY="1.346"/>
        </TransformGroup>
    </RadialGradientBrush.RelativeTransform>
    <GradientStop Color="#FF2A3774" Offset="1"/>
    <GradientStop Color="#FFFFFFFF" Offset="0"/>
</RadialGradientBrush>

Thumbs up Thumbs down

5 Ответ от Sergey

  • Sergey
  • Moderator
  • Неактивен
  • Зарегистрирован: 2009-06-17
  • Сообщений: 473
  • User Karma: 18

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

Изменяем кисти Highlight и Border

Кисть Border определяет бордюр контрола в нормальном состоянии:

<LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF2A3774"/>
    <GradientStop Color="#FF2A3774" Offset="0.375"/>
</LinearGradientBrush>

Кисть Hightlight определяет цвет бордюра контрола, когда он в состоянии фокуса:

<LinearGradientBrush x:Key="HighlightBrush" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF1E1976"/>
    <GradientStop Color="#FF373462" Offset="0.531"/>
</LinearGradientBrush>

Thumbs up Thumbs down

6 Ответ от Sergey

  • Sergey
  • Moderator
  • Неактивен
  • Зарегистрирован: 2009-06-17
  • Сообщений: 473
  • User Karma: 18

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

Заключение

Тема Rainer была сделана из стандартной темы Silverlight. Мы хотели придать большую гибкость возможностям изменения цветовой схемы контролов. Как вы видите, требуется всего лишь несколько изменений предопределенных кистей, чтобы изменить внешний вид контрола.

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

Вы можете загрузить пример проекта отсюда и RainerRadialBlue.xaml отсюда.

Thumbs up Thumbs down

7 Ответ от Sergey

  • Sergey
  • Moderator
  • Неактивен
  • Зарегистрирован: 2009-06-17
  • Сообщений: 473
  • User Karma: 18

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

Ссылка на оригинал: Customizing Silverlight Toolkit Themes (Part II)

Thumbs up Thumbs down