Hamburgermenu：点击仅适用于图标，不适用于文字 [英] Hamburgermenu : click works only on icons, not on text

问题描述

我在MS样本上建立了一个汉堡包菜单：

！请利用  标记  当
发布到此论坛时，谢谢！

的如果你想火的方法&NBSP; Settings_Click &NBSP ;当你按下< strong> TextBlock 时也是如此。您可以尝试将按钮和
Textblock 整合在一起作为一个整体按钮。
按钮的内容可以是容器元素，因此您可以创建  StackPanel 作为其内容，然后您可以添加一些您想要的元素在此 StackPanel 中。以下是示例代码，

< SplitView x：Name =" DZSplitView" DISPLAYMODE = QUOT; CompactOverlay" IsPaneOpen = QUOT;真" CompactPaneLength = QUOT; 50" OpenPaneLength = QUOT; 150"> 
< SplitView.Pane> 
< StackPanel Background =" Gray"> 
< Button x：Name =" HamburgerButton" FontFamily =" Segoe MDL2 Assets"含量="&安培;＃xE700;" 
 Width =" 50"高度= QUOT; 50"背景= QUOT;透明"点击= QUOT; HamburgerButton_Click" /> 
< Button Background =" Transparent"填充= QUOT; 0"高度= QUOT; 50"点击= QUOT; Settings_Click"> 
< StackPanel Orientation =" Horizo​​ntal"> 
< TextBlock FontFamily =" Segoe MDL2 Assets"文本= QUOT;&安培;＃xE115;" VerticalAlignment = QUOT;中心"边距="16,0"/> 
< TextBlock Text =" Instellingen"字号= QUOT 18 QUOT; VerticalAlignment = QUOT;中心" /> 
< / StackPanel> 
< / Button> 
< / StackPanel> 
< /SplitView.Pane> 
< / SplitView> 
 

祝你好运，

Breeze

I have based a hamburger menu on an MS sample:

https://blogs.msdn.microsoft.com/quick_thoughts/2015/06/01/windows-10-splitview-build-your-first-hamburger-menu/

This sample comes with a problem. When I open the hamburger menu, see picture, the user can only click on the button, not on the text which appeared opening the menu. On an app like Groove Music  the selection extends from button to text.

This is the relevant XAML:

<SplitView x:Name="DZSplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150">
        <SplitView.Pane>
            <StackPanel Background="Gray">
                <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                    Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE115;"
                    Width="50" Height="50" Background="Transparent" Click="Settings_Click"/>
                    <TextBlock Text="Instellingen" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>

What can I do to change this behavior?

Dick

解决方案

Hi Dick,

Welcome to the Developing Universal Windows apps forum! Please utilize tagging when posting to this forum, thanks!

If you want to fire the method Settings_Click too when you press on the TextBlock. You can try to put the button and the Textblock together as a whole button. The content of the Button can be a container element, so you can create a StackPanel as its content, then you can put some elements you want in this StackPanel. Here is the sample code,

<SplitView x:Name="DZSplitView" DisplayMode="CompactOverlay"  IsPaneOpen="True" CompactPaneLength="50" OpenPaneLength="150">
    <SplitView.Pane>
        <StackPanel Background="Gray">
            <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
        Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
            <Button Background="Transparent" Padding="0" Height="50" Click="Settings_Click">
                <StackPanel Orientation="Horizontal">
                    <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE115;" VerticalAlignment="Center" Margin="16, 0"/>
                    <TextBlock Text="Instellingen" FontSize="18" VerticalAlignment="Center"/>
                </StackPanel>
            </Button>
       </StackPanel>
    </SplitView.Pane>
</SplitView>

Best regards,

Breeze

这篇关于Hamburgermenu：点击仅适用于图标，不适用于文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！