[UWP]占领标题栏(3)

其中AppName用于显示标题栏，ItemsPanel用于放其它按钮。TitleBar里定义了Buttons属性，调用TitleBar可以通过Buttons属性指定按钮（这部分代码我凌晨两点写的，写得十分敷衍，但写完又懒得改了）。

public ObservableCollection<Button> Buttons { get; } = new ObservableCollection<Button>();

private void OnButtonsCollectionChanged(object sender,System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    ItemsPanel.Children.Clear();
    foreach (var button in Buttons)
    {
        ItemsPanel.Children.Add(button);
    }
}

<local:TitleBar>
    <local:TitleBar.Buttons>
        <Button x:Name="OptionsButton"
                Content="&#xE10C;"
                ToolTipService.ToolTip="Options" />
        <Button Content="&#xE11C;"
                ToolTipService.ToolTip="Options" />
        <Button Content="&#xE13C;"
                ToolTipService.ToolTip="Options" />
        <Button Content="&#xE12C;"
                ToolTipService.ToolTip="Options" />
    </local:TitleBar.Buttons>
</local:TitleBar>

按钮的样式来自NavigationBackButtonNormalStyle并稍作修改，大致上做到和标准的标题栏按钮一样。

9. 非激活状态的标题栏颜色

当窗体处于非激活状态应该让按钮和标题都变灰，可以订阅Window的Activated事件，在非激活状态时改变颜色：

Window.Current.Activated += OnWindowActivated;

private void OnWindowActivated(Object sender,WindowActivatedEventArgs e)
{
    VisualStateManager.GoToState(
        this,e.WindowActivationState == CoreWindowActivationState.Deactivated ? WindowNotFocused.Name : WindowFocused.Name,false);
}

<UserControl.Resources>
    <SolidColorBrush x:Key="TitleBarForeground"
                     x:Name="TitleBarForeground"
                     Color="{ThemeResource SystemBaseHighColor}" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot"
      Height="32"
      HorizontalAlignment="Stretch">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="WindowFocusStates">
            <VisualState x:Name="WindowFocused" />
            <VisualState x:Name="WindowNotFocused">
                <VisualState.Setters>
                    <Setter Target="AppName.Foreground"
                            Value="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}" />
                    <Setter Target="TitleBarForeground.Color"
                            Value="{ThemeResource SystemChromeDisabledLowColor}" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>

10. 全屏和平板模式

当应用在全屏或平板模式下运行时，系统将隐藏标题栏和标题控制按钮。 但是，用户可以调用标题栏，以使其以覆盖形式显示在应用的 UI 顶部。 你可以处理隐藏或调用标题栏时将通知的 CoreApplicationViewTitleBar.IsVisibleChanged 事件，并根据需要显示或隐藏你的自定义标题栏内容。

LayoutRoot.Visibility = _coreTitleBar.IsVisible ? Visibility.Visible : Visibility.Collapsed;

这部分比较难截图就不搞了，想看效果可以试玩我的番茄钟应用。

11.结语

就这样，令人头痛的自定义标题栏处理完了。还好微软开源了它的计算器里正好有我需要的代码，抄了个爽。有一些处理得不好，如果错误请指正。

12.参考

标题栏自定义

calculator_TitleBar.xaml.cpp at master

ApplicationViewTitleBar Class (Windows.UI.ViewManagement) - Windows UWP applications Microsoft Docs

CoreApplicationViewTitleBar Class (Windows.ApplicationModel.Core) - Windows UWP applications Microsoft Docs

13. 源码

DinoChan_ExtendViewIntoTitleBarDemo How to handle titlebar when ExtendViewIntoTitleBar

（编辑：ASP站长网）