UWP Hamburger Menu not opening

1
votes

I'm creating an UWP app with a hamburger menu the hamburger menu; it's a stackpanel that has some buttons and icons; anyway the main page load items from the internet and it scrolls down for viewing more items, and the problem is that when I start the app on Windows 10 mobile, the menu never opens. Every time I swipe horizontally, the menu never shows. I've tried to swipe by mouse on PC and the menu shows, but on phones the swipe is converted to scroll, so nothing happens :/ Any ideas?

Here's my main page code:

        <StackPanel x:Name="stckpnlMenuTop" Padding="0,40,0,0" HorizontalAlignment="Left" Background="{ThemeResource ComboBoxPopupBorderThemeBrush}" RenderTransformOrigin="0,0" Width="300">
        <StackPanel.RenderTransform>
            <TranslateTransform x:Name="trnslttrnsfrmMenuTop"/>
        </StackPanel.RenderTransform>

        <Grid x:Name="top" VerticalAlignment="Top" Margin="0,49,0,0" Height="491">
            <Grid x:Name="frontslider" Margin="0,-109,0,519" RenderTransformOrigin="0.5,0.5" Background="{StaticResource BoxBackground}"/>
            <Grid x:Name="top_back" HorizontalAlignment="Left" Height="81" Margin="0,-109,0,0" VerticalAlignment="Top" Width="300" PointerEntered="top_back_PointerEntered" PointerExited="top_back_PointerExited" Tapped="top_back_Tapped">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <Grid.Background>
                    <SolidColorBrush Color="#FF3A3A3A" Opacity="0.30000001192092896"/>
                </Grid.Background>
            </Grid>
            <Button  x:Name="slider_botton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" HorizontalAlignment="left" Margin="0,-76,0,0" VerticalAlignment="Top" Width="48" Height="48" Foreground="White" Tapped="slider_btn_Tapped" BorderBrush="{x:Null}" RenderTransformOrigin="0.458,-0.833" Background="{x:Null}"/>
            <Grid x:Name="android_back" HorizontalAlignment="Left" Height="48" Margin="0,125,0,0" VerticalAlignment="Top" Width="300" PointerEntered="android_back_PointerEntered" PointerExited="android_back_PointerExited" Tapped="android_tab">
                <Grid.Background>
                    <SolidColorBrush Color="#FF3A3A3A" Opacity="0.30000001192092896"/>
                </Grid.Background>
            </Grid>
            <Grid x:Name="home_back" HorizontalAlignment="Left" Height="57" Margin="0,-28,0,0" VerticalAlignment="Top" Width="300" Tapped="home_tapped" PointerExited="home_back_PointerExited" PointerEntered="home_back_PointerEntered">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <Grid.Background>
                    <SolidColorBrush Color="#FF3A3A3A" Opacity="0.30000001192092896"/>
                </Grid.Background>
            </Grid>
            <Grid x:Name="windows10_back" HorizontalAlignment="Left" Height="48" Margin="0,29,0,0" VerticalAlignment="Top" Width="300" PointerEntered="windows10_back_PointerEntered" PointerExited="windows10_back_PointerExited" Tapped="windows10_tap">
                <Grid.Background>
                    <SolidColorBrush Color="#FF3A3A3A" Opacity="0.30000001192092896"/>
                </Grid.Background>
            </Grid>
            <Grid x:Name="windowspho_back" HorizontalAlignment="Left" Height="48" Margin="0,77,0,0" VerticalAlignment="Top" Width="300" Tapped="winphon_tab" PointerEntered="windowspho_back_PointerEntered" PointerExited="windowspho_back_PointerExited">
                <Grid.Background>
                    <SolidColorBrush Color="#FF3A3A3A" Opacity="0.30000001192092896"/>
                </Grid.Background>
            </Grid>
            <Grid x:Name="nokia_back" HorizontalAlignment="Left" Height="48" Margin="0,173,0,0" VerticalAlignment="Top" Width="300" PointerEntered="nokia_back_PointerEntered" PointerExited="nokia_back_PointerExited" Tapped="nokia_tab">
                <Grid.Background>
                    <SolidColorBrush Color="#FF3A3A3A" Opacity="0.30000001192092896"/>
                </Grid.Background>
            </Grid>
            <Grid x:Name="games_back" HorizontalAlignment="Left" Height="48" Margin="0,221,0,0" VerticalAlignment="Top" Width="300" Tapped="games_tab" PointerExited="games_back_PointerExited" PointerEntered="games_back_PointerEntered">
                <Grid.Background>
                    <SolidColorBrush Color="#FF3A3A3A" Opacity="0.30000001192092896"/>
                </Grid.Background>
            </Grid>
            <TextBlock x:Name="Windows10_text" Foreground="White"  HorizontalAlignment="Left" Margin="60,42,0,0" TextWrapping="Wrap" Text="ويندوز 10" VerticalAlignment="Top" PointerEntered="windows10_back_PointerEntered" Tapped="windows10_tap" PointerExited="windows10_back_PointerExited"/>
            <TextBlock x:Name="windowspho_text" Foreground="White" HorizontalAlignment="Left" Margin="60,94,0,0" TextWrapping="Wrap" Text="ويندوز 10 موبايل" VerticalAlignment="Top" PointerEntered="windowspho_back_PointerEntered" PointerExited="windowspho_back_PointerExited" Tapped="winphon_tab"/>
            <TextBlock x:Name="android_text" Foreground="White" HorizontalAlignment="Left" Margin="60,142,0,0" TextWrapping="Wrap" Text="أندرويد" VerticalAlignment="Top" PointerEntered="android_back_PointerEntered" PointerExited="android_back_PointerExited" Tapped="android_tab"/>
            <TextBlock x:Name="nokia_text" Foreground="White" HorizontalAlignment="Left" Margin="60,191,0,0" TextWrapping="Wrap" Text="نوكيا" VerticalAlignment="Top" PointerEntered="nokia_back_PointerEntered" PointerExited="nokia_back_PointerExited" Tapped="nokia_tab"/>
            <TextBlock x:Name="home_btn" Foreground="White" FontFamily="Segoe MDL2 Assets" Text="&#xE12A;" HorizontalAlignment="Left" Margin="14,-11,0,0" VerticalAlignment="Top" Width="38" Height="24" Tapped="home_tapped" FontSize="20" RenderTransformOrigin="0.52,0.967" PointerEntered="home_back_PointerEntered" PointerExited="home_back_PointerExited"/>
            <TextBlock x:Name="home_btn_text" Foreground="White" HorizontalAlignment="Left" Margin="60,-11,0,0" TextWrapping="Wrap" Text="الرئيسية" VerticalAlignment="Top" PointerEntered="home_back_PointerEntered" PointerExited="home_back_PointerExited" Tapped="home_tapped"/>
            <TextBlock x:Name="windows10_icon" Foreground="White" FontFamily="Segoe MDL2 Assets" Text="&#xE211;" HorizontalAlignment="Left" Margin="14,43,0,0" VerticalAlignment="Top" Width="38" Height="24" Tapped="windows10_tap" FontSize="20" RenderTransformOrigin="0.52,0.967" PointerEntered="windows10_back_PointerEntered" PointerExited="windows10_back_PointerExited"/>
            <TextBlock x:Name="windowspho_icon" Foreground="White" FontFamily="Segoe MDL2 Assets" Text="&#xE25A;" HorizontalAlignment="Left" Margin="14,91,0,0" VerticalAlignment="Top" Width="38" Height="24" Tapped="winphon_tab" FontSize="20" RenderTransformOrigin="0.52,0.967" PointerEntered="windowspho_back_PointerEntered" PointerExited="windowspho_back_PointerExited"/>
            <TextBlock x:Name="android_icon" Foreground="White" FontFamily="Segoe MDL2 Assets" Text="&#xE97E;" HorizontalAlignment="Left" Margin="14,139,0,0" VerticalAlignment="Top" Width="38" Height="24" Tapped="android_tab" FontSize="20" RenderTransformOrigin="0.52,0.967" PointerEntered="android_back_PointerEntered" PointerExited="android_back_PointerExited"/>
            <TextBlock x:Name="nokia_icon" Foreground="White" FontFamily="Segoe MDL2 Assets" Text="&#xE1B7;" HorizontalAlignment="Left" Margin="14,189,0,0" VerticalAlignment="Top" Width="38" Height="24" Tapped="nokia_tab" FontSize="20" RenderTransformOrigin="0.52,0.967" PointerEntered="nokia_back_PointerEntered" PointerExited="nokia_back_PointerExited"/>
            <TextBlock x:Name="games_text" Foreground="White" HorizontalAlignment="Left" Margin="60,236,0,0" TextWrapping="Wrap" Text="ألعاب" VerticalAlignment="Top" PointerEntered="games_back_PointerEntered" PointerExited="games_back_PointerExited" Tapped="games_tab"/>
            <TextBlock x:Name="games_icon" Foreground="White" FontFamily="Segoe MDL2 Assets" Text="&#xE7FC;" HorizontalAlignment="Left" Margin="14,234,0,0" VerticalAlignment="Top" Width="38" Height="24" Tapped="games_tab" FontSize="20" RenderTransformOrigin="0.52,0.967" PointerEntered="games_back_PointerEntered" PointerExited="games_back_PointerExited"/>
        </Grid>
    </StackPanel>
    <StackPanel x:Name="stckpnlMenuBottom" HorizontalAlignment="Left" VerticalAlignment="Bottom" Background="{ThemeResource ComboBoxPopupBorderThemeBrush}" RenderTransformOrigin="0,0" Padding="0,0,0,10" Height="238">
        <StackPanel.RenderTransform>
            <TranslateTransform x:Name="trnslttrnsfrmMenuBottom"/>
        </StackPanel.RenderTransform>
        <Grid x:Name="bottom" VerticalAlignment="Bottom" Height="232">
            <Grid x:Name="contact_back" HorizontalAlignment="Left" Height="48" Margin="0,133,0,0" VerticalAlignment="Top" Width="300" Tapped="contact_tab" PointerEntered="contact_back_PointerEntered" PointerExited="contact_back_PointerExited">
                <Grid.Background>
                    <SolidColorBrush Color="#FF3A3A3A" Opacity="0.30000001192092896"/>
                </Grid.Background>
            </Grid>
            <Grid x:Name="settings_back"  HorizontalAlignment="Left" Height="48" Margin="0,181,0,-7" VerticalAlignment="Top" Width="300" PointerEntered="settings_back_PointerEntered" PointerExited="settings_back_PointerExited" Tapped="setting_tab">
                <Grid.Background>
                    <SolidColorBrush Color="#FF3A3A3A" Opacity="0.30000001192092896"/>
                </Grid.Background>
            </Grid>
            <Rectangle x:Name="flowitems" FlowDirection="RightToLeft"
                        Tapped="contact_tab" Margin="0,133,20,55">
                <FlyoutBase.AttachedFlyout>
                    <MenuFlyout x:Name = "option_menu">
                        <MenuFlyoutItem x:Name="FeedBack" FlowDirection="RightToLeft" Text="إرسال مشكلة" Width="241" PointerEntered="FeedBack_PointerEntered" Click="FeedBack_Click" >
                            <MenuFlyoutItem.Template>
                                <ControlTemplate TargetType="MenuFlyoutItem">
                                    <StackPanel Margin="12,10,0,10" Orientation="Horizontal">
                                        <FontIcon Margin="0,0,12,0" FontFamily="Segoe MDL2 Assets" Glyph="&#xE206;" />
                                        <TextBlock Text="{TemplateBinding Text}" />
                                    </StackPanel>
                                </ControlTemplate>
                            </MenuFlyoutItem.Template>
                        </MenuFlyoutItem>
                        <MenuFlyoutItem x:Name="StoreRate" FlowDirection="RightToLeft" Text="تقييم التطبيق في المتجر" Width="241" Background="Gray" Click="StoreRate_Click" >
                            <MenuFlyoutItem.Template>
                                <ControlTemplate TargetType="MenuFlyoutItem">
                                    <StackPanel Margin="12,10,0,10" Orientation="Horizontal">
                                        <FontIcon Margin="0,0,12,0" FontFamily="Segoe MDL2 Assets" Glyph="&#xE1CE;"  />
                                        <TextBlock Text="{TemplateBinding Text}" />
                                    </StackPanel>
                                </ControlTemplate>
                            </MenuFlyoutItem.Template>
                        </MenuFlyoutItem>
                        <MenuFlyoutItem  x:Name="TextMe" FlowDirection="RightToLeft" Text="مراسلة المصمم" Width="241" Background="Gray" Click="TextMe_Click">
                            <MenuFlyoutItem.Template>
                                <ControlTemplate TargetType="MenuFlyoutItem">
                                    <StackPanel Margin="12,10,0,10" Orientation="Horizontal">
                                        <FontIcon Margin="0,0,12,0"   FontFamily="Segoe MDL2 Assets" Glyph="&#xE13D;" Width="22" />
                                        <TextBlock Text="{TemplateBinding Text}" />
                                    </StackPanel>
                                </ControlTemplate>
                            </MenuFlyoutItem.Template>
                        </MenuFlyoutItem>
                    </MenuFlyout>
                </FlyoutBase.AttachedFlyout>
            </Rectangle>
            <TextBlock x:Name="contact_text" Foreground="White" HorizontalAlignment="Left" Margin="60,147,0,0" TextWrapping="Wrap" Text="تواصل معنا" VerticalAlignment="Top" PointerEntered="contact_back_PointerEntered" PointerExited="contact_back_PointerExited" Tapped="contact_tab" Height="36" Width="86"/>
            <TextBlock x:Name="settings_text" Foreground="White" HorizontalAlignment="Left" Margin="60,194,0,0" TextWrapping="Wrap" Text="الإعدادات" VerticalAlignment="Top" PointerEntered="settings_back_PointerEntered" PointerExited="settings_back_PointerExited" Tapped="setting_tab" Height="27"/>
            <TextBlock x:Name="contact_icon" Foreground="White" FontFamily="Segoe MDL2 Assets" Text="&#xE119;" HorizontalAlignment="Left" Margin="14,148,0,0" VerticalAlignment="Top" Width="38" Height="24" Tapped="contact_tab" FontSize="20" RenderTransformOrigin="0.52,0.967" PointerEntered="contact_back_PointerEntered" PointerExited="contact_back_PointerExited"/>
            <TextBlock x:Name="settings_icon" Foreground="White" FontFamily="Segoe MDL2 Assets" Text="&#xE115;" HorizontalAlignment="Left" Margin="14,194,0,1" Width="38" Tapped="setting_tab" FontSize="20" RenderTransformOrigin="0.52,0.967" PointerEntered="settings_back_PointerEntered" PointerExited="settings_back_PointerExited"/>
        </Grid>
    </StackPanel>

I think that's my problem with the scroll bar on the main page but you should know that there's no scrollviewer on it the stackpanel get scroll in auto and there's no code for it so i can't disable the horizontal scroll

2
c#uwp
show your c# codes and by default your pane is opened and you should follow this sample of splitview – Shubham Sahu

2 Answers

1
votes

If you want to make a hamburger menu in UWP, you could simply do it with the SplitView control. I'm not sure that if you know this control, I just mentioned it as Shubham Sahu said. If you're interested in using SplitView control to make a hamburger, you could read this blog Windows 10 SplitView – Build Your First Hamburger Menu for details.

If you still want to do it by yourself like your above xaml code, but you could not solve your current issue. Please provide an entire reproducible code sample. Because you just post your xaml code, but you have registered so many event handlers. You have not post any C# code, so, I didn't know what you have done in code-behind.

0
votes

I've used splitview before but the swipe touch very bad on it so I'm using this and I've solved my problem by add a grid with 32px on the left so i can swipe from it thanks for your help and yes I'm sorry for not posting the handlres ! cuz my c# code is very big so I can't post it here Hope this will help anyone search for it!