This project is read-only.

Comments

Oct 20, 2010 at 3:09 AM

Please leave me any comments you may have about the WPF Gauge.  Thanks!

Oct 20, 2010 at 3:19 AM
Edited Oct 20, 2010 at 3:57 AM

I had the following comment by Kalor:

I can't find ANYTHING on how to use this. No docs, quickstarts, sample code, nothing. I downloaded the DLL and referenced it in my SLN but couldn't even refer to it in my code- I didn't know the namespace and nothing in the list said anything like "WpfGauge".

I had to post this comment with Kalor's original because the project was un-published.  It will be re-published under the same name and url shortly.  Here is my reply to your comment Kalor, and sorry for the confusion...

 


Hi Kalor,

Thanks for downloading the WpfGauge.  The project is still in it's earliest stages which is why you do not see any documentation on it.  in order to use the WPF Gauge in your XAML, you need to add this to you Window, Page, or UserControl declaration: xmlns:my="clr-namespace:WpfGauge;assembly=WpfGauge".  then you create a control in the XAML by adding a gauge:  <my:Gauge />.  Below are some usage examples in both XAML and code.  If you have any other questions please let me know.  There will be some documentation up soon.  Hope this helps...  Thanks!

XAML (simple gauge):

 

<Window x:Class="WpfGauge.Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="win"
        Width="825" SizeToContent="WidthAndHeight"
        Title="MainWindow" xmlns:my="clr-namespace:WpfGauge;assembly=WpfGauge">
    <Grid>
        <my:Gauge Value="9.5" />
    </Grid>
</Window>

 

XAML (gauge with overridden properties):

 

<Window x:Class="WpfGauge.Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="win"
        Width="825" SizeToContent="WidthAndHeight"
        Title="MainWindow" xmlns:my="clr-namespace:WpfGauge;assembly=WpfGauge">
    <Grid>
        <my:Gauge MinorTickMarkColor="LightGray" Value="90" StartAngle="-65" EndAngle="247" InnerEllipseFill="Navy" 
                  MajorTickCount="20" MinorTickCount="1" ValueFormat="{}{0} psi"
                  MajorTickMarkColor="LightYellow">
            <my:Gauge.GoalMarkers>
                <my:GoalMarker MarkerColor="Red" Value="90" />
                <my:GoalMarker MarkerColor="Red" Value="92" />
                <my:GoalMarker MarkerColor="Red" Value="94" />
                <my:GoalMarker MarkerColor="Red" Value="96" />
                <my:GoalMarker MarkerColor="Red" Value="98" />
                <my:GoalMarker MarkerColor="Red" Value="100" />
            </my:Gauge.GoalMarkers>
            <my:Gauge.TickLabelStyle>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="White" />
                </Style>
            </my:Gauge.TickLabelStyle>
            <my:Gauge.ValueTextStyle>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="Gainsboro" />
                    <Setter Property="FontSize" Value="23" />
                    <Setter Property="FontWeight" Value="Bold" />
                    <Setter Property="FontFamily" Value="Tahoma" />
                </Style>
            </my:Gauge.ValueTextStyle>
        </my:Gauge>
    </Grid>
</Window>

 

Code (simple gauge):

using System.Windows;
using WpfGauge;

namespace WpfGauge.Test
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
        }

        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            Gauge gauge = new Gauge();
            gauge.Value = 78;
            this.Content = gauge;
        }
    }
}

 

 

Oct 20, 2010 at 5:31 AM

If I reference the dll, add 

xmlns:my="clr-namespace:WpfGauge;assembly=WpfGauge"

to my xaml and then try to add a gauge (ie type "<my:"), there's nothing in the namespace. If I type in "<my:Gauge Value="9.5" />" it doesn't recognise "Gauge" :(

Oct 20, 2010 at 12:55 PM
Edited Oct 20, 2010 at 1:08 PM

Kalor,

In the Downloads section there is an added file WpfGauge_src.  If you unzip and open the solution, there is a test project.  Can you try to build it?  

Also, make sure that you are targeting .NET Framework 4.0 (Full) in your project.

Thanks,

Terry

Oct 21, 2010 at 11:59 PM

Thanks Terry. The source was a different version and I'm now using it. Looks professional, seems to be working well.

Questions so far:

 

1) How do I move the value text (specified by valueformat) down so it's not covering the center of the gauge? I tried using ValueTextMargin but it doesn't seem to do anything.

2) Is the gauge supposed to scale? I set horizontalalignment and verticalalignment to stretch but it scales bigger than the grid row it's in, and doesn't resize when you adjust the width/height of a grid cell with a gridsplitter.

Oct 22, 2010 at 12:18 AM

