Imagos Consulting Weblog

Developers Cant Do Design (or Can They?) – Neville Richards Personal Blog

Twitterest – Silverlight Twitter Status

I have been using Twitter more lately to keep up to date with colleagues, family and friends. Twitter has a nice simple interface, and a good programming API. With all of this, I have written Twitterest to blend Silverlight, the Twitter REST API and some server side C# to cache the Twitter API responses.

Twitterest

Twitterest shows statistics for people in my “Following” group, including the number of posts that each has made, the number of people in their friends list and the the number of people following them. People are sorted by a selected criteria and the ranking is displayed in a spiral. The larger the count the further along the spiral and the larger the persons button is. Clicking on a criteria button loads the latest stats for that criteria.

The latest Twitterest can be found at http://www.imagos.fl.net.au/silverlight/twitterest/

Technorati tags:

Advertisements
1 Comment »

Building Silverlight Controls

To build applications using Microsoft Silverlight 1.0 you will most likely need some user interface controls. While the first release of Silverlight does not include any controls, other than a video playback control, the rich development framework will support building custom controls. The following custom controls can be used as the basis of a number of applications:

  • Button
  • Slider
  • Check box
  • Radio button
  • Edit box

Authoring Silverlight applications can be done using your favourite tool; Visual Studio, Blender, Notepad etc. Code fragments presented can be paste into an existing project. Each custom control example includes a XAML and Javascript template fragment that can be customised for your application.

Button

A button control is the simplest custom control to create in Silverlight. Any Silverlight object (UIElement), of collection of objects, can become a button by intercepting the “MouseLeftButtonDown” or “MouseLeftButtonUp” events.

The following example uses a rectangle and text block places on a canvas to create a simple button image:

XAML

	<Canvas Width="100" Height="35"
           Canvas.Left="211" Canvas.Top="54"
           x:Name="SimpleButton"
           MouseLeftButtonDown="buttonMouseLeftButtonDown">
           <Rectangle x:Name="SimpleButtonSurround"
               Width="100" Height="35"
               Fill="#FFECECEC"
               Stroke="#FF000000"
               RadiusX="5"
               RadiusY="5" />
           <TextBlock Width="58" Height="24"
               Canvas.Left="40"
               Canvas.Top="7"><Run Text="Ok"/></TextBlock>
	</Canvas>

 

JavaScript

    function buttonMouseLeftButtonDown(sender, keyEventArgs)
    {
	   alert("Hello world!");
    }

 

This button doesn’t provide any visual state indication. By adding handlers for the “MouseEnter” and “MouseLeave” events a basic mouse over can be built. By combining this with Silverlight animations a Windows Vista (aero glass) like button can be created.

Silverlight Glass Button

 

XAML

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="480" Width="640">

   <Canvas.Resources>
     <Storyboard x:Name="GlassButton_glow_enter">
        <DoubleAnimationUsingKeyFrames
          Storyboard.TargetName="GlassButton_glow"
          Storyboard.TargetProperty="Opacity">
          <SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="1" />
        </DoubleAnimationUsingKeyFrames>
      </Storyboard>
      <Storyboard x:Name="GlassButton_glow_leave">
        <DoubleAnimationUsingKeyFrames
           Storyboard.TargetName="GlassButton_glow"
           Storyboard.TargetProperty="Opacity">
           <SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0" />
         </DoubleAnimationUsingKeyFrames>
      </Storyboard>
   </Canvas.Resources>

   <Canvas x:Name="GlassButton"
       Canvas.Top="150" Canvas.Left="200"
       Height="34" Width="180"
       MouseLeftButtonDown="onMouseDown"
       MouseLeftButtonUp="onMouseUp"
       MouseMove="onMouseMove"
	MouseEnter="GlassButtonMouseEnter" MouseLeave="GlassButtonMouseLeave">

      <!-- Outer border of the button... just the stroke of the rectangle -->
      <Rectangle Width="180" Height="34"
          RadiusX="7" RadiusY="7"
          StrokeThickness="1" Stroke="#FFFFFFFF"/>

      <!-- Next in black border, and a somewhat opaque fill -->
      <Rectangle Canvas.Top="1" Canvas.Left="1"
          Width="178" Height="32"
          RadiusX="6" RadiusY="6"
          Fill="#7F000000" Stroke="#FF000000" StrokeThickness="1" />

      <!-- Radial gradient to give a glow to the button when rolled over -->
      <Rectangle x:Name="GlassButton_glow"
         Canvas.Top="2" Canvas.Left="2"
         Width="176" Height="30"
         RadiusX="5" RadiusY="5" Opacity="0">
         <Rectangle.Fill>
            <RadialGradientBrush>
               <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                     <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
                     <TranslateTransform X="-0.368" Y="-0.152"/>
                  </TransformGroup>
               </RadialGradientBrush.RelativeTransform>
               <GradientStop Color="#B28DBDFF" Offset="0" />
               <GradientStop Color="#008DBDFF" Offset="1" />
            </RadialGradientBrush>
         </Rectangle.Fill>
      </Rectangle>

      <TextBlock x:Name="GlassButton_text"
          Canvas.Left="50" Canvas.Top="5"
          Foreground="#FFFFFFFF" Text="Glass Button" />

      <!-- over the top of part of the text is a lighter opaque gradient,
           clipped to the top half of the button -->
      <Rectangle Canvas.Left="2" Canvas.Top="2"
         Width="176" Height="30" RadiusX="5" RadiusY="5">
         <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0.494,0.028"
               EndPoint="0.494, 0.889" >
               <GradientStop Color="#99FFFFFF" Offset="0" />
               <GradientStop Color="#33FFFFFF" Offset="1" />
            </LinearGradientBrush>
         </Rectangle.Fill>

         <Rectangle.Clip>
            <RectangleGeometry Rect="0,0,176,15"/>
         </Rectangle.Clip>

      </Rectangle>

   </Canvas>

</Canvas>

 

JavaScript


function ClickMe(){
   alert("ClickMe");
}

function GlassButtonMouseEnter(sender, args){
   var sb = sender.findName(sender.Name + "_glow_enter");
   sb.begin();
}

function GlassButtonMouseLeave(sender, args){
   var sb = sender.findName(sender.Name + "_glow_leave");
   sb.begin();
}

In the next I will look at building a simple slider control.

Tags:

Leave a comment »

3D Spinning Logo in Silverlight

Breeze Designer, which is a a 3D modeler I wote as a graphical modeler and front end to the popular POV-Ray ray tracer and also a long term hobby project of mine, is being extended to be able to handle a number of new technologies including Microsoft’s Silverlight. As part of this I have created a simple 3D spinning logo of the CGI Australia company. I have posted a sample animation at http://www.imagos.fl.net.au/silverlight/cgi/ The logo was originally created in Adobe Illustrator then imported into Breeze Designer where it was animated into a 3D the spinning version.

Technorati Tags:

1 Comment »

Hello world!

Hi to everyone from me, Neville Richards. This is my new blog on the world of Microsoft Technologies and 3D including Silverlight, Sharepoint and Breeze Designer from a developers perspective.

I will be presenting a few real world tutorials over the next weeks to show how Microsoft’s Silverlight can be used to improve the user experience of sites without a complete site redesign. Hopefully blending some development with a little design in the process.

Leave a comment »