アプリやWebサイトで見かける細い線形のインジケーターは、線形ゲージ（LinearGauge）を利用して実現できます。
LinearGaugeは、直線型のゲージを上下左右の方向に向けて値を表示できます。線の幅を細くして標準では値やパーセンテージを表示するポインタ領域の文字を塗りつぶすことで、温度計表示のような細いインジケーターを表示できます。

サンプルコード
C#（Xamarin.Forms）

public C1_Gauge_Linear()
{
　　var linearGauge = new C1.Xamarin.Forms.Gauge.C1LinearGauge();

　　// 線型ゲージを設定
　　// 右方向に進むゲージ
　　linearGauge.Direction = C1.Xamarin.Forms.Gauge.LinearGaugeDirection.Right;
　　linearGauge.Min = 0;
　　linearGauge.Max = 1;
　　// ゲージの幅を比率で指定
　　linearGauge.Thickness = 0.08; //元の幅の8%

　　linearGauge.Value = 0.6;
　　// ゲージに関連するテキスト(最大値、最小値、現在値)の表示有無
　　linearGauge.ShowText = C1.Xamarin.Forms.Gauge.GaugeShowText.Value;　// 現在値表示

　　// ポインタ色とテキスト色を同じに設定
　　// 同色で値は見えなくなり丸いポインタのみが表示される
　　linearGauge.PointerColor = Color.FromHex("#b50f52");
　　linearGauge.ValueTextColor = linearGauge.PointerColor;

　　// アニメーション設定を変更
　　linearGauge.IsAnimated = true;
　　　　　　
　　//StackLayoutのレイアウトを作成してContentに設定
　　Content = new StackLayout
　　{
　　　　VerticalOptions = LayoutOptions.Center,
　　　　HorizontalOptions = LayoutOptions.FillAndExpand,
　　　　Orientation = StackOrientation.Vertical,
　　　　Children = { new Label() {Text = "右向き横方向に表示",HorizontalTextAlignment = TextAlignment.Center}, linearGauge}
　　};
}

下図は上記コードの動作例です。表示時にアニメーション効果を設定することもできます。



Studio for Xamarin　＞ 製品ヘルプ　＞ LinearGauge クイックスタート