[UWP]占领标题栏(2)

但现在的UWP应用常常在Dark和Light主题之间反复横跳，而Application.Current.Resources只能拿到程序加载时的ThemeResource的值，所以这段代码在应用内的主题切换后无效。我暂时不清楚怎么在代码里拿到最新的ThemeResource，为解决这个问题只好让TitleBar自己在XAML中获取当前的ThemeResource，代码如下：

<UserControl.Resources>
    <SolidColorBrush x:Key="ButtonForegroundColor"
                     Color="{ThemeResource SystemBaseHighColor}" />
    <SolidColorBrush x:Key="ButtonInactiveForegroundBrush"
                     Color="{ThemeResource SystemChromeDisabledLowColor}" />
    <SolidColorBrush x:Key="ButtonHoverBackgroundBrush"
                     Color="{ThemeResource SystemListLowColor}" />
    <SolidColorBrush x:Key="ButtonHoverForegroundBrush"
                     Color="{ThemeResource SystemBaseHighColor}" />
    <SolidColorBrush x:Key="ButtonPressedBackgroundBrush"
                     Color="{ThemeResource SystemListMediumColor}" />
    <SolidColorBrush x:Key="ButtonPressedForegroundBrush"
                     Color="{ThemeResource SystemBaseHighColor}" />
</UserControl.Resources>

Color fgColor = ((SolidColorBrush)Resources["ButtonForegroundColor"]).Color;
Color inactivefgColor = ((SolidColorBrush)Resources["ButtonInactiveForegroundBrush"]).Color;
Color hoverbgColor = ((SolidColorBrush)Resources["ButtonHoverBackgroundBrush"]).Color;
Color hoverfgColor = ((SolidColorBrush)Resources["ButtonHoverForegroundBrush"]).Color;
Color pressedbgColor = ((SolidColorBrush)Resources["ButtonPressedBackgroundBrush"]).Color;
Color pressedfgColor = ((SolidColorBrush)Resources["ButtonPressedForegroundBrush"]).Color;

6. 可拖动区域

都将内容扩展到标题栏了，肯定是想在标题栏上放置自己需要的UI元素，默认情况下标题栏的范围为拖动、点击等Windows的窗体行为保留，在这个范围的自定义UI内容没办法获取鼠标点击。 为了让自定义的UI内容获取鼠标，可以用Window.SetTitleBar方法指定某一元素能用于窗体的拖动和点击。

<Grid x:Name="LayoutRoot"
      Height="32" 
      HorizontalAlignment="Stretch">
    <Grid x:Name="BackgroundElement"
          Height="32"
          Background="Transparent" />
    <StackPanel Orientation="Horizontal">
        <StackPanel x:Name="ItemsPanel" Orientation="Horizontal">
        </StackPanel>
       
        <TextBlock x:Name="AppName"
                   x:Uid="AppName"
                   Text="ExtendViewIntoTitleBarDemo"
        </StackPanel>
</Grid>

Window.Current.SetTitleBar(BackgroundElement);

上面的代码指定TitlaBar中的BackgroundElement元素为可拖动区域，而下面的StackPanel则用于放置交互内容，例如标题或后退按钮。这个StackPanel必须比BackgroundElement具有较高的Z顺序才能接收到用户的鼠标输入。

7. 标题的系统保留区域

标题栏的右边有188像素的系统保留区域，用于系统标题按钮（“后退”、“最小化”、“最大化”、“关闭”）。其实这几个按钮也就占用了141像素的控件，还有一小块空间是默认的可拖动区域，这小块空间确保了无论怎么设置都总有一个用户可拖动的区域。

上面说的188像素是100%缩放的情况，通过上面的截图可以看到实际上可能不一样，通常来说会在窗体加载时，或者订阅CoreApplicationViewTitleBar.LayoutMetricsChanged事件，然后通过CoreApplicationViewTitleBar获取具体的值。

_coreTitleBar.LayoutMetricsChanged += OnLayoutMetricsChanged;

private void OnLayoutMetricsChanged(CoreApplicationViewTitleBar sender,object args)
{
    LayoutRoot.Height = _coreTitleBar.Height;
    SetTitleBarPadding();
}

private void SetTitleBarPadding()
{
    double leftAddition = 0;
    double rightAddition = 0;

    if (FlowDirection == FlowDirection.LeftToRight)
    {
        leftAddition = _coreTitleBar.SystemOverlayLeftInset;
        rightAddition = _coreTitleBar.SystemOverlayRightInset;
    }
    else
    {
        leftAddition = _coreTitleBar.SystemOverlayRightInset;
        rightAddition = _coreTitleBar.SystemOverlayLeftInset;
    }

    LayoutRoot.Padding = new Thickness(leftAddition,rightAddition,0);
}

8. 可交互区域的内容

上面的StackPanel是可交互区域，详细的内容如下：

<StackPanel Orientation="Horizontal">
    <StackPanel x:Name="ItemsPanel" Orientation="Horizontal">
        <StackPanel.Resources>
            <Style TargetType="Button"
                   BasedOn="{StaticResource NavigationBackButtonNormalStyle}">
                <Setter Property="Foreground"
                        Value="{StaticResource TitleBarForeground}" />
                <Setter Property="FontSize"
                        Value="10" />
                <Setter Property="Width"
                        Value="46" />
                <Setter Property="Height"
                        Value="32" />
                <Setter Property="IsTabStop"
                        Value="False" />
            </Style>
        </StackPanel.Resources>
       
    </StackPanel>
   
    <TextBlock x:Name="AppName"
               x:Uid="AppName"
               Text="ExtendViewIntoTitleBarDemo"
               Margin="12,12,0"
               HorizontalAlignment="Left"
               VerticalAlignment="Center"
               Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}"
               FontSize="12"
               IsHitTestVisible="False"
               TextAlignment="Left"
               TextTrimming="CharacterEllipsis" />
</StackPanel>

（编辑：ASP站长网）