Paul Yanez

In the following tutorial I will show how to create your own custom button with images, gradients and transitions. 1- import an image and place on the artboard 2- add a rectangle with a radial gradient the same width and height as the image 3- add a rectangle with no fill and grey color as the border 4- select all 3 objects, right click and group into a canvas 5- right click and select make into usercontrol 6- select button as the type of usercontrol you want to create 7- right click and select “edit template/edit current” 8- select the states panel and go to the “mouseover” state and set the gradient’s opacity property to “0″ and change the stroke color of the rectangle from grey to white 9- change the transition duration to 0.3 sec and set the transition to “cubic in” Silverlight

Import an image and place on the artboard

Add a rectangle with a radial gradient the same width and height as the image

Add a rectangle with no fill and grey color as the border

Select all 3 objects

Group into a canvas

Right click and select make into usercontrol, select button as the type of usercontrol you want to create

Right click and select “edit template/edit current”, select the states panel and go to the “mouseover” state and set the gradient’s opacity property to “0″ and change the stroke color of the rectangle from grey to white

Change the transition duration to 0.3 sec and set the transition to “cubic in”

XAML code

      <UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	x:Class="CustomButtonEffects.MainPage"
	Width="640" Height="325" mc:Ignorable="d">
        <Grid x:Name="LayoutRoot">
          <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
              <GradientStop Color="Black" Offset="0"/>
              <GradientStop Color="#FF353535" Offset="1"/>
            </LinearGradientBrush>
          </Grid.Background>
          <TextBlock Height="53" Margin="124,0,120,71" VerticalAlignment="Bottom" FontSize="34.667" TextWrapping="Wrap" HorizontalAlignment="Center" FontFamily="Fonts/Fonts.zip#Myriad Pro">
            <TextBlock.Foreground>
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFE0E0E0" Offset="0"/>
                <GradientStop Color="#FF585858" Offset="1"/>
              </LinearGradientBrush>
            </TextBlock.Foreground>
            <TextBlock.Effect>
              <DropShadowEffect BlurRadius="2" Opacity="0.5" ShadowDepth="2"/>
            </TextBlock.Effect>
            <Run Text="Custom Button Effects"/>
            <LineBreak/>
          </TextBlock>
          <TextBlock Height="52" Margin="161,0,157,19" VerticalAlignment="Bottom" FontSize="16" Foreground="White" TextWrapping="Wrap" FontFamily="Fonts/Fonts.zip#Myriad Pro" Text="Rollover the buttons to see the effect ." TextAlignment="Center"/>
          <Button Margin="220,69,220,155" Style="{StaticResource ButtonImageGradient}" Content="Button"/>
          <Button Margin="18,69,0,155" Style="{StaticResource ButtonImageGradient}" Content="Button" HorizontalAlignment="Left" Width="200"/>
          <Button Margin="0,69,18,155" Style="{StaticResource ButtonImageGradient}" Content="Button" HorizontalAlignment="Right" Width="200"/>
        </Grid>
      </UserControl>
      

XAML code – Resource Dictionary

      <ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
        <!-- Resource dictionary entries should be defined here. -->
        <Style x:Key="ButtonImageGradient" TargetType="Button">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="Button">
					<Canvas>
						<VisualStateManager.VisualStateGroups>
							<VisualStateGroup x:Name="FocusStates">
								<VisualState x:Name="Focused"/>
								<VisualState x:Name="Unfocused"/>
							</VisualStateGroup>
							<VisualStateGroup x:Name="CommonStates">
								<VisualStateGroup.Transitions>
									<VisualTransition GeneratedDuration="00:00:00.3000000">
										<VisualTransition.GeneratedEasingFunction>
											<CubicEase EasingMode="EaseIn"/>
										</VisualTransition.GeneratedEasingFunction>
									</VisualTransition>
								</VisualStateGroup.Transitions>
								<VisualState x:Name="Normal">
									<Storyboard>
										<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BorderOutline" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
											<EasingColorKeyFrame KeyTime="00:00:00" Value="#7E575757"/>
										</ColorAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="MouseOver">
									<Storyboard>
										<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BorderOutline" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
											<EasingColorKeyFrame KeyTime="00:00:00" Value="White"/>
										</ColorAnimationUsingKeyFrames>
										<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ButtonGradient" Storyboard.TargetProperty="(UIElement.Opacity)">
											<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
										</DoubleAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Pressed"/>
								<VisualState x:Name="Disabled"/>
							</VisualStateGroup>
						</VisualStateManager.VisualStateGroups>
						<Image Height="100" Source="Image1.png" Stretch="Fill"/>
						<Rectangle x:Name="ButtonGradient" Height="100" Width="200">
							<Rectangle.Fill>
								<RadialGradientBrush RadiusX="0.657" RadiusY="0.617">
									<GradientStop Offset="0"/>
									<GradientStop Color="#C1000000" Offset="1"/>
								</RadialGradientBrush>
							</Rectangle.Fill>
						</Rectangle>
						<Rectangle x:Name="BorderOutline" Fill="{x:Null}" Stroke="#7E808080" Height="101" Width="200"/>
					</Canvas>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
      </ResourceDictionary>