Botones personalizados en Silverlight

¿Cómo puedo crear botones como este en Silverlight? ¿Necesito mezcla de expresión para esto?Botones personalizados en Silverlight

Como necesito usar los botones modificados en muchos lugares de mi aplicación, ¿debería hacerlo como control de usuario?

enter image description here

Fuente

2011-05-28 devnull

¿Ya tiene el diseño o ya tiene el color de degradado? La mezcla ayudará mucho si solo estás mirando ... sin embargo, es totalmente factible trabajar con el xaml en un estilo (aunque puede llevar mucho tiempo). Deberá ver el xaml y el diseñador al mismo tiempo hasta que obtenga los gradientes buscando como los quiere. Luego puede crear su propia versión heredada del botón o simplemente usar el estilo en botones individuales o en todos los botones. –

No necesita un UserControl para esto, solo una plantilla personalizada Button como recurso de estilo, que luego puede reutilizar configurando el estilo en cualquier instancia de Button.

Si bien es factible sin Blend, le recomiendo que al menos obtenga la versión de prueba, ¡es un IDE realmente bueno para el diseño/desarrollo visual!

Edit: Como un pequeño regalo aquí hay un punto de partida :)

<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>

Fuente

2011-06-02 09:39:10 dain

Debería colocarse la plantilla ButtonStyle1 en App.xaml. ¿Cómo debo referenciarlo desde mi página xaml? Traté de hacerlo según las pautas dadas en algunos sitios, pero no funcionó. – devnull

Lo más fácil es crear una etiqueta '' y una etiqueta '' dentro de 'App.xaml' y pegarla allí, pero también puede crear un XAML diferente para ser su' ResourceDictionary' e importar eso en su 'App.xaml' usando' ' – dain

Estoy intentando agregar mouse over effects sobre su plantilla. ¿Debo crear un nuevo XAML con este código en Expression Blend para que los eventos como el mouse over, deshabilitado, etc. estén visibles? – devnull

Puede hacerlo sin mezcla con la mano, pero créanme, utilizando Blend le dará mucha más potencia y obtendrá resultados más sorprendentes en la fracción del tiempo que necesitaría si decide para hacerlo todo por ti mismo

Fuente

2011-05-28 07:43:36 Dyppl

sin duda recomendaría Blend ya que ahorra mucho tiempo durante el peinado controles y la creación de plantillas.

Sin embargo, si usted no está configurado en tener los botones exactamente el mismo que el de la imagen, hay varios temas que puede utilizar (como JetPack) desde donde se podía tomar prestadas las plantillas y modificar los colores relativamente fácilmente en XAML.

Fuente

2011-06-02 09:49:07 Town

Botones personalizados en Silverlight

Respuesta

Cuestiones relacionadas