Windows 10 通用应用程序 - 标题栏中的按钮不起作用答案

【问题标题】：Windows 10 Univeral App - Button in title bar not workingWindows 10 通用应用程序 - 标题栏中的按钮不起作用
【发布时间】：2016-06-16 17:27:37
【问题描述】：

我正在尝试向标题栏添加一个按钮。我的 XAML 如下所示：

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid x:Name="TitleBar">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="Application Name" VerticalAlignment="Center"/>
                <Button Grid.Column="1" Content="Test" Click="Button_Click"/>
            </Grid>
        </Grid>

        <Grid Grid.Row="1">
            <TextBlock>Content</TextBlock>
        </Grid>
    </Grid>
</Page>

.cs 页面有这个代码：

using System;
using Windows.ApplicationModel.Core;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace FullScreen
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            InitializeComponent();

            CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
            Window.Current.SetTitleBar(TitleBar);
        }

        private async void Button_Click(object sender, RoutedEventArgs e)
        {
            await new MessageDialog("Click!").ShowAsync();
        }
    }
}

按钮显示，但不响应点击事件。如果我在构造函数中注释掉这两行：

public MainPage()
{
    InitializeComponent();

    //CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    //Window.Current.SetTitleBar(TitleBar);
}

按钮在应用主体中，点击事件正常工作。我错过了什么？

谢谢，

【问题讨论】：

标签： c# xaml windows-10-universal

【解决方案1】：

我正在尝试向标题栏添加一个按钮。按钮显示，但不响应点击事件。

根据官方文档（Window.SetTitleBar 的备注部分），这种行为是设计使然。

输入
当您调用此方法将 XAML UIElement 设置为标题栏时，它允许 Windows 处理对标题栏 UIElement 的输入，就像它处理对默认系统标题栏的输入一样。例如，用户可以通过拖动 XAML UIElement 来移动窗口，或者通过右键单击来调用窗口上下文菜单。
这意味着当用户使用触摸、鼠标或笔与目标 UIElement 或其子元素交互时，您的应用程序不再接收指针输入。但是，您必须仍处理（或阻止）键盘输入，并确定标题栏中的内容是否可以通过使用键盘通过 tab 键获得焦点。

为了使标题栏中的按钮能够响应点击事件，我们可以先为xaml页面中的自定义标题栏添加一个矩形：

<Grid x:Name="TitleBar">
    <!--Add a rectangle here-->
    <Rectangle x:Name="BackgroundElement" />
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="Application Name" VerticalAlignment="Center" />
        <Button Grid.Column="1" Content="Test" Click="Button_Click" />
    </Grid>
</Grid>

然后，将标题栏设置为矩形，而不是后面代码中的整个网格：

public MainPage()
{
    InitializeComponent();

    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    // Set TitleBar to BackgroundElement instead of the entire grid
    // Clicks on the BackgroundElement will be treated as clicks on the title bar.
    Window.Current.SetTitleBar(BackgroundElement);
}

这里是官方的Title bar sample供你参考，下面是上面测试代码的输出：

【讨论】：