CODEWITHSUNDEEP
.netwpfgeometry
Scott Nimrod
Scott Nimrod

Reputation: 11570

How can I create a gauge (i.e. speedometer)?

How can I create a gauge (i.e. speedometer)?

Specifically, I am trying to build the image on this link.

enter image description here

I am successful at creating a ring. However, now I need to add the ticks to the ring.

XAML:

<Window x:Class="MotoLens.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MotoLens"
        mc:Ignorable="d"
        Background="Black"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:ValueToBrushConverter x:Key="ValueToBrushConverter" />
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Ellipse Grid.Row="0" Width="300" Fill="Transparent"  StrokeThickness="10" Stroke="{Binding ElementName=Slider, Path=Background}"  StrokeDashArray="1" StrokeEndLineCap="Square" />
    </Grid>
</Window>

Upvotes: 1

Views: 7973

Answers (1)

B.K.
B.K.

Reputation: 10162

In the past, when I had to create custom pie charts and other various things requiring elliptical shapes and arcs, I've used the Microsoft.Expression.Drawing library. Just add that reference to your project and you'll get access to Arc, which will do wonders here. The exact same thing can be achieved with Path, ArcSegment and various other components, but I just find it easy to work with Arc. Speaking of adding references... that is one of the reasons things like this are handled in Blend, if you're not already doing that, as it automatically brings in those references. I made no assumptions here, so that's why I gave the instructions of adding the reference.

So, with that said, here's an example a 10-minute project that shows what you can do:

enter image description here

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid Background="#FF2E2F45">
        <Grid Margin="0,0,0,-120">
            <ed:Arc StartAngle="-120" EndAngle="120" Stretch="None" 
                    Height="300" Width="300" StrokeThickness="20"      
                    StrokeDashArray=".25" Stroke="#FF484D5F"/>
            <ed:Arc StartAngle="-120" EndAngle="-35" Stretch="None" 
                    Height="300" Width="300" StrokeThickness="20"
                    StrokeDashArray=".25" Stroke="Turquoise"/>
        </Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
                    Margin="0,0,0,-50">
            <TextBlock Text="km/h" Foreground="#FF878A9F" HorizontalAlignment="Center"
                        FontSize="14"/>
            <TextBlock Text="43" Foreground="White" HorizontalAlignment="Center"
                        FontSize="110" FontWeight="Light" Margin="0,-25,0,0"/>
        </StackPanel>
    </Grid>
</Window>

It goes without saying that there is a lot of static code going on in there, as far as placement of things, but that was done for the demonstration. Most of it is not even necessary, based on what the image of that app in the link you've provided shows, but I'm obsessive about detail and wanted the layout to somewhat match your screenshot in the question. I assume you would create a control out of this, so you'd clean it all up and create appropriate bindings.

As far as the circular gradient topic is concerned, I did not bother working on that here, as that's a completely different subject from what you were asking about and more can be found at a different StackOverflow question right over here: Creating Gradient Brush along a Circular Path

Upvotes: 8

Related Questions