Cell phone signal strength (5 bars) - Gauge for WPF Forum

Posted 12 years ago by Neil Larson

Version: 11.2.0553

Anyone been able to create a 5 bar signal strength gauge like on a cell phone using the linear gauge? I would greatly appreciate any help. Below is what I came up with, but its not quite right.

Thanks,

Neil

<gauge:LinearGauge Grid.Row="1" Grid.Column="1" FrameType="RectangleGradient" Width="30" Height="20" RimBrush="#444444" Orientation="Horizontal" BackgroundType="None" BackgroundSizeRatio="1" IsBackgroundEffectEnabled="True" Background="{x:Null}" DataContext="{Binding Path=sss}">
<gauge:LinearScale gauge:LinearGauge.X="-4" BarExtent="98%" BarAscent="10" BorderWidth="1"
Background="{shared:LinearGradientBrush #888888, #666666, GradientType=TopLeftToBottomRight}"
BorderBrush="{shared:LinearGradientBrush #666666, #888888, GradientType=TopLeftToBottomRight}"
VerticalAlignment="Stretch" IsHitTestVisible="False" IsBarVisible="True">
<gauge:LinearTickSet Minimum="0" Maximum="5" MajorInterval="1" MinorInterval="0" VerticalAlignment="Bottom" DataContext="{Binding Source={StaticResource Locator}, Path=Main.TheModem}">
<gauge:LinearTickSet.Ticks>
<gauge:LinearTickMarkCustom TickMarkAscent="10px" TickMarkExtent="4px" Value="1" BorderWidth="1" />
<gauge:LinearTickMarkCustom TickMarkAscent="15px" TickMarkExtent="4px" Value="2" BorderWidth="1" />
<gauge:LinearTickMarkCustom TickMarkAscent="20px" TickMarkExtent="4px" Value="3" BorderWidth="1" />
<gauge:LinearTickMarkCustom TickMarkAscent="25px" TickMarkExtent="4px" Value="4" BorderWidth="1" />
<gauge:LinearTickMarkCustom TickMarkAscent="30px" TickMarkExtent="4px" Value="5" BorderWidth="1" />
</gauge:LinearTickSet.Ticks>
<gauge:LinearTickSet.Pointers>
<gauge:LinearPointerMarker MarkerType="Rectangle" Value="{Binding}" PointerAscent="10" PointerExtent="4"
Background="White"
DampeningMaximumDuration="0" HasDropShadow="False" />
<gauge:LinearPointerMarker MarkerType="Rectangle" Value="2" PointerAscent="15" PointerExtent="4"
Background="White"
DampeningMaximumDuration="0" HasDropShadow="False" />
<gauge:LinearPointerMarker MarkerType="Rectangle" Value="3" PointerAscent="20" PointerExtent="4"
Background="White"
DampeningMaximumDuration="0" HasDropShadow="False" />
<gauge:LinearPointerMarker MarkerType="Rectangle" Value="4" PointerAscent="25" PointerExtent="4"
Background="White"
DampeningMaximumDuration="0" HasDropShadow="False" />
<gauge:LinearPointerMarker MarkerType="Rectangle" Value="5" PointerAscent="30" PointerExtent="4"
Background="White"
DampeningMaximumDuration="0" HasDropShadow="False" />
</gauge:LinearTickSet.Pointers>
</gauge:LinearTickSet>
</gauge:LinearScale>
</gauge:LinearGauge>

Comments (2)

Answer - Posted 12 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Neil,

That's not something that is easily accomplished using the LinearGauge. It could be done using clipping geometeries, but may be a bit of overkill. You can create a simple cell phone signal control using something like:

<Border Width="34" Height="22" Margin="30" BorderBrush="Gray" BorderThickness="1" UseLayoutRounding="True">
	<Grid Margin="2,2,2,0" DataContext="4">
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>

		<Border Grid.Column="0" Grid.Row="4" Grid.RowSpan="1" Margin="1,0" BorderBrush="Gray" BorderThickness="1,1,1,0"
				Background="{Binding Converter={StaticResource MyConverter}, ConverterParameter=1}" />
		<Border Grid.Column="1" Grid.Row="3" Grid.RowSpan="2" Margin="1,0" BorderBrush="Gray" BorderThickness="1,1,1,0"
				Background="{Binding Converter={StaticResource MyConverter}, ConverterParameter=2}" />
		<Border Grid.Column="2" Grid.Row="2" Grid.RowSpan="3" Margin="1,0" BorderBrush="Gray" BorderThickness="1,1,1,0"
				Background="{Binding Converter={StaticResource MyConverter}, ConverterParameter=3}" />
		<Border Grid.Column="3" Grid.Row="1" Grid.RowSpan="4" Margin="1,0" BorderBrush="Gray" BorderThickness="1,1,1,0"
				Background="{Binding Converter={StaticResource MyConverter}, ConverterParameter=4}" />
		<Border Grid.Column="4" Grid.Row="0" Grid.RowSpan="5" Margin="1,0" BorderBrush="Gray" BorderThickness="1,1,1,0"
				Background="{Binding Converter={StaticResource MyConverter}, ConverterParameter=5}" />
	</Grid>
</Border>

And a custom IValueConverter, like so:

public class MyConverter : IValueConverter {

	public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
		double v = System.Convert.ToDouble(value);
		double p = System.Convert.ToDouble(parameter);

		if (p <= v)
			return Brushes.Green;
		return Brushes.LightGray;
	}

	public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
		throw new NotImplementedException();
	}
}

You can then bind the Grid to your object (i.e. replace the DataContext property with a binding to your value).

Actipro Software Support

Posted 12 years ago by Neil Larson

Worked great thanks!

The latest build of this product (v24.1.2) was released 10 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.