TeamLive Blog

Xaml for a glass ball where the color of the glass can be changed.

I thought I wanted this but decided against it later on, so this is a little unfinished.

To change the color – change the RGB of the highlighted value (but leave the alpha alone on the shadow).

 <Canvas Width=”218″ Height=”218″>
  <Ellipse Width=”232.5″ Height=”30″ Canvas.Left=”-6″ Canvas.Top=”199″>
   <Ellipse.Fill>
    <RadialGradientBrush>
     <GradientStop Color=”#CCFFFFFF” Offset=”0″/>
     <GradientStop Color=”#000091FF” Offset=”0.991″ x:Name=”ballShadow2″/>
    </RadialGradientBrush>
   </Ellipse.Fill>
  </Ellipse>
  <Ellipse Width=”218″ Height=”218″ Fill=”#FF0091FF” x:Name=”ballBack1″/>
  <Ellipse Width=”208″ Height=”208″ StrokeThickness=”5″ Canvas.Left=”5″ Canvas.Top=”5″>
   <Ellipse.Stroke>
    <LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
     <GradientStop Color=”#7FFFFFFF” Offset=”0″/>
     <GradientStop Color=”#7FFFFFFF” Offset=”1″/>
     <GradientStop Color=”#00FFFFFF” Offset=”0.496″/>
     <GradientStop Color=”#20FFFFFF” Offset=”0.179″/>
     <GradientStop Color=”#25FEFEFE” Offset=”0.835″/>
    </LinearGradientBrush>
   </Ellipse.Stroke>
  </Ellipse>
  <Ellipse Width=”218″ Height=”218″>
   <Ellipse.Fill>
    <RadialGradientBrush GradientOrigin=”0.507,0.959″>
     <RadialGradientBrush.RelativeTransform>
      <TransformGroup>
       <ScaleTransform CenterX=”0.5″ CenterY=”0.5″ ScaleX=”0.915″ ScaleY=”0.605″/>
       <SkewTransform AngleX=”0″ AngleY=”0″ CenterX=”0.5″ CenterY=”0.5″/>
       <RotateTransform Angle=”0″ CenterX=”0.5″ CenterY=”0.5″/>
       <TranslateTransform X=”-0.004″ Y=”0.195″/>
      </TransformGroup>
     </RadialGradientBrush.RelativeTransform>
     <GradientStop Color=”#E5FFFFFF” Offset=”0″/>
     <GradientStop Color=”#00FFFFFF” Offset=”1″/>
    </RadialGradientBrush>
   </Ellipse.Fill>
  </Ellipse>
  <Path Opacity=”0.72″ Width=”199.516″ Height=”102.268″ Stretch=”Fill” Canvas.Left=”7.484″ Canvas.Top=”3.496″ Data=”M214.5,296.5 C213.50501,243.14961 259.77193,200.49617 314.5,200 377.18045,199.50403 413,248.10919 413,293 413,309.60931 374.69431,291.75519 313.00384,292.74663 253.11668,293.7091 214.5,309.11318 214.5,296.5 z”>
   <Path.Fill>
    <RadialGradientBrush GradientOrigin=”0.499,0.02″>
     <RadialGradientBrush.RelativeTransform>
      <TransformGroup>
       <ScaleTransform CenterX=”0.5″ CenterY=”0.5″ ScaleX=”1.966″ ScaleY=”1.667″/>
       <SkewTransform AngleX=”0″ AngleY=”0″ CenterX=”0.5″ CenterY=”0.5″/>
       <RotateTransform Angle=”0″ CenterX=”0.5″ CenterY=”0.5″/>
       <TranslateTransform X=”0.002″ Y=”0.314″/>
      </TransformGroup>
     </RadialGradientBrush.RelativeTransform>
     <GradientStop Color=”#00FFFFFF” Offset=”1″/>
     <GradientStop Color=”#FFFFFFFF” Offset=”0″/>
    </RadialGradientBrush>
   </Path.Fill>
  </Path>
 </Canvas>
 

Alternatively check out: http://advertboy.wordpress.com/blendcandy/ where there’s loads of great XAML.