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

Question

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

Похоже, что этот

<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 для записи состояния и изменения фона за изображением (в данном случае внешнего свечения) или изменения источника при изменении состояния.

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

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

Answer 1

Вы должны создать 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, Редактирование шаблона и вы найдете Штаты, как сказал Майк. Используйте панель «Свойства», чтобы скрыть/показать изображения для каждого состояния, которое вы хотите стилизовать, и вы должны сделать это.

Answer 2

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

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

1. Создать новый проект и добавьте кнопку в свой корневой визуальный элемент.
2. Создайте новую папку проекта «Изображения» и добавьте к ней два изображения. (Я использовал 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> 

Answer 3

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

Непрозрачность, однако, может быть анимирована, поэтому вы можете иметь как изображение в кнопке ytour, так и управлять их непрозрачностью с помощью состояний. Просто мысль.