Dave's Silverlight Dashboards and gauges

ProgressBar

The progress bar show the percentage complete status os an item as a horizontal bar

Unadorned the PorgressBar has the following appearance

 
        <db:ProgressBar Value="50" />

There are three properties that change the visuals

  • OutlineColor
  • InProgressColor
  • OutOfProgressColor

Progress that is complete is displayed in the InProgressColor, parts of the gauge representing territory yet to be covered is shown in the OutOfProgressColor. The Outline color is the border around the boxes that make up the gauge

In the above gauge the InProgressColor is cyan, the OutOfProgressColor is light gray and the OutlineColor is Black.

The actual values are not colors but ColorPoints which allow us to specify gradients for the color. For a description of color points look at the Dial360 control

Here are two example gauges showing the full range of possibilities, the second is deliberately garish to highlight what color effects what visuals

        <db:ProgressBar OutlineColor="Gray" 
            <db:ProgressBar.InProgressColor >
                <db:ColorPoint HiColor="#440044" LowColor="#FF00FF"  />
            </db:ProgressBar.InProgressColor>
            <db:ProgressBar.OutOfProgressColor >
                <db:ColorPoint HiColor="#000000" LowColor="#330033"  />
            </db:ProgressBar.OutOfProgressColor>
        </db:ProgressBar>


        <db:ProgressBar OutlineColor="Red" 
            <db:ProgressBar.InProgressColor >
                <db:ColorPoint HiColor="Yellow" LowColor="Pink"  />
            </db:ProgressBar.InProgressColor>
            <db:ProgressBar.OutOfProgressColor >
                <db:ColorPoint HiColor="Blue" LowColor="Green"  />
            </db:ProgressBar.OutOfProgressColor>
        </db:ProgressBar>
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