Merge pull request #102 from egvijayanand/working

Window TitleBar for Desktop

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Vijay Anand E G
+Copyright (c) 2021-2024 Vijay Anand E G
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -16,8 +16,9 @@ Made available in the `src\NET_9\` directory:
 |`EmbeddediOS`|.NET MAUI Page embedded in a .NET 9 for iOS App <br /> Refer to this [.NET MAUI - Native Embedding](https://egvijayanand.in/2024/02/29/dotnet-maui-native-embedding/) article for working with this sample|
 |`EmbeddedWindows`|.NET MAUI Page embedded in a Native WinUI 3 App <br /> Refer to this [.NET MAUI - Native Embedding](https://egvijayanand.in/2024/02/29/dotnet-maui-native-embedding/) article for working with this sample|
 |`MapsApp`|Using .NET MAUI [CommunityToolkit.Maui.Maps](https://www.nuget.org/packages/CommunityToolkit.Maui.Maps) embedded in a Native WinUI 3 App <br /> Refer to this [.NET MAUI Community Toolkit Maps in WinUI 3 App](https://egvijayanand.in/2024/03/07/dotnet-maui-community-toolkit-maps-in-winui-3-app/) article for working with this sample|
-|`HybridWebViewApp`|A sample .NET MAUI App showcasing the features of the new [HybridWebView](https://learn.microsoft.com/en-us/dotnet/maui/whats-new/dotnet-9?view=net-maui-9.0#hybridwebview) control. <br /> Refer to this [Exploring .NET MAUI 9: HybridWebView Features](https://egvijayanand.in/2024/10/04/exploring-dotnet-maui-9-hybridwebview-features/) article for working with this sample|
+|`HybridWebViewApp`|A sample app showcasing the features of the new [HybridWebView](https://learn.microsoft.com/en-us/dotnet/maui/whats-new/dotnet-9?view=net-maui-9.0#hybridwebview) control. <br /> Refer to this [Exploring .NET MAUI 9: HybridWebView](https://egvijayanand.in/2024/10/04/exploring-dotnet-maui-9-hybridwebview-features/) article for working with this sample|
 |`WinUIBlazor`|.NET MAUI `BlazorWebView` embedded in a Native WinUI 3 App, making it as a Blazor Hybrid app <br /> Refer to this [.NET MAUI - Blazor Hybrid - WinUI 3](https://egvijayanand.in/2023/03/29/dotnet-maui-blazor-hybrid-winui-3/) article for working with this sample|
+|`TitleBarApp`|A sample app showcasing the features of the new [TitleBar](https://learn.microsoft.com/en-us/dotnet/maui/whats-new/dotnet-9?view=net-maui-9.0#titlebar-for-windows) control. <br /> Refer to this [What's New in .NET MAUI 9: Window TitleBar](https://egvijayanand.in/2024/12/04/what-is-new-in-dotnet-maui-9-window-titlebar/) article for working with this sample|
 
 ### .NET MAUI 8 Samples
 

src/NET_9/TitleBarApp/App.xaml

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Application
+    x:Class="TitleBarApp.App"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:d="http://schemas.microsoft.com/dotnet/2021/maui/design"
+    xmlns:local="clr-namespace:TitleBarApp"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Resources/Colors.xaml" />
+                <ResourceDictionary Source="Resources/Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+            <!-- Additional Styles -->
+            <x:Double x:Key="ItemSpacing">10</x:Double>
+            <x:String x:Key="BoldFont">OS600</x:String>
+
+            <Style
+                ApplyToDerivedTypes="True"
+                TargetType="StackBase">
+                <Setter Property="Spacing" Value="{StaticResource ItemSpacing}" />
+            </Style>
+
+            <Style
+                x:Key="Title"
+                TargetType="Label">
+                <Setter Property="FontFamily" Value="{StaticResource AppFont}" />
+                <Setter Property="FontSize" Value="16" />
+                <Setter Property="TextColor" Value="{StaticResource White}" />
+                <Setter Property="HorizontalOptions" Value="Center" />
+                <Setter Property="VerticalOptions" Value="Center" />
+            </Style>
+
+            <Style
+                x:Key="AppTitle"
+                BasedOn="{StaticResource Title}"
+                TargetType="Label">
+                <Setter Property="FontFamily" Value="{StaticResource BoldFont}" />
+                <Setter Property="FontSize" Value="18" />
+            </Style>
+
+            <Style
+                x:Key="MauiLabel"
+                TargetType="Label">
+                <Setter Property="TextColor" Value="{AppThemeBinding Dark={StaticResource White}, Light={StaticResource Primary}}" />
+            </Style>
+
+            <Style
+                x:Key="Action"
+                TargetType="Button">
+                <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={StaticResource BackgroundDark}, Light={StaticResource BackgroundLight}}" />
+                <Setter Property="TextColor" Value="{AppThemeBinding Dark={StaticResource TextDark}, Light={StaticResource TextLight}}" />
+                <Setter Property="FontFamily" Value="{StaticResource AppFont}" />
+                <Setter Property="FontSize" Value="{StaticResource AppFontSize}" />
+                <Setter Property="Padding" Value="14,10" />
+            </Style>
+
+            <Style
+                x:Key="PrimaryAction"
+                BasedOn="{StaticResource Action}"
+                TargetType="Button">
+                <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
+                <Setter Property="FontAttributes" Value="Bold" />
+                <Setter Property="TextColor" Value="{StaticResource White}" />
+            </Style>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

src/NET_9/TitleBarApp/App.xaml.cs

@@ -0,0 +1,14 @@
+namespace TitleBarApp;
+
+public partial class App : Application
+{
+    public App()
+    {
+        InitializeComponent();
+
+        UserAppTheme = PlatformAppTheme;
+    }
+
+    protected override Window CreateWindow(IActivationState? activationState)
+        => new MainWindow();
+}

src/NET_9/TitleBarApp/AppShell.xaml

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Shell
+    x:Class="TitleBarApp.AppShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:vw="clr-namespace:TitleBarApp.Views"
+    FlyoutBehavior="Locked">
+    <!--
+        The overall app visual hierarchy is defined here, along with navigation.
+        Ensure atleast a Flyout item or a TabBar is defined for Shell to work
+    -->
+    <Shell.Resources>
+        <!--
+            Define the resources to be used within this Shell visual hierarchy
+        -->
+    </Shell.Resources>
+    <!--
+        When the Flyout is visible this defines the content to display in the flyout.
+        FlyoutDisplayOptions="AsMultipleItems" will create a separate flyout item for each child element
+    -->
+    <FlyoutItem Title="No TitleBar">
+        <ShellContent
+            ContentTemplate="{DataTemplate vw:MainPage}"
+            Route="home" />
+    </FlyoutItem>
+    <FlyoutItem Title="TitleBar (XAML)">
+        <ShellContent
+            ContentTemplate="{DataTemplate vw:XamlPage}"
+            Route="xaml" />
+    </FlyoutItem>
+    <FlyoutItem Title="TitleBar (C#)">
+        <ShellContent
+            ContentTemplate="{DataTemplate vw:CSharpPage}"
+            Route="csharp" />
+    </FlyoutItem>
+    <!--
+        When the Flyout is visible this will be a menu item you can tie a click behavior to
+    -->
+    <!--
+    <MenuItem
+        Clicked="OnMenuItemClicked"
+        Text="Logout" />
+    -->
+    <!--
+        TabBar lets you define content that won't show up in a Flyout menu. When this content is active
+        the flyout menu won't be available. This is useful for creating areas of the application where
+        you don't want users to be able to navigate away from. If you would like to navigate to this
+        content you can do so by calling
+        await Shell.Current.GoToAsync("//login");
+    -->
+    <!--
+    <TabBar>
+        <ShellContent
+            ContentTemplate="{DataTemplate local:LoginPage}"
+            Route="login" />
+    </TabBar>
+    -->
+    <!-- Optional Templates
+    // These may be provided inline as below or as separate classes.
+
+    // This header appears at the top of the Flyout
+    <Shell.FlyoutHeaderTemplate>
+        <DataTemplate>
+            <Grid>ContentHere</Grid>
+        </DataTemplate>
+    </Shell.FlyoutHeaderTemplate>
+
+    // ItemTemplate is for ShellItems as displayed in a Flyout
+    <Shell.ItemTemplate>
+        <DataTemplate>
+            <ContentView>
+                Bindable Properties: Title, Icon
+            </ContentView>
+        </DataTemplate>
+    </Shell.ItemTemplate>
+
+    // MenuItemTemplate is for MenuItems as displayed in a Flyout
+    <Shell.MenuItemTemplate>
+        <DataTemplate>
+            <ContentView>
+                Bindable Properties: Text, Icon
+            </ContentView>
+        </DataTemplate>
+    </Shell.MenuItemTemplate>
+
+    // This footer appears at the bottom of the Flyout
+    <Shell.FlyoutFooterTemplate>
+        <DataTemplate>
+            <Grid>ContentHere</Grid>
+        </DataTemplate>
+    </Shell.FlyoutFooterTemplate>
+    -->
+</Shell>

src/NET_9/TitleBarApp/AppShell.xaml.cs

@@ -0,0 +1,10 @@
+namespace TitleBarApp
+{
+    public partial class AppShell : Shell
+    {
+        public AppShell()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/NET_9/TitleBarApp/Directory.Packages.props

@@ -0,0 +1,6 @@
+<Project>
+    <PropertyGroup>
+        <ManagePackageVersionsCentrally>false</ManagePackageVersionsCentrally>
+        <MauiVersion>9.*</MauiVersion>
+    </PropertyGroup>
+</Project>

src/NET_9/TitleBarApp/Imports.cs

@@ -0,0 +1,17 @@
+// .NET MAUI Markup
+global using CommunityToolkit.Maui.Markup;
+
+// MVVM Toolkit
+global using CommunityToolkit.Mvvm.ComponentModel;
+global using CommunityToolkit.Mvvm.Input;
+
+global using TitleBarApp;
+global using TitleBarApp.Views;
+
+// Shared Toolkit
+global using VijayAnand.Toolkit.Markup;
+
+// Static
+global using static CommunityToolkit.Maui.Markup.GridRowsColumns;
+global using static Microsoft.Maui.Graphics.Colors;
+global using static VijayAnand.Toolkit.Markup.ResourceHelper;

src/NET_9/TitleBarApp/MainWindow.xaml

@@ -0,0 +1,9 @@
+<Window
+    x:Class="TitleBarApp.MainWindow"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:TitleBarApp"
+    Title="TitleBarApp">
+    <!-- Page is the Content Property of the Window -->
+    <local:AppShell />
+</Window>

src/NET_9/TitleBarApp/MainWindow.xaml.cs

@@ -0,0 +1,15 @@
+namespace TitleBarApp
+{
+    public partial class MainWindow : Window
+    {
+        public MainWindow()
+        {
+            InitializeComponent();
+        }
+
+        public MainWindow(Page page) : base(page)
+        {
+            InitializeComponent();
+        }
+    }
+}

src/NET_9/TitleBarApp/MauiProgram.cs

@@ -0,0 +1,26 @@
+using Microsoft.Extensions.Logging;
+
+namespace TitleBarApp
+{
+    public static partial class MauiProgram
+    {
+        public static MauiApp CreateMauiApp()
+        {
+            var builder = MauiApp.CreateBuilder();
+            builder.UseMauiApp<App>()
+                   .UseMauiCommunityToolkitMarkup()
+                   .ConfigureFonts(fonts =>
+                   {
+                       fonts.AddFont("OpenSans-Regular.ttf", "OS400");
+                       fonts.AddFont("OpenSans-SemiBold.ttf", "OS600");
+                       fonts.AddFont("fa-solid-900.ttf", "FAS");
+                   });
+
+#if DEBUG
+            builder.Logging.AddDebug();
+#endif
+
+            return builder.Build();
+        }
+    }
+}

src/NET_9/TitleBarApp/MyWindow.xaml

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Window
+    x:Class="TitleBarApp.MyWindow"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:vw="clr-namespace:TitleBarApp.Views"
+    Title="MyApp">
+    <Window.Page>
+        <vw:MainPage />
+    </Window.Page>
+    <Window.TitleBar>
+        <!-- Can also be defined separately and included here -->
+        <!--<vw:MyTitleBar />-->
+        <TitleBar
+            BackgroundColor="{StaticResource Primary}"
+            ForegroundColor="{StaticResource White}"
+            HeightRequest="48">
+            <!-- Customized Title and Subtitle -->
+            <TitleBar.LeadingContent>
+                <Grid
+                    Margin="20,0,0,0"
+                    ColumnDefinitions="Auto,Auto,Auto"
+                    ColumnSpacing="15"
+                    VerticalOptions="Center">
+                    <Image
+                        HeightRequest="16"
+                        Source="dotnet_bot.png"
+                        WidthRequest="16" />
+                    <Label
+                        Grid.Column="1"
+                        Style="{StaticResource AppTitle}"
+                        Text="MyApp" />
+                    <Label
+                        Grid.Column="2"
+                        Style="{StaticResource Title}"
+                        Text="Home" />
+                </Grid>
+            </TitleBar.LeadingContent>
+            <TitleBar.Content>
+                <SearchBar
+                    BackgroundColor="{StaticResource White}"
+                    HorizontalOptions="Fill"
+                    MaximumWidthRequest="300"
+                    Placeholder="Search"
+                    VerticalOptions="Center" />
+            </TitleBar.Content>
+            <TitleBar.TrailingContent>
+                <ImageButton
+                    Background="Transparent"
+                    BorderWidth="0"
+                    HeightRequest="36"
+                    WidthRequest="36">
+                    <ImageButton.Source>
+                        <FontImageSource
+                            FontFamily="FAS"
+                            Glyph="&#xf013;"
+                            Size="18" />
+                    </ImageButton.Source>
+                </ImageButton>
+            </TitleBar.TrailingContent>
+        </TitleBar>
+    </Window.TitleBar>
+</Window>

src/NET_9/TitleBarApp/MyWindow.xaml.cs

@@ -0,0 +1,15 @@
+namespace TitleBarApp
+{
+    public partial class MyWindow : Window
+    {
+        public MyWindow()
+        {
+            InitializeComponent();
+        }
+
+        public MyWindow(Page page) : base(page)
+        {
+            InitializeComponent();
+        }
+    }
+}

src/NET_9/TitleBarApp/Platforms/Android/AndroidManifest.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="35" />
+    <application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+</manifest>

src/NET_9/TitleBarApp/Platforms/Android/MainActivity.cs

@@ -0,0 +1,12 @@
+using Android.App;
+using Android.Content.PM;
+using Android.OS;
+
+namespace TitleBarApp
+{
+    [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize)]
+    public class MainActivity : MauiAppCompatActivity
+    {
+
+    }
+}