Dave's Silverlight Dashboards and gauges

FiveStarRanking

The FiveStarRanking control is one of those classics you see em everywhere on the net these days . I first remember seeing one on my iPod years ago.

In normal operation the control maps values 0..100 into fractional star rankings.

The FiveStarRanking control has two visual properties that the user an set

  • the InRankColor
  • the OutRankColor

The InRankColor is the color of a star (or part of a star) that is in the rank (the gold color in the example above). The OutRankColor is the color of stars that are not in the rank (black in the example above).

Both the InRankColor and the OutRankColor properties are ColorPoint take values, describing the start and end colors of a gradient fill. Here is an example

        <db:FiveStarRanking Value="50">
            <db:FiveStarRanking.InRankColor >
                <db:ColorPoint HiColor="#999999" LowColor="#FFFFFF"  />
            </db:FiveStarRanking.InRankColor>
            <db:FiveStarRanking.OutRankColor >
                <db:ColorPoint HiColor="#000000" LowColor="#222222"  />
            </db:FiveStarRanking.OutRankColor>
        </db:FiveStarRanking>


        <db:FiveStarRanking  Value="50">
            <db:FiveStarRanking.InRankColor >
                <db:ColorPoint HiColor="#440044" LowColor="#FF00FF"  />
            </db:FiveStarRanking.InRankColor>
            <db:FiveStarRanking.OutRankColor >
                <db:ColorPoint HiColor="#000000" LowColor="#330033"  />
            </db:FiveStarRanking.OutRankColor>
        </db:FiveStarRanking>
Welcome page

Controls

  • DecadeVuMeter
  • Dial180
  • Dial360
  • DiamondSlider
  • FiveStarRanking
  • MatrixLedMarquee
  • Odometer
  • PerformanceMonitor
  • PlainThermometer
  • ProgressBar
  • RoundLed
  • SixteenSegmentLED
  • TickCross
  • WallThermometer

Bits and pieces

  • Bidirectional operation
  • Contacts and pages
  • Matrix font editor
Designed by Free CSS Templates, Thanks to Dubai Villas