diff --git a/samples/CommunityToolkit.Maui.Markup.Sample/Constants/ColorConstants.cs b/samples/CommunityToolkit.Maui.Markup.Sample/Constants/ColorConstants.cs index fb429ba6..e62d1fa3 100644 --- a/samples/CommunityToolkit.Maui.Markup.Sample/Constants/ColorConstants.cs +++ b/samples/CommunityToolkit.Maui.Markup.Sample/Constants/ColorConstants.cs @@ -9,8 +9,8 @@ static class ColorConstants public static Color NavigationBarBackgroundColor { get; } = Color.FromArgb("FF6601"); public static Color NavigationBarTextColor { get; } = Colors.Black; - public static Color SecondaryColor { get; } = Color.FromArgb("828282"); public static Color PrimaryTextColor { get; } = Colors.Black; + public static Color SecondaryTextColor { get; } = Color.FromArgb("828282"); public static Color BrowserNavigationBarBackgroundColor { get; } = Color.FromArgb("FFE6D5"); public static Color BrowserNavigationBarTextColor { get; } = Color.FromArgb("3F3F3F"); diff --git a/samples/CommunityToolkit.Maui.Markup.Sample/MauiProgram.cs b/samples/CommunityToolkit.Maui.Markup.Sample/MauiProgram.cs index 03c965bc..cc67f8c2 100644 --- a/samples/CommunityToolkit.Maui.Markup.Sample/MauiProgram.cs +++ b/samples/CommunityToolkit.Maui.Markup.Sample/MauiProgram.cs @@ -17,7 +17,10 @@ public static MauiApp Create() var builder = MauiApp.CreateBuilder() .UseMauiApp() .UseMauiCommunityToolkit() - .UseMauiCommunityToolkitMarkup(); + .UseMauiCommunityToolkitMarkup(); + + // Fonts + builder.ConfigureFonts(fonts => fonts.AddFont("FontAwesome.otf", "FontAwesome")); // Maui.Essentials builder.Services.AddSingleton(Browser.Default); @@ -32,10 +35,12 @@ public static MauiApp Create() // View Models builder.Services.AddTransient(); builder.Services.AddTransient(); + builder.Services.AddTransient(); // Pages builder.Services.AddTransient(); - builder.Services.AddTransient(); + builder.Services.AddTransient(); + builder.Services.AddTransient(); return builder.Build(); } diff --git a/samples/CommunityToolkit.Maui.Markup.Sample/Pages/NewsDetailPage.cs b/samples/CommunityToolkit.Maui.Markup.Sample/Pages/NewsDetailPage.cs new file mode 100644 index 00000000..6a5e5000 --- /dev/null +++ b/samples/CommunityToolkit.Maui.Markup.Sample/Pages/NewsDetailPage.cs @@ -0,0 +1,41 @@ +using Microsoft.Maui.Layouts; +using CommunityToolkit.Maui.Markup; +using Microsoft.Maui.Controls; +using Microsoft.Maui.Graphics; +using CommunityToolkit.Maui.Markup.Sample.Pages.Base; +using CommunityToolkit.Maui.Markup.Sample.ViewModels; +using CommunityToolkit.Maui.Markup.Sample.Constants; + +namespace CommunityToolkit.Maui.Markup.Sample.Pages; + +class NewsDetailPage : BaseContentPage +{ + public NewsDetailPage(NewsDetailViewModel newsDetailViewModel) : base(newsDetailViewModel, newsDetailViewModel.Title) + { + Content = new FlexLayout + { + Direction = FlexDirection.Column, + AlignContent = FlexAlignContent.Center, + + Children = + { + new WebView() + .Grow(1).AlignSelf(FlexAlignSelf.Stretch) + .Bind(WebView.SourceProperty, nameof(NewsDetailViewModel.Uri), BindingMode.OneTime), + + new Button { BackgroundColor = ColorConstants.NavigationBarBackgroundColor } + .Text("Launch in Browser \uf35d", ColorConstants.PrimaryTextColor) + .Font(size: 20, family: "FontAwesome") + .Basis(50) + .Bind(Button.CommandProperty, nameof(NewsDetailViewModel.OpenBrowserCommand)), + + new Label { BackgroundColor = ColorConstants.NavigationBarBackgroundColor } + .TextColor(ColorConstants.PrimaryTextColor).TextCenter() + .AlignSelf(FlexAlignSelf.Stretch) + .Paddings(bottom: 20) + .Bind(Label.TextProperty, nameof(NewsDetailViewModel.ScoreDescription), BindingMode.OneTime), + } + }; + } +} + diff --git a/samples/CommunityToolkit.Maui.Markup.Sample/Pages/NewsPage.cs b/samples/CommunityToolkit.Maui.Markup.Sample/Pages/NewsPage.cs index 0fd266e6..5a4b8412 100644 --- a/samples/CommunityToolkit.Maui.Markup.Sample/Pages/NewsPage.cs +++ b/samples/CommunityToolkit.Maui.Markup.Sample/Pages/NewsPage.cs @@ -32,7 +32,7 @@ public NewsPage(IBrowser browser, BindingContext.PullToRefreshFailed += HandlePullToRefreshFailed; - ToolbarItems.Add(new ToolbarItem { Command = new AsyncRelayCommand(ShowSettings, true) }.Text("Settings")); + ToolbarItems.Add(new ToolbarItem { Command = new AsyncRelayCommand(NavigateToSettingsPage, true) }.Text("Settings")); Content = new RefreshView { @@ -77,13 +77,7 @@ async void HandleSelectionChanged(object? sender, SelectionChangedEventArgs e) { if (!string.IsNullOrEmpty(storyModel.Url)) { - var browserOptions = new BrowserLaunchOptions - { - PreferredControlColor = ColorConstants.BrowserNavigationBarTextColor, - PreferredToolbarColor = ColorConstants.BrowserNavigationBarBackgroundColor - }; - - await browser.OpenAsync(storyModel.Url, browserOptions); + await NavigateToNewsDetailPage(storyModel); } else { @@ -95,5 +89,6 @@ async void HandleSelectionChanged(object? sender, SelectionChangedEventArgs e) async void HandlePullToRefreshFailed(object? sender, string message) => await dispatcher.DispatchAsync(() => DisplayAlert("Refresh Failed", message, "OK")); - Task ShowSettings() => dispatcher.DispatchAsync(() => Navigation.PushAsync(settingsPage)); + Task NavigateToSettingsPage() => dispatcher.DispatchAsync(() => Navigation.PushAsync(settingsPage)); + Task NavigateToNewsDetailPage(StoryModel storyModel) => dispatcher.DispatchAsync(() => Navigation.PushAsync(new NewsDetailPage(new NewsDetailViewModel(storyModel, browser)))); } \ No newline at end of file diff --git a/samples/CommunityToolkit.Maui.Markup.Sample/Resources/Fonts/FontAwesome.otf b/samples/CommunityToolkit.Maui.Markup.Sample/Resources/Fonts/FontAwesome.otf new file mode 100644 index 00000000..9d8a0e62 Binary files /dev/null and b/samples/CommunityToolkit.Maui.Markup.Sample/Resources/Fonts/FontAwesome.otf differ diff --git a/samples/CommunityToolkit.Maui.Markup.Sample/ViewModels/NewsDetailViewModel.cs b/samples/CommunityToolkit.Maui.Markup.Sample/ViewModels/NewsDetailViewModel.cs new file mode 100644 index 00000000..2ac0c845 --- /dev/null +++ b/samples/CommunityToolkit.Maui.Markup.Sample/ViewModels/NewsDetailViewModel.cs @@ -0,0 +1,47 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Text; +using System.Threading.Tasks; +using System.Windows.Input; +using CommunityToolkit.Maui.Markup.Sample.Constants; +using CommunityToolkit.Maui.Markup.Sample.Models; +using CommunityToolkit.Maui.Markup.Sample.ViewModels.Base; +using CommunityToolkit.Mvvm.Input; +using Microsoft.Maui.ApplicationModel; +using Microsoft.Maui.Controls; + +namespace CommunityToolkit.Maui.Markup.Sample.ViewModels; + +class NewsDetailViewModel : BaseViewModel +{ + readonly IBrowser browser; + + public NewsDetailViewModel(StoryModel storyModel, IBrowser browser) + { + this.browser = browser; + + Uri = new Uri(storyModel.Url); + Title = storyModel.Title; + ScoreDescription = storyModel.ToString(); + + OpenBrowserCommand = new AsyncRelayCommand(ExecuteOpenBrowserCommand); + } + + public Uri Uri { get; } + public string Title { get; } + public string ScoreDescription { get; } + + public ICommand OpenBrowserCommand { get; } + + Task ExecuteOpenBrowserCommand() + { + var browserOptions = new BrowserLaunchOptions + { + PreferredControlColor = ColorConstants.BrowserNavigationBarTextColor, + PreferredToolbarColor = ColorConstants.BrowserNavigationBarBackgroundColor + }; + + return browser.OpenAsync(Uri, browserOptions); + } +} diff --git a/samples/CommunityToolkit.Maui.Markup.Sample/Views/News/StoryDataTemplate.cs b/samples/CommunityToolkit.Maui.Markup.Sample/Views/News/StoryDataTemplate.cs index 9300e2b1..51216c92 100644 --- a/samples/CommunityToolkit.Maui.Markup.Sample/Views/News/StoryDataTemplate.cs +++ b/samples/CommunityToolkit.Maui.Markup.Sample/Views/News/StoryDataTemplate.cs @@ -30,7 +30,7 @@ public StoryDataTemplate() : base(CreateGrid) .Bind(Label.TextProperty, nameof(StoryModel.Title)), new Label().Row(Row.Description) - .Font(size: 13).TextColor(ColorConstants.SecondaryColor) + .Font(size: 13).TextColor(ColorConstants.SecondaryTextColor) .Paddings(10, 0, 10, 5) .Bind(Label.TextProperty, nameof(StoryModel.Description)) } diff --git a/src/CommunityToolkit.Maui.Markup.UnitTests/FlexLayoutExtensionsTests.cs b/src/CommunityToolkit.Maui.Markup.UnitTests/FlexLayoutExtensionsTests.cs index eafc338f..7c20dde8 100644 --- a/src/CommunityToolkit.Maui.Markup.UnitTests/FlexLayoutExtensionsTests.cs +++ b/src/CommunityToolkit.Maui.Markup.UnitTests/FlexLayoutExtensionsTests.cs @@ -26,6 +26,18 @@ public void Basis() Assert.That(FlexLayout.GetBasis(Bindable), Is.EqualTo(new FlexBasis(50))); } + [Test] + public void BasisWithPrimitives() + { + FlexLayout.SetBasis(Bindable, FlexBasis.Auto); + Bindable.Basis(0.5f, true); + + Assert.That(FlexLayout.GetBasis(Bindable), Is.EqualTo(new FlexBasis(0.5f, true))); + + Bindable.Basis(55, false); + Assert.That(FlexLayout.GetBasis(Bindable), Is.EqualTo(new FlexBasis(55, false))); + } + [Test] public void Grow() { diff --git a/src/CommunityToolkit.Maui.Markup/FlexLayoutExtensions.cs b/src/CommunityToolkit.Maui.Markup/FlexLayoutExtensions.cs index dbeb143f..f6824f6b 100644 --- a/src/CommunityToolkit.Maui.Markup/FlexLayoutExtensions.cs +++ b/src/CommunityToolkit.Maui.Markup/FlexLayoutExtensions.cs @@ -9,7 +9,7 @@ namespace CommunityToolkit.Maui.Markup; public static class FlexLayoutExtensions { /// - /// Set AlignSelf + /// Set the that indicates how the child is aligned on the cross axis. Setting this property overrides the property set on the itself /// /// /// @@ -22,7 +22,7 @@ public static TBindable AlignSelf(this TBindable bindable, FlexAlignS } /// - /// Set Basis + /// Set the that indicates the amount of space that is allocated to a child of the on the main axis. The size can be specified in device-independent units, as a percentage of the size of the or based on the child's requested width or height. /// /// /// @@ -35,7 +35,20 @@ public static TBindable Basis(this TBindable bindable, FlexBasis valu } /// - /// Set Grow + /// Set the that indicates the amount of space that is allocated to a child of the on the main axis. The size can be specified in device-independent units when is , or as a percentage of the size of the when is . + /// + /// + /// + /// + /// + /// + public static TBindable Basis(this TBindable bindable, float length, bool isRelative) where TBindable : BindableObject + { + return bindable.Basis(new FlexBasis(length, isRelative)); + } + + /// + /// Set the that indicates the amount of available space a child should use on the main axis of the /// /// /// @@ -48,7 +61,7 @@ public static TBindable Grow(this TBindable bindable, float value) wh } /// - /// Set Order + /// Set the that indicates the order a child laid out in a . Setting this property overrides the order that it appears in the collection /// /// /// @@ -61,7 +74,7 @@ public static TBindable Order(this TBindable bindable, int value) whe } /// - /// Set Shrink + /// Set the that indicates the priority a child is given in being displayed at its full size, when the total sizes of is greater than the size of on its main axis. /// /// ///