Cell phone signal strength (5 bars)

Gauge for WPF Forum

Posted 7 years ago by Neil Larson
Version: 11.2.0553
Avatar

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 

 

<!-- Signal Strength Gauge -->
<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 7 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

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 7 years ago by Neil Larson
Avatar

Worked great thanks!

The latest build of this product (v2018.1 build 0675) 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.