RadioButton unaligned with UI in XAML - xaml

Question

Below image you see the red circle indicators where it's only possible to click and radiobutton works, but I want to scoop them to the correct place(to the left so it's aligned with UI), which I don't know how. I tried TranslationY=-80 but it didn't work.
Styles.xaml:
<ControlTemplate x:Key="RadioButtonTemplate">
<Frame BorderColor="#F3F2F1" CornerRadius="2" BackgroundColor="#F3F2F1" HasShadow="False" HeightRequest="80" WidthRequest="80" HorizontalOptions="Start" VerticalOptions="Start" Padding="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Property="BorderColor" Value="#FF3300" />
<Setter TargetName="check" Property="Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#F3F2F1" />
<Setter Property="BorderColor" Value="#F3F2F1" />
<Setter TargetName="check" Property="Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid Margin="4" WidthRequest="80">
<Grid WidthRequest="18" HeightRequest="18" HorizontalOptions="End" VerticalOptions="Start">
<Ellipse Stroke="Blue" Fill="White" WidthRequest="16" HeightRequest="16" HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="check" Fill="Blue" WidthRequest="8" HeightRequest="8" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
<ContentPresenter />
</Grid>
</Frame>
</ControlTemplate>
<Style TargetType="RadioButton">
<Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
</Style>
MyPage.xaml:
<StackLayout Spacing="3">
<Label Text="{Binding SelectedTheme, StringFormat='Theme: {0}'}" FontSize="20" />
<Grid ColumnDefinitions="*,*,*" RadioButtonGroup.GroupName="themes" RadioButtonGroup.SelectedValue="{Binding SelectedTheme, Mode=TwoWay}">
<RadioButton Value="{x:Static am:AppTheme.Unspecified}" CheckedChanged="RadioButton_CheckedChanged">
<RadioButton.Content>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Scale="0.75" Source="{FontImage FontFamily=FAS, Glyph={x:Static fontawesome:FontAwesomeIcons.Gear}, Color=#323130}" />
<Label FontSize="Small" Text="System" TextColor="#323130" />
</StackLayout>
</RadioButton.Content>
</RadioButton>
<RadioButton Value="{x:Static am:AppTheme.Light}" Grid.Column="1" CheckedChanged="RadioButton_CheckedChanged">
<RadioButton.Content>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Scale="0.75" Source="{FontImage FontFamily=FAS, Glyph={x:Static fontawesome:FontAwesomeIcons.Sun}, Color=#323130}" />
<Label FontSize="Small" Text="Light" TextColor="#323130" />
</StackLayout>
</RadioButton.Content>
</RadioButton>
<RadioButton Value="{x:Static am:AppTheme.Dark}" Grid.Column="2" CheckedChanged="RadioButton_CheckedChanged">
<RadioButton.Content>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Scale="0.75" Source="{FontImage FontFamily=FAS, Glyph={x:Static fontawesome:FontAwesomeIcons.Moon}, Color=#323130}" />
<Label FontSize="Small" Text="Dark" TextColor="#323130" />
</StackLayout>
</RadioButton.Content>
</RadioButton>
</Grid>
</StackLayout>

Answer 1

It's hard to say it is a potential issue or by design .
To solve the problem/as a workaround , you can add a TapGestureRecognizer on ContentPresenter to enable the RadioButton manually .
Sample code
//xaml
<ContentPresenter >
<ContentPresenter.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</ContentPresenter.GestureRecognizers>
</ContentPresenter>
//code behind
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
ContentPresenter cp = sender as ContentPresenter;
var button = cp.Content.Parent as RadioButton;
button.IsChecked = true;
}