Блог

Главная - Вопросы по программированию - Пользовательские кнопки в silverlight

Пользовательские кнопки в silverlight

#silverlight #xaml #expression-blend

#silverlight #xaml #выражение-смешивание

Вопрос:

Как я могу создать подобные кнопки в silverlight. Нужно ли мне для этого смешивать выражения.

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

введите описание изображения здесь

Комментарии:

1. У вас есть только внешний вид или у вас уже есть детали градиентного цвета? Смешивание очень поможет, если вы просто смотрите… однако это вполне выполнимо, просто работая с xaml в стиле (хотя это может занять много времени). Вам захочется просматривать xaml и designer одновременно, пока градиенты не будут выглядеть так, как вы хотите. Затем вы можете создать свою собственную унаследованную версию кнопки или просто использовать стиль для отдельных кнопок или для всех кнопок.

Ответ №1:

UserControl Для этого вам не нужен a, просто пользовательский Button шаблон в качестве ресурса стиля, который затем вы можете повторно использовать, установив стиль в любом Button экземпляре.

Хотя это выполнимо без Blend, я настоятельно рекомендую вам, по крайней мере, получить пробную версию, это действительно очень хорошая IDE для дизайна / визуальной разработки!

Редактировать: В качестве небольшого подарка вот отправная точка 🙂

 <Style x:Key="ButtonStyle1" TargetType="Button">
    <Setter Property="Foreground" Value="#FFFFFFFF"/>
    <Setter Property="Padding" Value="3"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="#FF000000"/>
    <Setter Property="Template">
         <Setter.Value>
              <ControlTemplate TargetType="Button">
                    <Grid>
                          <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                      <VisualState x:Name="Normal"/>
                                      <VisualState x:Name="MouseOver"/>
                                      <VisualState x:Name="Pressed"/>
                                      <VisualState x:Name="Disabled">
                                           <Storyboard>
                                                <DoubleAnimation Duration="0" To="0.4" 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}">
                                  <Border.Background>
                                      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                          <GradientStop Color="#FF707070" Offset="0"/>
                                          <GradientStop Color="#FF666666" Offset="0.49"/>
                                          <GradientStop Color="#FF5e5e5e" Offset="0.51"/>
                                          <GradientStop Color="#FF535353" Offset="1"/>
                                      </LinearGradientBrush>
                                  </Border.Background>
                          </Border>
                          <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <ContentPresenter.Effect>
                                      <DropShadowEffect BlurRadius="3" ShadowDepth="2" Opacity="0.5"/>
                                </ContentPresenter.Effect>
                          </ContentPresenter>
                          <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0"/>
                          <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" Stroke="#FF6DBDD1" StrokeThickness="1"/>
                    </Grid>
              </ControlTemplate>
         </Setter.Value>
    </Setter>
</Style>

Комментарии:

1. Должен ли шаблон ButtonStyle1 быть размещен в App.xaml. Как я должен ссылаться на это со своей страницы xaml. Я пытался сделать в соответствии с рекомендациями, приведенными на некоторых сайтах, но не сработало.

2. Проще всего создать <Application.Resources> тег и <ResourceDictionary> тег внутри App.xaml и вставить его туда, но вы также можете создать отдельный XAML для себя ResourceDictionary и импортировать его в свой App.xaml с помощью <ResourceDictionary.MergedDictionaries>

3. Я пытаюсь добавить эффекты наведения курсора мыши на ваш шаблон. Должен ли я создать новый XAML с этим кодом в Expression Blend для этого, чтобы были видны такие события, как наведение курсора мыши, отключение и т.д.

4. Ну, в моем примере состояния MouseOver и Pressed реализованы не для упрощения, поэтому все, что вы можете сделать, это изменить цвет Background , используя функцию записи состояния в Blend (при редактировании шаблона щелкните по любому состоянию, и измененные свойства будут сохранены как анимация, не затрагивающая базовое состояние) или, если вы хотите сделать что-то более продвинутое, просто добавьте больше элементов, таких как Rectangles , посмотрите, как работают состояния Focus или Disabled !

Ответ №2:

Вы можете сделать это без Blend вручную, но поверьте мне, использование Blend даст вам гораздо больше возможностей и вы получите более потрясающие результаты за ту долю времени, которая вам потребовалась бы, если бы вы решили сделать все это самостоятельно.

Ответ №3:

Я бы определенно рекомендовал Blend, поскольку это экономит много времени при стилизации элементов управления и создании шаблонов.

Однако, если вы не настроены на то, чтобы кнопки точно совпадали с изображением, есть несколько тем, которые вы могли бы использовать (например, JetPack), из которых вы могли бы позаимствовать шаблоны и относительно легко изменить цвета в XAML.