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.1) was released 2 months ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.