UWP en Hamburgers

Alles over programmeren en development binnen de IT-wereld
Plaats reactie
ubremoved_539
Deel van't meubilair
Deel van't meubilair
Berichten: 29849
Lid geworden op: 28 okt 2003, 09:17
Uitgedeelde bedankjes: 434 keer
Bedankt: 1972 keer

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: 6044
Lid geworden op: 16 feb 2011, 22:43
Uitgedeelde bedankjes: 376 keer
Bedankt: 346 keer

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="" 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/
ubremoved_539
Deel van't meubilair
Deel van't meubilair
Berichten: 29849
Lid geworden op: 28 okt 2003, 09:17
Uitgedeelde bedankjes: 434 keer
Bedankt: 1972 keer

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: 6044
Lid geworden op: 16 feb 2011, 22:43
Uitgedeelde bedankjes: 376 keer
Bedankt: 346 keer

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/201 ... versal-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 08 jun 2016, 13:00, in totaal 1 gewijzigd.
ubremoved_539
Deel van't meubilair
Deel van't meubilair
Berichten: 29849
Lid geworden op: 28 okt 2003, 09:17
Uitgedeelde bedankjes: 434 keer
Bedankt: 1972 keer

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: 6044
Lid geworden op: 16 feb 2011, 22:43
Uitgedeelde bedankjes: 376 keer
Bedankt: 346 keer

Ik zou zeker die shell optie eens bekijken, maar het kan dat ze het inderdaad met dat menu bovenaan doen.
ubremoved_539
Deel van't meubilair
Deel van't meubilair
Berichten: 29849
Lid geworden op: 28 okt 2003, 09:17
Uitgedeelde bedankjes: 434 keer
Bedankt: 1972 keer

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.
Plaats reactie

Terug naar “Development”