Gardez d'abord à l'esprit qu'avec la pixellisation, il n'y a techniquement pas de véritable indépendance de résolution. Avec un grossissement suffisamment élevé, les texels individuels commenceront à devenir visibles. La seule solution à cela est d'écrire un système de graphiques vectoriels.
Cela étant dit, il existe quelques étapes pour créer un système robuste indépendant de la résolution basée sur un raster: dimensionnement, systèmes de coordonnées et mise en page.
Pour le dimensionnement et le positionnement, nous devons utiliser un ensemble d'unités qui maintiennent un rapport à la résolution réelle de l'application. Dans ce cas, utilisons les pouces car je suis américain et vous pouvez mettre à l'échelle les éléments avec DPI (points par pouce). Par exemple, supposons que votre application s'exécute à 800x600. Le DPI Windows par défaut est 96, ce qui signifie que l'application a une résolution de (800/96) x (600/96) pouces ou 8,33 x 6,25 pouces.
Étant donné que vous devez être en mesure de travailler avec au moins les rapports d'aspect 4: 3 et 16: 9, la façon dont vous gérez votre système de coordonnées d'écran devient un peu délicate. Ce que je recommande de faire, c'est de mettre (0,0) au centre de la zone d'affichage (ainsi que les fenêtres et les contrôles). Cela fonctionne bien parce que si vous mettez (0,0) dans un coin, alors que ce coin se déplace en fonction de la résolution et du rapport d'aspect, il va traduire tous vos sprites alors que le centre de l'écran sera toujours le centre de l'écran non importe l'appareil. Poursuivre notre exemple avec 800x600 cela entraînerait un système de coordonnées qui est (de gauche à droite) -4,165 pouces à 4,165 pouces et (de haut en bas) 3,125 pouces à -3,125 pouces.
Donc, pour le moment, vous avez un système d'interface utilisateur indépendant DPI avec des éléments qui seront toujours au même endroit par rapport au centre de l'écran - pas tout à fait indépendant de la résolution. Heureusement, ce que l'indépendance DPI vous permet de faire est de mettre à l'échelle l'interface utilisateur en mettant à l'échelle DPI en fonction d'une certaine heuristique. Par exemple, nous pouvons mettre à l'échelle DPI en utilisant la résolution verticale comme notre heuristique. Si 800x600 est 96 DPI, nous utiliserons 123 DPI pour 1024x768 ou 115 DPI pour 1280x720.
Enfin, vous devrez créer un système de mise en page qui gère à la fois le positionnement absolu et le positionnement relatif. WPF et le Web en sont d'excellents exemples. Vous pouvez spécifier que les contrôles / cases remplissent certains% de l'élément parent tout en l'ancrant à un bord avec de nombreuses autres options de disposition automatique utiles. Tout cela ensemble se traduira par un système d'interface utilisateur capable d'apparaître presque identique dans de nombreuses résolutions et proportions différentes.
Pour résumer, je vous recommande vivement d'étudier WPF car il fait presque tout cela, sauf qu'il maintient une origine dans le système de coordonnées du coin supérieur gauche et n'échelonne pas automatiquement le DPI en fonction de la résolution verticale.