XAML 如何在WinUI中设计类似WinUI3图库的标题栏

rta7y2nd  于 2023-09-28  发布在  其他
关注(0)|答案(1)|浏览(113)

我是WinUI的新手,正在努力做一些基本的事情。任何帮助都是感激不尽的。我现在正在用WinUI 3设计一个小应用程序,但是我在设计标题栏时遇到了一些问题。我想做一个标题栏像WinUI 3画廊,我已经尝试了很多方法,但他们都没有工作。
下面是我的项目的源代码:
MainWindow.xaml

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="sks_toolkit.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:sks_toolkit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="36"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Grid.Column="0" Grid.Row="0">
            <TextBlock>Sciencekill Toolkit</TextBlock>
        </StackPanel>
        <NavigationView Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" SelectionChanged="NavigationView_SelectionChanged" PaneDisplayMode="Left">
            <NavigationView.MenuItems>
                <NavigationViewItem Icon="Play" Content="HomePage" Tag="mainPage"/>
            </NavigationView.MenuItems>
            <Frame x:Name="mainFrame"/>
        </NavigationView>
    </Grid>
</Window>

MainWindow.cs

using Microsoft.UI;
using Microsoft.UI.Windowing;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Scighost.WinUILib.Helpers;
using System;
using WinRT.Interop;
using sks_toolkit.Pages;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace sks_toolkit
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        internal SystemBackdrop systemBackDrop;

        private IntPtr hwnd;
        private AppWindow appWindow;
        public MainWindow()
            {
                InitializeComponent();
                systemBackDrop=new SystemBackdrop(this);
                systemBackDrop.TrySetMica(useMicaAlt:true ,fallbackToAcrylic: true);
                hwnd = WindowNative.GetWindowHandle(this);
                WindowId id = Win32Interop.GetWindowIdFromWindow(hwnd);
                appWindow = AppWindow.GetFromWindowId(id);
                if (AppWindowTitleBar.IsCustomizationSupported())
                {
                    var titleBar = appWindow.TitleBar;
                    titleBar.ExtendsContentIntoTitleBar = true;
                    titleBar.ButtonBackgroundColor = Colors.Transparent;
                    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
                }
        }

        private void NavigationView_SelectionChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)
        {
            var selectedItem = (NavigationViewItem)args.SelectedItem;
            switch ((string)selectedItem.Tag)
            {
                case "mainPage":
                    mainFrame.Navigate(typeof(MainPage));
                    break;
            }
        }
    }
    
}

现在,它看起来非常漂亮ex 1c 0d1x,但只有一个问题-在WinUI 3 Gallery中,右侧的内容框与标题barx 1c 1d 1x的上边缘有一个间隙。我已经尝试将导航视图放在第二行,并为标题栏保留了一个空行。然后,后退按钮也会在第二行-,显然,我不希望它在这里。我还尝试使用画布作为导航视图的内容,并将mainFrame的Canvas.top属性更改为36,但只有内容在正确的位置,框仍然在错误的位置.

mwyxok5s

mwyxok5s1#

我建议你可以参考文档:Title bar customization
您可以根据需要自定义标题栏。你可以调用SetTitleBar method来替换系统标题栏为你的应用程序的自定义标题栏UI。

**编辑:**您可以看到您所说的“空行”是标题栏的一部分。

相关问题