Apologies for not being more clear.
Create a listview.
for the view cell do something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ContentView Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Padding="1.5" Margin="2" BackgroundColor="Blue">
<ContentView BackgroundColor="White" Padding = "5" > <!--this content view is required because sfcirculargauge doesn't support padding-->
<gauge:SfCircularGauge HeightRequest="100" WidthRequest="100" BackgroundColor="White">
<gauge:SfCircularGauge.Headers>
<gauge:Header TextSize="8" Text="{i18n:Translate ToolBoxPageGoalGaugeHeaderText}" Position=".5,.8" ForegroundColor="Blue"/>
</gauge:SfCircularGauge.Headers>
<gauge:SfCircularGauge.Scales>
<gauge:Scale StartAngle="135" SweepAngle="270" StartValue="0" MinorTicksPerInterval="1" EndValue="100" Interval="25" RimThickness="1" LabelFontSize="6" LabelPostfix="%" LabelOffset=".28" RimColor="Blue" LabelColor="Blue">
<gauge:Scale.Pointers>
<gauge:NeedlePointer Type="Bar" Color="Blue" KnobRadius="2" KnobColor="Blue" LengthFactor=".65" Thickness="2" Value="{Binding Progress}"></gauge:NeedlePointer>
</gauge:Scale.Pointers>
<gauge:Scale.MinorTickSettings>
<gauge:TickSettings Color="Blue" Length="3" Thickness="1.5" Offset="0" />
</gauge:Scale.MinorTickSettings>
<gauge:Scale.MajorTickSettings>
<gauge:TickSettings Color="Blue" Length="5" Thickness="2" Offset="0" />
</gauge:Scale.MajorTickSettings>
</gauge:Scale>
</gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
</ContentView>
</ContentView>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding name}" Margin="2,5,2,5"/>
<Label Grid.Row="0" Grid.Column="2" Text="{Binding Deadline, Converter={StaticResource DateTimeConverter}, ConverterParameter=d}" Margin="2,5,2,5"/>
<StackLayout Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Margin="0,5,0,5">
<Label Text="Test Text" Margin="2,0,2,0"/>
<Label Text="MoreTest"/>
<Label Text="Yup it's a Test"/>
<Label Text="Did you know we are testing?"/>
</StackLayout>
For that example I've removed a bunch of the bindings and styles we use so it's not the prettiest but it will show the results. Which is something like this:
Notice the vertical line at the right edge of the gauge? If I replace the gauge with a white boxview it goes away. To me it seems that the layout code is off by a few pixels or something. If I don't have that second Content view which is used to add some space between the border created by the outer content view that line is hidden in the border...but it looks bad since the gauge is right against the border. On Android that vertical line doesn't show up using the same code.
