[Windows] Add TitleBar Control #23019
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <ContentPage | ||
| xmlns="http://schemas.microsoft.com/dotnet/2021/maui" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" | ||
| xmlns:windows="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific;assembly=Microsoft.Maui.Controls" | ||
| x:Class="Maui.Controls.Sample.Pages.WindowsTitleBarPage" | ||
| Title="WebView Platform-Specifics"> | ||
| <Grid | ||
| ColumnDefinitions="*,*"> | ||
| <VerticalStackLayout | ||
| Spacing="16" | ||
| Margin="16" | ||
| Grid.Column="0"> | ||
|
|
||
| <Label | ||
| Text="Content Options" | ||
| FontSize="24"/> | ||
|
|
||
| <HorizontalStackLayout> | ||
| <CheckBox | ||
| x:Name="SetIconCheckBox" | ||
| IsChecked="False" | ||
| CheckedChanged="SetIconCheckBox_CheckedChanged"/> | ||
| <Label | ||
| Text="Set Icon" | ||
| VerticalOptions="Center"/> | ||
| </HorizontalStackLayout> | ||
|
|
||
| <Entry | ||
| x:Name="TitleTextBox" | ||
| Placeholder="Title Text" | ||
| HorizontalOptions="Start" | ||
| Text="{Binding Title, Mode=TwoWay}" | ||
| WidthRequest="120" /> | ||
| <Entry | ||
| x:Name="SubtitleTextBox" | ||
| Placeholder="Subtitle Text" | ||
| HorizontalOptions="Start" | ||
| Text="{Binding Subtitle, Mode=TwoWay}" | ||
| WidthRequest="120" /> | ||
|
|
||
| <HorizontalStackLayout> | ||
| <CheckBox | ||
| x:Name="LeadingContentCheckBox" | ||
| IsChecked="False" | ||
| CheckedChanged="LeadingCheckBox_CheckedChanged"/> | ||
| <Label | ||
| Text="Leading Content" | ||
| VerticalOptions="Center"/> | ||
| </HorizontalStackLayout> | ||
|
|
||
| <HorizontalStackLayout> | ||
| <CheckBox | ||
| x:Name="ContentCheckBox" | ||
| IsChecked="False" | ||
| CheckedChanged="ContentCheckBox_CheckedChanged"/> | ||
| <Label | ||
| Text="Content" | ||
| VerticalOptions="Center"/> | ||
| </HorizontalStackLayout> | ||
|
|
||
| <HorizontalStackLayout> | ||
| <CheckBox | ||
| x:Name="TrailingContentCheckBox" | ||
| IsChecked="False" | ||
| CheckedChanged="TrailingCheckBox_CheckedChanged"/> | ||
| <Label | ||
| Text="Trailing Content" | ||
| VerticalOptions="Center"/> | ||
| </HorizontalStackLayout> | ||
|
|
||
| <HorizontalStackLayout> | ||
| <CheckBox | ||
| x:Name="TallModeCheckBox" | ||
| IsChecked="False" | ||
| CheckedChanged="TallModeCheckBox_CheckedChanged"/> | ||
| <Label | ||
| Text="Tall TitleBar" | ||
| VerticalOptions="Center"/> | ||
| </HorizontalStackLayout> | ||
|
|
||
| <HorizontalStackLayout> | ||
| <CheckBox | ||
| IsChecked="{Binding ShowTitleBar, Mode=TwoWay}"/> | ||
| <Label | ||
| Text="Show TitleBar" | ||
| VerticalOptions="Center"/> | ||
| </HorizontalStackLayout> | ||
| </VerticalStackLayout> | ||
|
|
||
| <VerticalStackLayout | ||
| Spacing="16" | ||
| Margin="16" | ||
| Grid.Column="1"> | ||
| <Label | ||
| Text="Color Options" | ||
| FontSize="24"/> | ||
|
|
||
| <HorizontalStackLayout | ||
| Spacing="8"> | ||
| <Entry | ||
| x:Name="ColorTextBox" | ||
| Placeholder="Green" | ||
| HorizontalOptions="Start" | ||
| WidthRequest="120" /> | ||
| <Button | ||
| x:Name="ColorButton" | ||
| Text="Set Color" | ||
| Clicked="ColorButton_Clicked" /> | ||
| </HorizontalStackLayout> | ||
|
|
||
| <HorizontalStackLayout | ||
| Spacing="8"> | ||
| <Entry | ||
| x:Name="ForegroundColorTextBox" | ||
| Placeholder="Green" | ||
| HorizontalOptions="Start" | ||
| WidthRequest="120" /> | ||
| <Button | ||
| x:Name="ForegroundColorButton" | ||
| Text="Set Foreground Color" | ||
| Clicked="ForegroundColorButton_Clicked" /> | ||
| </HorizontalStackLayout> | ||
| </VerticalStackLayout> | ||
| </Grid> | ||
| </ContentPage> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| using System; | ||
| using Maui.Controls.Sample.ViewModels; | ||
| using Microsoft.Maui.Controls; | ||
| using Microsoft.Maui.Controls.Shapes; | ||
| using Microsoft.Maui.Controls.Xaml; | ||
|
|
||
| namespace Maui.Controls.Sample.Pages | ||
| { | ||
| public partial class WindowsTitleBarPage : ContentPage | ||
| { | ||
| TitleBarSampleViewModel _viewModel; | ||
| TitleBar _customTitleBar; | ||
|
|
||
| public WindowsTitleBarPage() | ||
| { | ||
| InitializeComponent(); | ||
|
|
||
| _viewModel = new TitleBarSampleViewModel(); | ||
| BindingContext = _viewModel; | ||
|
|
||
| string titleBarXaml = | ||
| """ | ||
| <TitleBar | ||
| xmlns="http://schemas.microsoft.com/dotnet/2021/maui" | ||
| Title="{Binding Title}" | ||
| Subtitle="{Binding Subtitle}" | ||
| IsVisible="{Binding ShowTitleBar}"/> | ||
| """; | ||
|
|
||
| _customTitleBar = new TitleBar().LoadFromXaml(titleBarXaml); | ||
| _customTitleBar.BindingContext = _viewModel; | ||
| } | ||
|
|
||
| protected override void OnAppearing() | ||
| { | ||
| base.OnAppearing(); | ||
| Window.TitleBar = _customTitleBar; | ||
| } | ||
|
|
||
| private void SetIconCheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e) | ||
| { | ||
| if (e.Value) | ||
| { | ||
| _customTitleBar.Icon = "tb_appicon.png"; | ||
| } | ||
| else | ||
| { | ||
| _customTitleBar.Icon = ""; | ||
| } | ||
| } | ||
|
|
||
| private void ColorButton_Clicked(object sender, EventArgs e) | ||
| { | ||
| if (Microsoft.Maui.Graphics.Color.TryParse(ColorTextBox.Text, out var color)) | ||
| { | ||
| _customTitleBar.BackgroundColor = color; | ||
| } | ||
| } | ||
|
|
||
| private void ForegroundColorButton_Clicked(object sender, EventArgs e) | ||
| { | ||
| if (Microsoft.Maui.Graphics.Color.TryParse(ForegroundColorTextBox.Text, out var color)) | ||
| { | ||
| _customTitleBar.ForegroundColor = color; | ||
| } | ||
| } | ||
|
|
||
| private void LeadingCheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e) | ||
| { | ||
| if (e.Value) | ||
| { | ||
| _customTitleBar.LeadingContent = new Button() | ||
| { | ||
| Text = "Leading" | ||
| }; | ||
| } | ||
| else | ||
| { | ||
| _customTitleBar.LeadingContent = null; | ||
| } | ||
| } | ||
|
|
||
| private void ContentCheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e) | ||
| { | ||
| if (e.Value) | ||
| { | ||
| _customTitleBar.Content = new SearchBar() | ||
| { | ||
| Placeholder = "Search", | ||
| MinimumWidthRequest = 200, | ||
| MaximumWidthRequest = 500, | ||
| HeightRequest = 32 | ||
| }; | ||
| } | ||
| else | ||
| { | ||
| _customTitleBar.Content = null; | ||
| } | ||
| } | ||
|
|
||
| private void TrailingCheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e) | ||
| { | ||
| if (e.Value) | ||
| { | ||
| _customTitleBar.TrailingContent = new Border() | ||
| { | ||
| WidthRequest = 32, | ||
| HeightRequest = 32, | ||
| StrokeShape = new Ellipse() { WidthRequest = 32, HeightRequest = 32 }, | ||
| StrokeThickness = 0, | ||
| BackgroundColor = Microsoft.Maui.Graphics.Colors.Azure, | ||
| Content = new Label() | ||
| { | ||
| Text = "MC", | ||
| TextColor = Microsoft.Maui.Graphics.Colors.Black, | ||
| HorizontalOptions = LayoutOptions.Center, | ||
| VerticalOptions = LayoutOptions.Center, | ||
| FontSize = 10 | ||
| } | ||
| }; | ||
| } | ||
| else | ||
| { | ||
| _customTitleBar.TrailingContent = null; | ||
| } | ||
| } | ||
|
|
||
| private void TallModeCheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e) | ||
| { | ||
| if (e.Value) | ||
| { | ||
| _customTitleBar.HeightRequest = 48; | ||
| } | ||
| else | ||
| { | ||
| _customTitleBar.HeightRequest = 32; | ||
| } | ||
| } | ||
| } | ||
| } | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| using System; | ||
| using System.Collections.Generic; | ||
| using System.Linq; | ||
| using System.Text; | ||
| using System.Threading.Tasks; | ||
| using Maui.Controls.Sample.ViewModels.Base; | ||
|
|
||
| namespace Maui.Controls.Sample.ViewModels | ||
|
There was a problem hiding this comment. Would it be better to use file-scope namespaces in new files? |
||
| { | ||
| public class TitleBarSampleViewModel : BaseViewModel | ||
| { | ||
| private string _title = ""; | ||
| public string Title | ||
| { | ||
| get { return _title; } | ||
| set | ||
| { | ||
| _title = value; | ||
| OnPropertyChanged(); | ||
| } | ||
| } | ||
|
|
||
| private string _subtitle = ""; | ||
| public string Subtitle | ||
| { | ||
| get { return _subtitle; } | ||
| set | ||
| { | ||
| _subtitle = value; | ||
| OnPropertyChanged(); | ||
| } | ||
| } | ||
|
|
||
| private bool _showTitleBar = true; | ||
| public bool ShowTitleBar | ||
| { | ||
| get { return _showTitleBar; } | ||
| set | ||
| { | ||
| _showTitleBar = value; | ||
| OnPropertyChanged(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shouldn't this be removed again when the page closes?
It does feel slightly weird to have the contentpage mess with the app-wide window. That might be more appropriate to use AppShell for instead, since that requires to be the root of the window content and hosts pages inside it.