UWP en Hamburgers

Gebruikersavatar
r2504
Deel van't meubilair
Deel van't meubilair
Berichten: 27969
Lid geworden op: 28 Okt 2003
Bedankt: 1845 keer
Recent bedankt: 3 keer
Uitgedeelde bedankjes: 333 keer

UWP en Hamburgers

Berichtdoor r2504 » 07 Jun 2016, 21:03

Heeft er iemand ervaring met Windows 10 development... ben er totaal niet in thuis en wil wel eens iets proberen.

Eerste probleempje is een hamburger menu waarbij standaard enkel de hamburger zichtbaar is, en bij het klikken erop de pane tevoorschijn komt.

Gebruikersavatar
MClaeys
Elite Poster
Elite Poster
Berichten: 4511
Lid geworden op: 16 Feb 2011
Bedankt: 252 keer
Recent bedankt: 3 keer
Uitgedeelde bedankjes: 288 keer

Re: UWP en Hamburgers

Berichtdoor MClaeys » 08 Jun 2016, 09:06

Lang geleden dat ik er nog mee gespeeld heb, in Windows 10 zelfs nog niet, maar hier staat het vrij goed uitgelegd:
https://blogs.msdn.microsoft.com/quick_ ... rger-menu/

In de MainPage.xaml staat bij mij het volgende:

Code: Selecteer alles

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <SplitView x:Name="HamburgerTest" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150">
        <SplitView.Pane>
            <StackPanel Background="Gray">
                <Button x:Name="HamburgerKnop" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" Width="50" Height="50" Background="Transparent" Click="HamburgerKnop_Click"/>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            <TextBox></TextBox>
        </SplitView.Content>
    </SplitView>
</Page>


In de Mainpage.xaml.cs het volgende:

Code: Selecteer alles

 public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void HamburgerKnop_Click(object sender, RoutedEventArgs e)
        {
            HamburgerTest.IsPaneOpen = !HamburgerTest.IsPaneOpen;
        }
    }


Et voila, een hamburgermenutje dat kan openklikken, weliswaar verticaal menu dat je links en rechts kan plaatsen. Het werkt niet op de bodem, dat gaat niet met de splitview.
Ik raad aan op deze site wat rond te kijken, dat hielp mij veel toen ik er nog mee bezig was: https://mva.microsoft.com/
Xbox Live: MClaeys

Gebruikersavatar
r2504
Deel van't meubilair
Deel van't meubilair
Berichten: 27969
Lid geworden op: 28 Okt 2003
Bedankt: 1845 keer
Recent bedankt: 3 keer
Uitgedeelde bedankjes: 333 keer

Re: UWP en Hamburgers

Berichtdoor r2504 » 08 Jun 2016, 12:38

Die code heb ik ook... heb probleem is echter dat je links constant een balk kwijt bent voor je collapsed menu.

Op m'n telefoon hebben de Microsoft apps dit niet... je ziet enkel het hamburger icoontje staan... als je daar op klikt dat krijg je de balk links pas.

Ik dacht dat de DisplayMode="CompactOverlay" hiervoor zou zorgen... maar blijkbaar mis ik iets ?

Gebruikersavatar
MClaeys
Elite Poster
Elite Poster
Berichten: 4511
Lid geworden op: 16 Feb 2011
Bedankt: 252 keer
Recent bedankt: 3 keer
Uitgedeelde bedankjes: 288 keer

Re: UWP en Hamburgers

Berichtdoor MClaeys » 08 Jun 2016, 12:49

Kan je een voorbeeldapp noemen? Ik heb daar nog nooit op gelet. Zal dan vanavond even kijken of ik het aan de praat krijg.

Edit: gevonden. OneDrive bvb.
Ik heb even getest met de Transparent als background maar dat hielp ook niet echt. Volgens mij is dat meer gedaan met achterliggende code dat er gewoon een hamburgermenu button staat en dat de pane pas zichtbaar word met er op te klikken.

https://maximelabelle.wordpress.com/2016/02/02/building-a-hamburger-menu-for-your-universal-app
A default project for building universal applications create an App.xaml application object as well as a MainPage.xaml page. One of the first task when implementing the Hamburger menu is to change the MainPage.xaml to act as a Shell that provides navigations to other pages.

There are several options for laying out the Hamburger menu.

One popular option is the one used by most builtin MSN/Live Apps, such as News, Finances, Weather, etc. This is done with the following layout, where you can notice that the Hamburger button is actually not part of the SplitView pane.
Laatst gewijzigd door MClaeys op 08 Jun 2016, 13:00, 1 keer totaal gewijzigd.
Xbox Live: MClaeys

Gebruikersavatar
r2504
Deel van't meubilair
Deel van't meubilair
Berichten: 27969
Lid geworden op: 28 Okt 2003
Bedankt: 1845 keer
Recent bedankt: 3 keer
Uitgedeelde bedankjes: 333 keer

Re: UWP en Hamburgers

Berichtdoor r2504 » 08 Jun 2016, 12:53

Gewoon de calculator app.

Ik heb het idee dat ze een beetje vals spelen en bovenaan een soort titelbalk hebben met hierin een hamburger icoontje (maar dus geen actieve splitview). Wanneer je hierop klikt denk ik dat ze dan IsPaneOpen op true zetten... en gebruik maken van DisplayMode compact (al vraag ik me dan af wat het nut is van die DisplayMode's).

Gebruikersavatar
MClaeys
Elite Poster
Elite Poster
Berichten: 4511
Lid geworden op: 16 Feb 2011
Bedankt: 252 keer
Recent bedankt: 3 keer
Uitgedeelde bedankjes: 288 keer

Re: UWP en Hamburgers

Berichtdoor MClaeys » 08 Jun 2016, 13:03

Ik zou zeker die shell optie eens bekijken, maar het kan dat ze het inderdaad met dat menu bovenaan doen.
Xbox Live: MClaeys

Gebruikersavatar
r2504
Deel van't meubilair
Deel van't meubilair
Berichten: 27969
Lid geworden op: 28 Okt 2003
Bedankt: 1845 keer
Recent bedankt: 3 keer
Uitgedeelde bedankjes: 333 keer

Re: UWP en Hamburgers

Berichtdoor r2504 » 08 Jun 2016, 13:10

Er is trouwens nog verschil tussen de Weather en Calculator app.

Bij de Weather app blijft de balk bovenaan staan (de splitview zit er dus onder), bij de Calculator app verdwijnt de balk bovenaan (de splitview zit er dus over).

Edit: staat ook beschreven in je link... ga dat later eens nader bekijken.


Terug naar “Web-en applicatie-ontwikkeling”

Wie is er online

Gebruikers op dit forum: Geen geregistreerde gebruikers en 1 gast