J'utilise Xamarin Forms 4.0 Shell pour créer une application. Mais je ne suis pas en mesure de personnaliser la partie principale du menu Flyout pour être de couleur noire. Je sais que définir la couleur de fond de flyout pour être noir résoudra que, mais je dois conserver la partie inférieure de la mouche d'être une autre couleur. Y a-t-il une autre façon d'y parvenir? S'il vous plaît voir l'image ci-dessous pour référence.
Merci d'avance!
J'ai essayé changement uiapplication.sharedapplication.statusbarstyle de la lumière à défaut, la capture d'écran ci-dessous montre que l'horloge montre avec une couleur de police noire (flèche bleue), mais l'icône de la batterie WiFi disparaît (flèche rouge)
ajouté échantillon sur GitHub pour examen.
3 Réponses :
Avez-vous essayé de créer un contrôle d'en-tête de mouche? Avec ce contrôle, vous pouvez personnaliser la partie supérieure du flyout. Documentation Shell
laissez-moi savoir si cela a aidé.
Merci de votre aide. La partie noire avec la photo de profil avec nom et titres est en fait un contrôle d'en-tête de flyout. Merci!
La partie supérieure du menu de flyout dans votre image est la barre d'état vous semble défini le Pour changer la couleur d'arrière-plan de la barre d'état, vous pouvez définir uiapplication.sharedaplication.statusbarstyle = uistatusbarstyle.lightcontent; dans votre projet et la couleur de texte est blanc , donc vous ne verrez aucun texte sous un blanc vue en arrière-plan.
uiapplication.sharedaplication.statusbarstyle = uistatusbarstyle.default; pour rendre la barre d'état visible ou personnaliser la couleur de fond de la barre d'état.
Merci pour ton aide. J'ai modifier la question pour afficher le résultat pour changer uiapplication.sharedApplication.statusbarstyle de la lumière à défaut. Cela ne semble pas atteindre ce que je veux. Je prévois que l'étiquette blanche est mon application et le poster sur Git pour tout le monde à vérifier. Merci!
@SamuelLeung Oui, l'icône de la batterie WiFi ne s'affichera pas car la largeur de la mouche est courte que la largeur de l'écran. BTW, où est la liaison GIT.
Désolé juste besoin de temps pour essayer le label blanc autant que je peux, le lien est github.com/ltin071/xfsample20190702 < / a>
Ouais, si vous définissez l'uiapplication.sharedApplication.statusbarstyle à défaut, le WiFi et la batterie se tourne vers le style noir et ils ne seront pas visibles sous une couleur de fond noir.
J'aimerais explorer toute possibilité de personnaliser le fond de barre d'état noir avec un affichage de temps blanc lorsque le flyout est ouvert, il suffit de consister à être cohérent avec l'apparence que le flyout est fermé
Si vous trouvez une solution, vous pouvez mettre à jour ici. Je vais aussi essayer d'essayer de trouver la solution.
Merci, je le regarde toujours. Vous laissera savoir s'il y a une mise à jour.
C'est une question intéressante ne se produit que lorsque vous définissez la couleur de fond noir comme sous la barre d'état par défaut, la couleur du texte est également noire. Vous pouvez envoyer vos commentaires dans Github ou développeurCommunity .
OK, suivez le problème et vous obtiendrez un soutien là-bas.
Merci Jack, ils ont vérifié le problème et prêt pour le travail :)
C'est un peu tardif, mais je viens de parcourir ce problème moi-même. Cela semblerait être un bug en réalité. J'ai posté une partie de ce que j'ai trouvé sur votre problème GitHub, où l'équipe de Xamarin fera une solution.
Dans la période moyenne, j'ai trouvé une solution de contournement qui rend l'en-tête de volé identique entre toutes les plates-formes sans avoir à être étrange. Autres hacks. P>
Pour une référence complète - Ce que j'ai trouvé, c'est que la barre blanche au-dessus de votre en-tête de flyout est en fait une partie du contenu de flyout ci-dessous - les éléments de menu. Si vous modifiez la couleur d'arrière-plan du menu Flyout, vous verrez par vous-même. Il semblerait que le menu de flyout soit autorisé à couler dans la zone de sécurité iOS, mais l'en-tête ne peut pas. Ce que j'ai fait a été utilisé une marge négative dans la disposition du gabarit d'en-tête de mouche, puis réglez un peu de rembourrage pour compenser la zone de sécurité dans un bloc Onplatform. Étant donné que cela rétrécit efficacement la zone de contenu, j'ai également défini la hauteur par la plate-forme. Cela finit par ressembler au code ci-dessous: P>
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<StackLayout BackgroundColor="{DynamicResource Primary}">
<StackLayout.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,-1,0,0" />
</OnPlatform>
</StackLayout.Margin>
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,20,0,0" />
</OnPlatform>
</StackLayout.Padding>
<StackLayout.HeightRequest>
<OnPlatform x:TypeArguments="x:Double">
<On Platform="iOS" Value="220" />
<On Platform="Android" Value="200" />
</OnPlatform>
</StackLayout.HeightRequest>
<ContentHere>...</ContentHere>
</StackLayout>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
En tant que note latérale - la valeur de 20 pour le rembourrage est purement empirique. Je ne sais pas si la zone de sécurité est en réalité 20px, ou si cela arrive simplement à travailler correctement. Je recommanderais de tester cela avant de la mettre à jouer dans la production.