Gepost door: antonidol | vrijdag 6 juni 2008

Create a MediaPlayer11-style Playbutton with glow

Just to show how easy it is to make a button in MediaPlayer11-style. Here’s a short HowTo on how to do this in Expression Blend:

In Blend, open a New Project…

Select Ellipse in Toolbox

Drag Ellipse 150px, Hold Shift to constrain to circle

 

 

 

Click Stroke, Add 3px brown stroke to the circle

Create RadialGadient Yellow, Dark Yellow, Yellow

Click Brush Transform in Toolbox (G):

 

 

 

 

<Ellipse Stroke="#FF722400" StrokeThickness="3">
	<Ellipse.Fill>
		<RadialGradientBrush GradientOrigin="0.35,0.35">
			<RadialGradientBrush.RelativeTransform>
				<TransformGroup>
					<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
					<TranslateTransform X="-0.09" Y="-0.12"/>
				</TransformGroup>
			</RadialGradientBrush.RelativeTransform>
			<GradientStop Color="#FFFDFF00" Offset="0"/>
			<GradientStop Color="#FFC48700" Offset="0.75"/>
			<GradientStop Color="#FFFFDE00" Offset="1"/>
		</RadialGradientBrush>
	</Ellipse.Fill>
</Ellipse>

Copy And Paste Ellipse in front of existing Ellipse

Hold ALT and Shift dragging lowerleft handle to the middle of the ellipse.

 

 

 

Fill LinearGradient White on Top, White op bottom, with Alpha set to Zero.
Set Stroke to none

 

 

 

Select Object/Path/Convert to Path

Select Direct Selection Tool in ToolBox (A)

 

 

 

Drag bottom Controlpoint up above the middel of the lower ellipse

 

 

 

 

Finish up with characters from WingDings font and a circle with Black to White diagonal LinearGradient behind the button.

 

 

 

Njoy!


 <Grid x:Name="VideoButton" Width="200" Height="200" Background="Black">
  <Ellipse Stretch="Fill"  Width="175" Height="175">
   <Ellipse.Fill>
    <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
     <GradientStop Color="#FFFFFFFF" Offset="1"/>
     <GradientStop Color="#FF000000" Offset="0"/>
    </LinearGradientBrush>
   </Ellipse.Fill>
  </Ellipse>
  <Ellipse Stretch="Fill" Stroke="#FF000000"  Width="150" Height="150">
   <Ellipse.Fill>
    <RadialGradientBrush GradientOrigin="0.33,0.33">
     <RadialGradientBrush.RelativeTransform>
      <TransformGroup>
       <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.3" ScaleY="1.3"/>
       <TranslateTransform X="-0.015" Y="-0.075"/>
      </TransformGroup>
     </RadialGradientBrush.RelativeTransform>
     <GradientStop Color="#FFFDFF00" Offset="0"/>
     <GradientStop Color="#FFC48700" Offset="0.775"/>
     <GradientStop Color="#FFFFDE00" Offset="1"/>
    </RadialGradientBrush>
   </Ellipse.Fill>
  </Ellipse>
  <TextBlock VerticalAlignment="Center" TextAlignment="Center"><Run FontFamily="Webdings" FontSize="96" Text=":"/></TextBlock>
  <Path Margin="0,-55,0,0" Width="125" Height="75" Stretch="Fill" Data="M181.5,88.5 C181.5,137.10106 139.84441,74.306452 89.862639,74.306452 39.880869,74.306452 0.5,137.10106 0.5,88.5 0.5,39.898942 41.01823,0.5 91,0.5 140.98177,0.5 181.5,39.898942 181.5,88.5 z">
   <Path.Fill>
    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#FFFFFFFF" Offset="0"/>
     <GradientStop Color="#00FFFFFF" Offset="1"/>
    </LinearGradientBrush>
   </Path.Fill>
  </Path>
 </Grid>


Responses

  1. Hi, cool post ! Can you show us (the blend-impaired xaml junkies) the final xaml ?

    Thanks !

  2. Hi Sven.

    You’re supposed to build it yourself in Blend, but since you’re impaired…🙂 I have added a cleaned up version of the XAML for the videobutton above… Njoy!

  3. Hi Sven,

    You’re supposed to make it in Blend, but since you are impaired :)… I’ve added a cleaned up version of the XAML at the bottom of the post.
    Njoy!

  4. Thanks so much !🙂


Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s

Categorieën

%d bloggers op de volgende wijze: