Samples and Demo Applications - COM - VB

Print Page | Close Window

COM - VB - XAML Progressbar Demo

Printed From: Codejock Forums
Category: General
Forum Name: Samples and Demo Applications
Forum Description: Post your samples and demo applications here.
URL: http://forum.codejock.com/forum_posts.asp?TID=11171
Printed Date: 20 April 2024 at 11:30am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: COM - VB - XAML Progressbar Demo

Posted By: jpbro
Subject: COM - VB - XAML Progressbar Demo
Date Posted: 10 June 2008 at 3:18pm

I tried some markup, in hopes that you could use the Border tag to create a basic progress bar without needing to know the rectangle of the cell...unfortunately, it seems that the current implementation makes no distinction between PX and % after a value (probably the same as the PX/PT issue mentioned in another thread). So:


<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
  <Border BorderBrush='Blue' BorderThickness='1px' Height='18px' Width='200px'>
    <Border HorizontalAlignment='Left' BorderBrush='Blue' Background='Blue' Width='100%'>
    </Border>
  </Border>
</Page>

Output:

Even though you would expect Width='100%' to fill the entire box. It turns out the 100% is interpreted as 100px, so this won't work. You could however manually calculate the required pixels for a particular percentage and use the code above for a simple progress bar. (NOTE: ditch the Width & Height attributes in the first border to fill the available area)..

-------------
Product: Xtreme SuitePro (ActiveX) version 16.2.6
Platform: Windows XP - SP3

Language: Visual Basic 6.0 SP6

Replies:

Posted By: jpbro
Date Posted: 11 June 2008 at 10:08am

Here's a variation on the last markup example where the % text appears in the center of the entire bar rather than the progress portion. (Note: This is just the XAML portion as I entered into the MarkupPad, it has not been reformatted for your sample):


<StackPanel Height='30px' HorizontalAlignment='Center'>
    <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="100px"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column='0' Width='100px' Background='Blue' BorderThickness='1px' BorderBrush='#5E7293'>
            <Border.Background>
                <LinearGradientBrush StartPoint="0, 0" EndPoint="0,1">
                    <GradientStop Color="#C0CBDF" Offset="0"/>
                    <GradientStop Color="#DCE9FA" Offset="1"/>
                </LinearGradientBrush>        
            </Border.Background>
        </Border>
        <Border Grid.Column='0' Width='50px' HorizontalAlignment='Left' BorderThickness='1px' BorderBrush='#5E7293'>
            <Border.Background>    
                <LinearGradientBrush StartPoint="0, 0" EndPoint="1,0">
                    <GradientStop Color="#658C4B" Offset="0"/>
                    <GradientStop Color="#A4DB64" Offset="1"/>
                </LinearGradientBrush>        
            </Border.Background>
        </Border>
        <Border Grid.Column='0'>
            <TextBlock HorizontalAlignment='Center' Foreground='White'><Bold>50%</Bold></TextBlock>
        </Border>
    </Grid>
</StackPanel>

I used a StackPanel to control the height, but I think you could remove it for the ReportControl to fill the available space. The Grid element allows the progress bar to be layered (background, progress, text) by assigning each Border element to the same grid cell. I'm not sure if this is the best way to accomplish the goal, but it works.

Here's the output:

-------------
Product: Xtreme SuitePro (ActiveX) version 16.2.6
Platform: Windows XP - SP3

Language: Visual Basic 6.0 SP6

Posted By: jpbro
Date Posted: 11 June 2008 at 10:33am

Just for fun I put together a little demo that allows you to click anywhere on a markup enabled label and it will draw the progress bar at that position (drag left & right to decrease/increase percent). I haven't used the ReportControl yet, so I don't know how it responds to MouseDown/Move events for cells, but if it does this similar to a Label control, then this code should be usable with the ReportControl with minor modifications.

uploads/20080611_103209_ClickProgress.zip - uploads/20080611_103209_ClickProgress.zip

Output:

-------------
Product: Xtreme SuitePro (ActiveX) version 16.2.6
Platform: Windows XP - SP3

Language: Visual Basic 6.0 SP6

Posted By: Aaron
Date Posted: 11 June 2008 at 10:53am

Hi Jason

Thanks for updating MarkUpProgress string, this is going into the right direction

https://forum.codejock.com/uploads/20080611_142810_TestProgressRC.zip - uploads/20080611_142810_TestProgressRC.zip (V1.02)

Output:

-------------
Product: Xtreme SuitePro (ActiveX) version 15.0.2
Platform: Windows XP (32bit) - SP 2
Language: Visual Basic 6.0

Zero replies is not an option....

Posted By: jpbro
Date Posted: 11 June 2008 at 11:47am

Hi,

I've made some modifications to get the progress bar working with MouseDown/Move detecting for setting the percentage using the mouse.

uploads/20080611_114147_prg2.zip - uploads/20080611_114147_prg2.zip

Output:

-------------
Product: Xtreme SuitePro (ActiveX) version 16.2.6
Platform: Windows XP - SP3

Language: Visual Basic 6.0 SP6

Posted By: jpbro
Date Posted: 11 June 2008 at 1:00pm

And for a bit more fun, here's a progress bar that expands from the center (including mouse support) instead of from the left edge. This is just on a label (not a ReportControl).

uploads/20080611_125940_ClickProgressCe.zip - uploads/20080611_125940_ClickProgressCe.zip

Output:

-------------
Product: Xtreme SuitePro (ActiveX) version 16.2.6
Platform: Windows XP - SP3

Language: Visual Basic 6.0 SP6

Posted By: jpbro
Date Posted: 11 June 2008 at 1:10pm

Modified to use a triple gradient (to appear as though the gradient expands from the center point).

uploads/20080611_130840_ClickProgressCe.zip - uploads/20080611_130840_ClickProgressCe.zip

Output:

-------------
Product: Xtreme SuitePro (ActiveX) version 16.2.6
Platform: Windows XP - SP3

Language: Visual Basic 6.0 SP6