UWP-App auf der Xbox One

Question

Hallo zusammen,

ich habe eine kleine App für UWP geschrieben. Auf jedem Windows 10 Gerät ist das ganz optisch richtig gut. Auf der Xbox One hingegen ist die Skalierung extrem übertrieben. Ich bin es von anderen Apps wie Groove gewohnt, das sämtliche UI-Elemente Verhältnismäßig sind. Muss/Kann ich in der App selbst das irgendwie einstellen, dass auf der Xbox One die UI-Elemente etwas kleiner dargestellt werden?

Viele Grüße

Lars

---

Viele Grüße
Lars Krämer - Software Entwickler für Web und Microsoft-Technologien

---

lkraemer.de software solutions

Answer 1

Hallo,

ich kennen keine weg die vordefinierte Skalierung von Microsoft zu ändern. Sie ist auch eigentlich uninteressant da man seine App für alle Gerätefamilien anpassen sollte. Es ist wie mit dem "Responsive Webdesign" welche Inhalte, in was für einer Größe, werden auf welchem Gerät angezeigt usw. 

Einführung in die Universelle Windows-Plattform

Einführung in das App-UI-Design

VisualState sind eine gut Möglichkeit. Ich muss aber ehrlich zugeben das ich es meist per Code mache.

 

---

Gruß, Thomas

Sage nie, ich kann es nicht - sage nur, ich kann es noch nicht!

Icon für UWP

Answer 2

Hi,

Ich weiß nicht ob sich das dadurch regeln lässt. Das Problem besteht unter anderem daraus, dass auf der Xbox One um die App herum ein dicker schwarzer Rand zu sehen ist und wie bereits gesagt die Controls extrem groß sind. Ich werde heute Abend mal einen Screenshot machen und den hier rein laden ;).

Viele Grüße

Lars

---

Viele Grüße
Lars Krämer - Software Entwickler für Web und Microsoft-Technologien

---

lkraemer.de software solutions

Answer 3

Hi,

hier siehst du als Beispiel die Groove-App auf der One.

Und hier meine App:

Sehr gut zusehen. Der schwarze Rand um die App, die fehlende Unterstützung des Controllers (Auf dem PC mit Windows 10 wird der Controller erkannt und ich kann damit navigieren) und die größere Skalierung.

---

Viele Grüße
Lars Krämer - Software Entwickler für Web und Microsoft-Technologien

---

lkraemer.de software solutions

Answer 4

Den Rand finde ich OK. wenn ich bedenke wie viele Fernsehr falsch skaliert sind und damit die ränder beschnitten sind.

Schau auch mal hier TV-safe area

und hier Link

Welches Controll meinst Du den?

Die größe der Elemente kannst Du nach Auflösung ändern z.B. so

<VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="WindowState">
                <VisualState x:Name="NarrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="wrapperKalender.Padding" Value="2" />
                        <Setter Target="wrapperNeuePeriode.Padding" Value="2" />
                        <Setter Target="wrapperNeuePeriode.(RelativePanel.RightOf)" Value="" />
                        <Setter Target="wrapperNeuePeriode.(RelativePanel.Below)" Value="wrapperKalender" />
                        <Setter Target="wrapperNeuePeriode.Margin" Value="0,30,0,0" />
                        <Setter Target="wrapperEmpfinden.(RelativePanel.Below)" Value="wrapperNeuePeriode" />
                        <Setter Target="tbPeriodicCalendar.FontSize" Value="15" />
                        <Setter Target="tbPeriode.FontSize" Value="15" />
                        <Setter Target="tbNextPeriod.FontSize" Value="12" />
                        <Setter Target="tbOvulation.FontSize" Value="12" />
                        <Setter Target="tbGirl.FontSize" Value="12" />
                        <Setter Target="tbFeel.FontSize" Value="15" /> 
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

---

Gruß, Thomas

Sage nie, ich kann es nicht - sage nur, ich kann es noch nicht!

Icon für UWP

Answer 5

Danke für die Antwort.

Das mit dem Rand konnte ich mir schon denken, ist trotzdem ein wenig ärgerlich, dass das so massiv ist. Ich verwende die Xbox One über einen PC-Monitor. Das fällt mir das extrem auf. Meine Frau verwendet die One über einen Fernseher mit einem solchen Sicherheitsrand aber selbst da ist der schwarze Rand der App noch extrem zu sehen.

Und: Andere UWP-Apps auf der One haben diesen Balken nicht.
Da würde ich folglich am liebsten einen Mittelweg finden (Nicht zu viel und nicht zu wenig).

Hast du eine Ahnung wegen der anderen Punkte (Skalierung und fehlende Controller-Unterstützung).

---

Viele Grüße
Lars Krämer - Software Entwickler für Web und Microsoft-Technologien

---

lkraemer.de software solutions

Answer 6

Welcher Controller wird den nicht unterstützt?

---

Gruß, Thomas

Sage nie, ich kann es nicht - sage nur, ich kann es noch nicht!

Icon für UWP

Answer 7

Ich meine den Xbox One-Controller. Das hat sich aber gerade erledigt.

Ich habe gerade gesehen, dass die Funktionalität welche das am PC aktuell regelt, sich gar nicht an den Xbox Controller richtet sondern diese Eingaben umwandelt. Die API für den Controller findet man nochmal separat im Namespace Windows.Gaming.

Werde mir das nochmal genauer ansehen.

---

Viele Grüße
Lars Krämer - Software Entwickler für Web und Microsoft-Technologien

---

lkraemer.de software solutions

Answer 8

Das mit den Auflösungen und der größe der Elemente ist natürlich keine einfach Sachen. Aus dem Grund dauert die Entwicklung der UI meist länger als das ganz Coden. Ich will Dir dennoch ein tipp geben wie ich das mache. Ich habe mal diese Website entwickelt http://principium-gmbh.de/, alle Größe der Bilder, Contents und Texte basieren nur auf em werten und werde nur durch 1 Zahl gesteuert. Ähnlich lässt sich das auch unter UWP oder anderen Plattformen realisieren. Da ich meist nur noch mit Xamarin entwickle und auf XAML verzichte lässt sich das gut umsetzten 

---

Gruß, Thomas

Sage nie, ich kann es nicht - sage nur, ich kann es noch nicht!

Icon für UWP