如何在UWP中的最小化按钮旁边的标题栏中添加新按钮? [英] How to add a new button in title bar next the minimize button in UWP?

问题描述

我想在UWP应用程序的标题栏中添加一个新按钮，如下所示:

我已经看到了一些类似"的帖子，但是答案并不清楚，而且缺乏细节，这让我很难理解他们的所作所为.

解决方案

默认情况下，UWP无法将按钮添加到标题栏.但是uwp支持自定义标题栏布局.

用于开始隐藏标题栏视图

  CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true; 

创建新的网格布局并将其附加到标题栏

  Window.Current.SetTitleBar(UserLayout); 

创建 TitleBar 并订阅用于动态创建边距的 LayoutMetricsChanged 事件，因为使用不同数量的系统按钮，事件将有所不同.

  var tBar = CoreApplication.GetCurrentView().TitleBar;tBar.LayoutMetricsChanged + = OnTitleBarLayoutMetricsChanged; 

并添加功能

  public void OnTitleBarLayoutMetricsChanged(CoreApplicationViewTitleBar发送者，对象args){var bar =发送者为CoreApplicationViewTitleBar;RightPanel.Margin = new Thickness(0，0，bar.SystemOverlayRightInset，0);} 

将页面框架导航到主页

  Content.Navigate(typeof(Home)，null，新的SuppressNavigationTransitionInfo());//使用null参数和null动画导航到主页 

在app.xaml.cs结尾将标准导航框架设置为此页面

  if(e.PrelaunchActivated == false){如果(rootFrame.Content == null){rootFrame.Navigate(typeof(AniMiru.Windows10.Views.AppCustomWindow)，e.Arguments);}Window.Current.Activate();} 

页面xaml:

 < Grid>< Grid.RowDefinitions>< RowDefinition Height ="32"/><行定义/></Grid.RowDefinitions>< Grid x:Name ="TopBar"><网格x:Name ="UserLayout" Background =#00000000"/>< Grid Canvas.ZIndex ="1">< StackPanel x:Name ="LeftPanel" Orientation ="Horizo​​ntal" VerticalAlignment ="Stretch" Horizo​​ntalAlignment ="Left">< AutoSuggestBox QueryIcon =查找" PlaceholderText ="Search"宽度="300"/></StackPanel>< StackPanel x:Name ="RightPanel" Orientation ="Horizo​​ntal" VerticalAlignment ="Stretch" Horizo​​ntalAlignment ="Right"><按钮Content =" FontFamily ="Segoe MDL2资产" FontSize ="13" VerticalAlignment ="Stretch"/><按钮Content =" FontFamily ="Segoe MDL2资产" FontSize ="13" VerticalAlignment ="Stretch"/></StackPanel></Grid></Grid>< Grid Grid.Row ="1"><框架x:Name ="Content"/></Grid></Grid> 

页面C#:

 公共AppCustomWindow(){this.InitializeComponent();//隐藏标题栏面板并将新的布局添加到标题栏CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;Window.Current.SetTitleBar(UserLayout);//将LayoutMetricsChanged事件添加到TitleBarvar tBar = CoreApplication.GetCurrentView().TitleBar;tBar.LayoutMetricsChanged + = OnTitleBarLayoutMetricsChanged;//导航Content.Navigate(typeof(Home)，null，新的SuppressNavigationTransitionInfo());//使用null参数和null动画导航到主页}公共无效OnTitleBarLayoutMetricsChanged(CoreApplicationViewTitleBar发送者，对象args){var bar =发送者为CoreApplicationViewTitleBar;RightPanel.Margin = new Thickness(0，0，bar.SystemOverlayRightInset，0);} 

屏幕截图:

网址:

标题栏自定义

布局面板

处理和引发事件

---

我的英语很抱歉.

最诚挚的问候.

I want to add a new button in the title bar of a UWP application, something that looks like this :

I have already saw some "similar" posts but the answers aren't really clear and it lacks details, it's hard for me to understand what they have done.

解决方案

by default UWP does not have the ability to add buttons to the titlebar. But uwp support custom titlebar layout.

For starting hide title bar view

CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;

After Create new grid layout and attach it to title bar

Window.Current.SetTitleBar(UserLayout);

Create TitleBar and subscribe LayoutMetricsChanged event that uses to dynamically create Margin, because with a different number of system buttons it will be different.

var tBar = CoreApplication.GetCurrentView().TitleBar;
tBar.LayoutMetricsChanged += OnTitleBarLayoutMetricsChanged;

And add function

public void OnTitleBarLayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    var bar = sender as CoreApplicationViewTitleBar;
    RightPanel.Margin = new Thickness(0, 0, bar.SystemOverlayRightInset, 0);
}

Navigate page frame to home page

Content.Navigate(typeof(Home), null, new SuppressNavigationTransitionInfo()); // Navigate to Home page with null args and null animation

End in app.xaml.cs set standart navigation frame to this page

if (e.PrelaunchActivated == false) {
    if (rootFrame.Content == null) {
        rootFrame.Navigate(typeof(AniMiru.Windows10.Views.AppCustomWindow), e.Arguments);
    }
    Window.Current.Activate();
}

Page xaml:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid x:Name="TopBar" >
            <Grid x:Name="UserLayout" Background="#00000000" />
            <Grid Canvas.ZIndex="1">
                <StackPanel x:Name="LeftPanel" Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Left">
                    <AutoSuggestBox QueryIcon="Find" PlaceholderText="Search" Width="300" />
                </StackPanel>
                <StackPanel x:Name="RightPanel" Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Right">
                    <Button Content="" FontFamily="Segoe MDL2 Assets" FontSize="13" VerticalAlignment="Stretch" />
                    <Button Content="" FontFamily="Segoe MDL2 Assets" FontSize="13" VerticalAlignment="Stretch" />
                </StackPanel>
            </Grid>
        </Grid>
        <Grid Grid.Row="1">
            <Frame x:Name="Content" />
        </Grid>
    </Grid>

Page C#:

public AppCustomWindow()
{
    this.InitializeComponent();

    // Hide titlebar panel and add new layout to title bar
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    Window.Current.SetTitleBar(UserLayout);

    // Add LayoutMetricsChanged Event to TitleBar
    var tBar = CoreApplication.GetCurrentView().TitleBar;
    tBar.LayoutMetricsChanged += OnTitleBarLayoutMetricsChanged;

    // Navigate
    Content.Navigate(typeof(Home), null, new SuppressNavigationTransitionInfo()); // Navigate to Home page with null args and null animation
}

public void OnTitleBarLayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    var bar = sender as CoreApplicationViewTitleBar;
    RightPanel.Margin = new Thickness(0, 0, bar.SystemOverlayRightInset, 0);
}

Screenshots:

Urls:

Title bar customization

Layout panels

Handling and raising events

---

Sory for my English.

Best regards.

这篇关于如何在UWP中的最小化按钮旁边的标题栏中添加新按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！