NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Rozložení prvků po otočení

V předchozím kvízu, Test znalostí C# .NET online, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Jaroslav Bartůněk
Člen
Avatar
Jaroslav Bartůněk:22.3.2016 11:55

Zdravím všechny a prosím o radu nebo aspoň nakopnutí. Snažím se ve Visual Studiu vytvořit univerzální aplikaci ve smyslu UWP. Pozici ovládacích prvků mám uzpůsobenou pro zařízení natočené na výšku. Testoval jsem aplikaci přímo na svém mobilu a po otočení na šířku, jsou sice všechny prvky díky ViewBoxům celkem dobře viditelné, ale některé prvky už jsou tak malé, že jejich ovládání není vůbec komfortní. Dá se nějak vyřešit v XAML, aby se v případě změny orientace ZCELA změnilo i rozložení a zobrazení prvků na obrazovce?
Pro úplnost zasílám print screen z mobilu. Mně by prakticky stačilo rozložit prvky do dvou sloupců. Představu mám asi takovou, že by se to velké číslo po natočení nacházelo vedle prvků, které jsou na obrázku pod ním. Červený text by mohl zůstat nahoře nad vším, nebo by byl jen nad tím velkým číslem.
Předem všem děkuji za rady.

 
Odpovědět
22.3.2016 11:55
Avatar
Ježek Vít
Člen
Avatar
Ježek Vít :22.3.2016 12:08

Napadá mi něco na způsob např. StackPanel / WrapPalel. Číslo zvlášť, ostatní texty/boxy zvlášť.

Nahoru Odpovědět
22.3.2016 12:08
Nemyslím, tedy nejsem.
Avatar
Jaroslav Bartůněk
Člen
Avatar
Odpovídá na Ježek Vít
Jaroslav Bartůněk:22.3.2016 13:30

V sobě vnořených StackPanelech mám ty prvky pod tím číslem. A StackPanely mám pak ve ViewBoxech. Ty jsou pak vloženy v příslušné oblasti Gridu. Nějak si teď neumím představit, jak by to šlo StackPanelem vyřešil. Spíš jsem si myslel, že by to chtělo změnit ten Grid a následně umístění prvků v něm. Ale nemám tušení jak, já doufám, že na to existuje v XAML nějaká vychytávka. :-) Že se třeba napíše nějaká duplicitní verze XAML souboru a podle ní se řídí uživatelské rozhraní po přetočení, ale to určitě moc fantazíruji. :-D Jsem v tomto začátečník amatér, snad mi to tu zkušení programátoři prominou. :-)

 
Nahoru Odpovědět
22.3.2016 13:30
Avatar
Michal Štěpánek
Člen
Avatar
Odpovídá na Jaroslav Bartůněk
Michal Štěpánek:22.3.2016 13:35

Nikdy jsem to ještě nedělal, ale napadlo mě, pokud jsi schopen detekovat, jestli je aktuální zobrazení na výšku, či na šířku, udělat si v podstatě jeden grid na obě zobrazení a podle potřeby měnit u patřičné "buňky" visibility. Ale nevím, jestli je to vůbec reálné...

Nahoru Odpovědět
22.3.2016 13:35
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Jaroslav Bartůněk
Člen
Avatar
Jaroslav Bartůněk:23.3.2016 15:27

Tak i když neumím anglicky, tak jsem se pomocí Google překladače dopátral nějakého řešení. Pro případné další zájemce je zde uvedu. Nevím, jestli je to tedy úplně nejoptimálnější způsob, ale pro mě to je postačující. :-)
Je to popsáno např. zde:
https://blogs.windows.com/…ow-10-by-10/
Je tedy potřeba využít VisualStateManager, ve kterém je možné zadat minimální efektivní počet pixelů šířky či výšky. V návaznosti na to je pak možné zapsat, co všechno se má změnit při dosažení této hranice.
Od dvousloupcového rozdělení jsem nakonec upustil, neboť zadané hranice efektivních pixelů může dosáhnout tablet i v natočení na výšku. Pak je rozložení ovládacích prvků proti velice nepraktické. Jestli lze detekovat natočení místo efektivních pixelů jsem nezjistil.
V mém případě mi tedy už jen stačilo změnit orientaci u StackPanelu a trošku změnit poměry řádků Gridu. Zde je daný kód VisualStateMa­nageru, který toto provádí:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="wideView">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="640"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="spOvladaciPrvky.(Orientation)" Value="Horizontal"/>
                <Setter Target="druhyRadek.(Height)" Value="24*"/>
                <Setter Target="tretiRadek.(Height)" Value="16*"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Na závěr přikládám printscreen s výsledkem.
Tak snad to někomu bude k užitku.

 
Nahoru Odpovědět
23.3.2016 15:27
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.