Found a bug in the GoalMarkers.  With the following XAML, the goalmarker is way outside the gauge:

 

            <gg:Gauge MinorTickMarkColor="LightGray" Value="5" StartAngle="-65" EndAngle="247"  Margin="10,0,0,10"
                  InnerEllipseFill="{DynamicResource  {ComponentResourceKey TypeInTargetAssembly=ribbon:Ribbon,  ResourceId={x:Static ribbon:RibbonColors.ButtonNormalForeground}}}"  
                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                  MajorTickCount="10" MinorTickCount="4" ValueFormat="{}{0}"  x:Name="ggJobsCompleted"
                  MajorTickMarkColor="LightYellow" Width="200" Height="200" >

                <gg:Gauge.TickLabelStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="Foreground" Value="White" />
                    </Style>
                </gg:Gauge.TickLabelStyle>
                <gg:Gauge.GoalMarkers>
                    <gg:GoalMarker MarkerColor="Green" Value="11" />
                </gg:Gauge.GoalMarkers>
                <gg:Gauge.ValueTextStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="Foreground" Value="DarkGreen" />
                        <Setter Property="FontSize" Value="23" />
                        <Setter Property="FontWeight" Value="Bold" />
                        <Setter Property="FontFamily" Value="Tahoma" />
                    </Style>
                </gg:Gauge.ValueTextStyle>
            </gg:Gauge>

Oct 22, 2010 at 2:29 AM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Oct 22, 2010 at 2:52 AM

Hi Kalor,

Glad you like the Gauge so far.

The ValueTextMargin was improperly marked as public.  I changed it to internal.  It is used by the Gauge when the default style is applied.  To move the ValueText around modify the Margin property in the ValueTextStyle.  Here is you code with the Margin prop. set:

 

            <gg:Gauge MinorTickMarkColor="LightGray" Value="5" StartAngle="-65" EndAngle="247"  Margin="10,0,0,10"
                  MajorTickCount="10" MinorTickCount="4" ValueFormat="{}{0}"  x:Name="ggJobsCompleted"
                  MajorTickMarkColor="LightYellow" Width="200" Height="200" >
                <gg:Gauge.TickLabelStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="Foreground" Value="White" />
                    </Style>
                </gg:Gauge.TickLabelStyle>
                <gg:Gauge.GoalMarkers>
                    <gg:GoalMarker MarkerColor="Green" Value="11" />
                </gg:Gauge.GoalMarkers>
                <gg:Gauge.ValueTextStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="Foreground" Value="DarkGreen" />
                        <Setter Property="FontSize" Value="23" />
                        <Setter Property="FontWeight" Value="Bold" />
                        <Setter Property="FontFamily" Value="Tahoma" />
                        <Setter Property="Margin" Value="0,100,0,0" />
                    </Style>
                </gg:Gauge.ValueTextStyle>
            </gg:Gauge>

The gauge does not auto-scale by design.  You can simply wrap the Gauge in a ViewBox to make it scale with a grid or other container.  Here is some sample code:

        <Viewbox>
            <gg:Gauge MinorTickMarkColor="LightGray" Value="5" StartAngle="-65" EndAngle="247"  Margin="10,0,0,10"
                  MajorTickCount="10" MinorTickCount="4" ValueFormat="{}{0}"  x:Name="ggJobsCompleted"
                  MajorTickMarkColor="LightYellow" Width="200" Height="200" >
                <gg:Gauge.TickLabelStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="Foreground" Value="White" />
                    </Style>
                </gg:Gauge.TickLabelStyle>
                <gg:Gauge.GoalMarkers>
                    <gg:GoalMarker MarkerColor="Green" Value="11" />
                </gg:Gauge.GoalMarkers>
                <gg:Gauge.ValueTextStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="Foreground" Value="DarkGreen" />
                        <Setter Property="FontSize" Value="23" />
                        <Setter Property="FontWeight" Value="Bold" />
                        <Setter Property="FontFamily" Value="Tahoma" />
                        <Setter Property="Margin" Value="0,100,0,0" />
                    </Style>
                </gg:Gauge.ValueTextStyle>
            </gg:Gauge>
        </Viewbox>

Oct 22, 2010 at 3:15 AM
kalor wrote:

Found a bug in the GoalMarkers.  With the following XAML, the goalmarker is way outside the gauge:

            <gg:Gauge MinorTickMarkColor="LightGray" Value="5" StartAngle="-65" EndAngle="247"  Margin="10,0,0,10"
                  InnerEllipseFill="{DynamicResource  {ComponentResourceKey TypeInTargetAssembly=ribbon:Ribbon,  ResourceId={x:Static ribbon:RibbonColors.ButtonNormalForeground}}}"  
                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                  MajorTickCount="10" MinorTickCount="4" ValueFormat="{}{0}"  x:Name="ggJobsCompleted"
                  MajorTickMarkColor="LightYellow" Width="200" Height="200" >

                <gg:Gauge.TickLabelStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="Foreground" Value="White" />
                    </Style>
                </gg:Gauge.TickLabelStyle>
                <gg:Gauge.GoalMarkers>
                    <gg:GoalMarker MarkerColor="Green" Value="11" />
                </gg:Gauge.GoalMarkers>
                <gg:Gauge.ValueTextStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="Foreground" Value="DarkGreen" />
                        <Setter Property="FontSize" Value="23" />
                        <Setter Property="FontWeight" Value="Bold" />
                        <Setter Property="FontFamily" Value="Tahoma" />
                    </Style>
                </gg:Gauge.ValueTextStyle>
            </gg:Gauge>

 

This issue has been fixed (change set 249).

Thanks,

Terry