Использование растровых изображений в Silverlight для кнопок - PullRequest
Новая
       9

Использование растровых изображений в Silverlight для кнопок

0 голосов
/ 01 ноября 2011

Мне предоставлены кнопки из фотошопа для разных состояний кнопок.

Это выглядит так 

<Button x:Name="ResultsBtn" Click="ResultsBtn_Click" FontSize="27" BorderThickness="0"  Padding="-10"  Margin="-10">
    <Grid>
        <Image Source="..But_01_Idle.png"  Width="496"/>
        <TextBlock Text="Results" Margin="174,21,172,23" Width="90" Height="40" Foreground="White" />
    </Grid>
</Button>

Кнопка выглядит правильно только для одного состояния.

Я хочу использовать выражение blend для записи состояния и изменения фона позади изображения (в данном случае внешнего свечения) или изменения источника при изменении состояния.

Я заметил, что blend, кажется, только записываетположение и преобразует, а не изменяет атрибуты.

Должен ли я делать это в коде или, скорее, отправлять файл photoshop в определенном формате, чтобы его можно было автоматически преобразовать с помощью blend

Ответы [ 3 ]

2 голосов
/ 02 ноября 2011

Хорошо, я на самом деле очень удивлен Blend: он не позволяет вам анимировать свойство источника.Однако Silverlight позволяет это, поэтому я предполагаю, что WP7 также разрешит это;это похоже на ошибку в Blend 4. Однако я по-прежнему не рекомендую использовать подход, основанный на изображениях, потому что изображения будут искажаться и выглядеть плохо / пикселированными при значительном увеличении или уменьшении.Лучше всего отредактировать шаблон элемента управления вашей кнопки и изменить его в соответствии с вашими эталонными рисунками.Вы даже можете использовать Файл -> Импортировать файл Adobe Photoshop ..., чтобы перетащить основную иллюстрацию в Blend.Тогда это просто вопрос замешивания его в шаблон элемента управления.

Если вы не можете использовать изображения (что увеличит размер вашего XAP и фактически приведет к более медленной загрузке UserControl), вы можете перейтиоб этом, как показано в Blend:

  1. Создайте новый проект и добавьте кнопку в корневой визуальный элемент.
  2. Создайте новую папку проекта с именем Images и добавьте в нее два изображения.(Я использовал Koala.jpg и Penguins.jpg из папки Sample Pictures.)
  3. Щелкните правой кнопкой мыши и выберите «Редактировать шаблон» -> «Редактировать копию» ...
  4. Шаблон по умолчанию будет содержатьСетка, которая содержит Границу с именем Фон.Внутри Фоновой границы находится Сетка, которая содержит Прямоугольник и другую Границу.Удалите оба этих самых внутренних элемента.
  5. Теперь добавьте изображение в качестве дочернего элемента сетки фона.
  6. Теперь переключитесь в редактор XAML и измените группы визуальных состояний вашего шаблона элемента управления, чтобы они соответствовали следующимкод.(Найдите два «добавленных» блока комментариев.)
  7. Запустите проект.При наведении мыши вы увидите пингвинов.Нажмите и удерживайте левую мышь, и вы увидите коалу. 
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="Button">
      <Grid>
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="MouseOver">

             <!-- Added --> 
             <Storyboard>
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TheImage" Storyboard.TargetProperty="Source">
                 <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="/Images/Penguins.jpg"/> 
               </ObjectAnimationUsingKeyFrames>
             </Storyboard>
             <!-- End of Added -->

             </VisualState>
             <VisualState x:Name="Pressed">
               <Storyboard>
                 <ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).**(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>

                 <!-- Added -->
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TheImage" Storyboard.TargetProperty="Source">
                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="/Images/Koala.jpg"/>  
                 </ObjectAnimationUsingKeyFrames>**
                 <!-- End of Added -->

               </Storyboard>
             </VisualState>
             <VisualState x:Name="Disabled">
               <Storyboard>
                 <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
              <VisualState x:Name="Focused">
                <Storyboard>
                  <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Unfocused"/>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
        <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">
          <Grid Background="{TemplateBinding Background}" Margin="1">
            <Image x:Name="TheImage" Source=""/>
          </Grid>
        </Border>
        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
        <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
      </Grid>
    </ControlTemplate>
  </Setter.Value>
</Setter>
1 голос
/ 03 ноября 2011

Визуальные состояния создаются с использованием анимации, поэтому вы можете изменять только то, что можно анимировать (и ожидать типичных результатов).Я никогда не пробовал, но мой инстинкт подсказывает мне, что источник изображения не может быть анимирован, поэтому VSM, вероятно, не является жизнеспособным способом справиться с этим.Изображения находятся в вашей кнопке и контролируют их непрозрачность с помощью состояний.Просто мысль.

0 голосов
/ 02 ноября 2011

Вы должны создать шаблон ControlTemplate:

Код для кнопки: 

<Button Template={DynamicResource ButtonTemplate}/>

В вашем словаре ресурсов: 

<ControlTemplate x:Key="ButtonTemplate" {x:Type Button}>
    <Grid Padding="-10"  Margin="-10">
        <Image x:Name="IdleState" Source="..But_01_Idle.png"  Width="496"/>
        <Image x:Name="MouseOverState" Source="..But_01_MouseOver.png" Width="496"/>
        <Image x:Name="PressedState..." etc/>
        <TextBlock Text="Results" Margin="174,21,172,23" Width="90" Height="40" Foreground="White" FontSize="27"/>
    </Grid>
</ControlTemplate>

Затем, в Blend, отредактируйте шаблон, и вы найдете состояния, как сказал Майк. Используйте панель «Свойства», чтобы скрыть / показать ваши изображения для каждого состояния, которое вы хотите стилизовать, и все готово.

...