Problème de rendu du control Frame de Xamarin.Forms avec UWP
Avec Xamarin.Forms, reproduire les cards sous Androïd, n’est pas très compliqué.
Voici un exemple de Style Xamarin.Forms qui fait très bien l’affaire :
<Style TargetType="Frame">
<Setter Property="HasShadow" Value="True"/>
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="Margin">
<Setter.Value>
<OnPlatform
x:TypeArguments="Thickness"
iOS="10,8"
Android="10,8"
WinPhone="0,8"
/>
</Setter.Value>
</Setter>
<Setter Property="OutlineColor" Value="{StaticResource BorderColor}"/>
<Setter Property="BackgroundColor" Value="{StaticResource BackgroundColor}"/>
</Style>
Sur Androïd, le rendu est très propre :
Sur UWP, par contre on a un souci. Il manque un l’angle en bas à droite.
Si on utilise l’explorateur de layout de Visual Studio, on se rend compte qu’il y a un problème de taille, et de marge. Mais ce problème ne peut être résolu en modifiant le Style (même en touchant aux Padding, Maring Size…). On peut faire un Style à défaut dans la partie UWP, mais il touchera tout les controls Border, ce qui peut avoir un effet négatif sur d’autres controls.
La solution est pourtant toute simple. Au lieu d’utiliser un control Frame tout seul, il faut la mettre dans une Grid. L’ensemble de controls UWP qui en résultera aura le comportement attendu.
Voici un exemple de Template qui englobe le Control Frame dans une Grid pour résoudre le problème.
<DataTemplate x:Key="ItemTemplate">
<ViewCell>
<Grid>
<Frame>
</Frame>
</Grid>
</ViewCell>
</DataTemplate>
Ce qui permettra d’avoir un Border propre sur UWP
