Custom buttons in silverlight

Question

How to create such buttons in Silverlight. I need a mix of expressions for this.

Since I need to use modified buttons in many places in my application, should I do this as a user control?

Answer 1

To do this, you do not need UserControl , but only a custom Button template as a style resource, which can then be reused by setting the style for any Button instance.

While this is not possible without Blend, I highly recommend that you at least get a trial version, it is really a very good development environment for development / visual development!

Edit: like a little starting point here :)

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

Answer 2

You can do it without Blend manually, but believe me, using Blend will give you much more energy and you will get more amazing results in the fraction of the time that you will need if you decide to do everything yourself.

Answer 3

I would definitely recommend Blend as it saves so much time when styling controls and creating templates.

However, if you are not configured to have the buttons exactly match the image, there are a few that you could use (like JetPack ) from which you could borrow patterns and change colors relatively easily in XAML.