Merge pull request #147 from Strypper/144-mdc-maui

#144 🚀 mdc-maui
Strypper · Jun 29, 2023 · df43afb · df43afb
2 parents 7861168 + c710d04
commit df43afb
Show file tree

Hide file tree

Showing 40 changed files with 1,586 additions and 10 deletions.
diff --git a/src/App.xaml b/src/App.xaml
@@ -3,10 +3,12 @@
     x:Class="MAUIsland.App"
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-    xmlns:local="clr-namespace:MAUIsland">
+    xmlns:local="clr-namespace:MAUIsland"
+    xmlns:mds="clr-namespace:Material.Components.Maui.Styles;assembly=Material.Components.Maui">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
+                <mds:MaterialStyles />
                 <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                 <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
 

diff --git a/src/Features/Gallery/Models/ControlGroupInfo.cs b/src/Features/Gallery/Models/ControlGroupInfo.cs
@@ -27,4 +27,5 @@ public partial class ControlGroupInfo : BaseModel
     public const string SyncfusionControls = nameof(SyncfusionControls);
     public const string CommunityToolkit = nameof(CommunityToolkit);
     public const string GitHubCommunity = nameof(GitHubCommunity);
+    public const string MaterialComponent = nameof(MaterialComponent);
 }
diff --git a/src/Features/Gallery/Pages/Material/MaterialButton/MaterialButtonControlInfo.cs b/src/Features/Gallery/Pages/Material/MaterialButton/MaterialButtonControlInfo.cs
@@ -0,0 +1,15 @@
+namespace MAUIsland;
+class MaterialButtonControlInfo : IControlInfo
+{
+    public string ControlName => nameof(Material.Components.Maui.Button);
+    public string ControlRoute => typeof(MaterialButtonPage).FullName;
+    public ImageSource ControlIcon => new FontImageSource()
+    {
+        FontFamily = FontNames.FluentSystemIconsRegular,
+        Glyph = FluentUIIcon.Ic_fluent_add_circle_24_regular
+    };
+    public string ControlDetail => "Buttons allow users to take actions, and make choices, with a single tap.";
+    public string GitHubUrl => $"https://github.com/Strypper/mauisland/tree/main/src/Features/Gallery/Pages/Material/{ControlName}";
+    public string DocumentUrl => $"https://mdc-maui.github.io/button";
+    public string GroupName => ControlGroupInfo.MaterialComponent;
+}
diff --git a/src/Features/Gallery/Pages/Material/MaterialButton/MaterialButtonPage.xaml b/src/Features/Gallery/Pages/Material/MaterialButton/MaterialButtonPage.xaml
@@ -0,0 +1,160 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<app:BasePage
+    x:Class="MAUIsland.MaterialButtonPage"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:app="clr-namespace:MAUIsland"
+    xmlns:mdc="clr-namespace:Material.Components.Maui;assembly=Material.Components.Maui"
+    Title="MaterialButton"
+    Padding="10"
+    x:DataType="app:MaterialButtonPageViewModel">
+
+    <app:BasePage.ToolbarItems>
+        <ToolbarItem
+            Command="{x:Binding OpenUrlCommand}"
+            CommandParameter="{x:Binding ControlInformation.GitHubUrl}"
+            IconImageSource="githublogo.png"
+            Text="Source code" />
+        <ToolbarItem
+            Command="{x:Binding OpenUrlCommand}"
+            CommandParameter="{x:Binding ControlInformation.DocumentUrl}"
+            IconImageSource="microsoft.png"
+            Text="Original Document" />
+    </app:BasePage.ToolbarItems>
+
+    <app:BasePage.Resources>
+
+        <x:String x:Key="PropertiesListHeader">
+            MaterialButton defines the following properties:
+        </x:String>
+
+        <x:String x:Key="PropertiesListFooter">
+            These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.
+        </x:String>
+
+        <x:Array x:Key="PropertiesItemsSource" Type="{x:Type x:String}">
+            <x:String>
+                <![CDATA[
+                                <strong style="color:blue">Text</strong>, of type <strong style="color:blue">string</strong>, button's text.
+                            ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+                                <strong style="color:blue">IconKind</strong>, of type <strong style="color:blue">IconKind</strong>, button's icon from iconkind.
+                            ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+                                <strong style="color:blue">IconSource</strong>, of type <strong style="color:blue">SkPicture</strong>, button's icon from file.
+                            ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+                                <strong style="color:blue">IconData</strong>, of type <strong style="color:blue">string</strong>, button's icon from path data.
+                            ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+                                <strong style="color:blue">BackgroundColour</strong>, of type <strong style="color:blue">Color</strong>, button's background color.
+                            ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+                                <strong style="color:blue">ForegroundColor</strong>, of type <strong style="color:blue">Color</strong>, button's foreground color.
+                            ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+                                <strong style="color:blue">FontFamily</strong>, of type <strong style="color:blue">string</strong>, font family of the button's text.
+                            ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+                                <strong style="color:blue">FontSize</strong>, of type <strong style="color:blue">float</strong>, font size of the button's text.
+                            ]]>
+            </x:String>
+
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">FontWeight</strong>, of type <strong style="color:blue">int</strong>, font weight of the button's text.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">FontItalic</strong>, of type <strong style="color:blue">bool</strong>, enable font italic of the button's text.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">Shape</strong>, of type <strong style="color:blue">Shape</strong>, corner radius of the button's border.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">Elevation</strong>, of type <strong style="color:blue">int</strong>, button's elevation.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">OutlineColor</strong>, of type <strong style="color:blue">Color</strong>, button's border color.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">RippleColor</strong>, of type <strong style="color:blue">Color</strong>, button's ripple color.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">ContextMenu</strong>, of type <strong style="color:blue">ContextMenu</strong>, button's context menu.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">Style</strong>, of type <strong style="color:blue">Style</strong>, button's style.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">Command</strong>, of type <strong style="color:blue">ICommand</strong>, executed when the button is clicked.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">CommandParameter</strong>, of type <strong style="color:blue">object</strong>, Command's parameter.
+    ]]>
+            </x:String>
+        </x:Array>
+
+
+    </app:BasePage.Resources>
+
+    <ScrollView>
+        <VerticalStackLayout Spacing="20">
+            <Frame Style="{x:StaticResource DocumentContentFrameStyle}">
+                <Label Text="{x:Binding ControlInformation.ControlDetail}" />
+            </Frame>
+            <Frame Style="{x:StaticResource DocumentContentFrameStyle}">
+                <CollectionView
+                    Footer="{x:StaticResource PropertiesListFooter}"
+                    Header="{x:StaticResource PropertiesListHeader}"
+                    ItemsSource="{x:StaticResource PropertiesItemsSource}"
+                    Style="{x:StaticResource PropertiesListStyle}" />
+            </Frame>
+            <Frame Style="{x:StaticResource DocumentContentFrameStyle}">
+                <VerticalStackLayout Spacing="10">
+                    <Label Style="{x:StaticResource DocumentSectionTitleStyle}" Text="Styles" />
+                    <Label Text="There are 5 Styles of buttons: 1. Elevated, 2. Filled, 3. FilledTonal , 4. Outlined, 5. Text." />
+                    <app:HorizontalWrapLayout Spacing="5">
+                        <mdc:Button Style="{DynamicResource ElevatedButtonStyle}" Text="Elevated" />
+                        <mdc:Button Style="{DynamicResource FilledButtonStyle}" Text="Filled" />
+                        <mdc:Button Style="{DynamicResource FilledTonalButtonStyle}" Text="FilledTonal" />
+                        <mdc:Button Style="{DynamicResource OutlinedButtonStyle}" Text="Outlined" />
+                        <mdc:Button Style="{StaticResource TextButtonStyle}" Text="Text" />
+                    </app:HorizontalWrapLayout>
+                    <app:SourceCodeExpander Code="{x:Binding ButtonXamlCode}" CodeType="Xaml" />
+                </VerticalStackLayout>
+            </Frame>
+        </VerticalStackLayout>
+    </ScrollView>
+</app:BasePage>
diff --git a/src/Features/Gallery/Pages/Material/MaterialButton/MaterialButtonPage.xaml.cs b/src/Features/Gallery/Pages/Material/MaterialButton/MaterialButtonPage.xaml.cs
@@ -0,0 +1,12 @@
+namespace MAUIsland;
+public partial class MaterialButtonPage : IControlPage
+{
+    #region [CTor]
+    public MaterialButtonPage(MaterialButtonPageViewModel vm)
+    {
+        InitializeComponent();
+
+        BindingContext = vm;
+    }
+    #endregion
+}
diff --git a/src/Features/Gallery/Pages/Material/MaterialButton/MaterialButtonPageViewModel.cs b/src/Features/Gallery/Pages/Material/MaterialButton/MaterialButtonPageViewModel.cs
@@ -0,0 +1,35 @@
+namespace MAUIsland;
+public partial class MaterialButtonPageViewModel : NavigationAwareBaseViewModel
+{
+    #region [CTor]
+    public MaterialButtonPageViewModel(
+        IAppNavigator appNavigator
+    ) : base(appNavigator)
+    {
+    }
+    #endregion
+
+    #region [Properties]
+    [ObservableProperty]
+    IControlInfo controlInformation;
+
+    [ObservableProperty]
+    string buttonXamlCode = "<mdc:Button Style=\"{DynamicResource ElevatedButtonStyle}\" Text=\"Elevated\" />\r\n<mdc:Button Style=\"{DynamicResource FilledButtonStyle}\" Text=\"Filled\" />\r\n<mdc:Button Style=\"{DynamicResource FilledTonalButtonStyle}\" Text=\"FilledTonal\" />\r\n<mdc:Button Style=\"{DynamicResource OutlinedButtonStyle}\" Text=\"Outlined\" />\r\n<mdc:Button Style=\"{StaticResource TextButtonStyle}\" Text=\"Text\" />\r\n";
+    #endregion
+
+    #region [Overrides]
+    protected override void OnInit(IDictionary<string, object> query)
+    {
+        base.OnInit(query);
+
+        ControlInformation = query.GetData<IControlInfo>();
+
+    }
+    #endregion
+
+    #region [ Relay Commands ]
+    [RelayCommand]
+    Task OpenUrlAsync(string url)
+    => AppNavigator.OpenUrlAsync(url);
+    #endregion
+}
diff --git a/src/Features/Gallery/Pages/Material/MaterialChip/MaterialChipControlInfo.cs b/src/Features/Gallery/Pages/Material/MaterialChip/MaterialChipControlInfo.cs
@@ -0,0 +1,17 @@
+using Material.Components.Maui;
+
+namespace MAUIsland;
+class MaterialChipControlInfo : IControlInfo
+{
+    public string ControlName => nameof(Chip);
+    public string ControlRoute => typeof(MaterialChipPage).FullName;
+    public ImageSource ControlIcon => new FontImageSource()
+    {
+        FontFamily = FontNames.FluentSystemIconsRegular,
+        Glyph = FluentUIIcon.Ic_fluent_oval_24_regular
+    };
+    public string ControlDetail => "Chips are compact elements that represent an input, attribute, or action.";
+    public string GitHubUrl => $"https://github.com/Strypper/mauisland/tree/main/src/Features/Gallery/Pages/Material/{ControlName}";
+    public string DocumentUrl => $"https://mdc-maui.github.io/chip";
+    public string GroupName => ControlGroupInfo.MaterialComponent;
+}
diff --git a/src/Features/Gallery/Pages/Material/MaterialChip/MaterialChipPage.xaml b/src/Features/Gallery/Pages/Material/MaterialChip/MaterialChipPage.xaml
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<app:BasePage
+    x:Class="MAUIsland.MaterialChipPage"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:app="clr-namespace:MAUIsland"
+    xmlns:mdc="clr-namespace:Material.Components.Maui;assembly=Material.Components.Maui"
+    Title="MaterialChip"
+    Padding="10"
+    x:DataType="app:MaterialChipPageViewModel">
+
+    <app:BasePage.ToolbarItems>
+        <ToolbarItem
+            Command="{x:Binding OpenUrlCommand}"
+            CommandParameter="{x:Binding ControlInformation.GitHubUrl}"
+            IconImageSource="github.png"
+            Text="Source code" />
+        <ToolbarItem
+            Command="{x:Binding OpenUrlCommand}"
+            CommandParameter="{x:Binding ControlInformation.DocumentUrl}"
+            IconImageSource="microsoft.png"
+            Text="Original Document" />
+    </app:BasePage.ToolbarItems>
+
+    <app:BasePage.Resources>
+
+        <x:String x:Key="PropertiesListHeader">
+            MaterialChip defines the following properties:
+        </x:String>
+
+        <x:String x:Key="PropertiesListFooter">
+            These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.
+        </x:String>
+
+        <x:Array x:Key="PropertiesItemsSource" Type="{x:Type x:String}">
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">IsChecked</strong>, of type <strong style="color:blue">bool</strong>, Switch's selected state.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">HasIcon</strong>, of type <strong style="color:blue">bool</strong>, enable check-mark icon of the Switch.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">TrackColor</strong>, of type <strong style="color:blue">Color</strong>, Switch's track color.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">ThumbColor</strong>, of type <strong style="color:blue">Color</strong>, Switch's thumb color.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">Shape</strong>, of type <strong style="color:blue">Shape</strong>, corner radius of the Switch's border.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">OutlineColor</strong>, of type <strong style="color:blue">Color</strong>, Switch's border color.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">RippleColor</strong>, of type <strong style="color:blue">Color</strong>, Switch's ripple color.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">Command</strong>, of type <strong style="color:blue">ICommand</strong>, executed when the Switch is CheckedChanged.
+    ]]>
+            </x:String>
+            <x:String>
+                <![CDATA[
+        <strong style="color:blue">CommandParameter</strong>, of type <strong style="color:blue">object</strong>, Command's parameter.
+    ]]>
+            </x:String>
+        </x:Array>
+
+
+    </app:BasePage.Resources>
+
+    <ScrollView>
+        <VerticalStackLayout Spacing="20">
+            <Frame Style="{x:StaticResource DocumentContentFrameStyle}">
+                <Label Text="{x:Binding ControlInformation.ControlDetail}" />
+            </Frame>
+            <Frame Style="{x:StaticResource DocumentContentFrameStyle}">
+                <CollectionView
+                    Footer="{x:StaticResource PropertiesListFooter}"
+                    Header="{x:StaticResource PropertiesListHeader}"
+                    ItemsSource="{x:StaticResource PropertiesItemsSource}"
+                    Style="{x:StaticResource PropertiesListStyle}" />
+            </Frame>
+            <Frame Style="{x:StaticResource DocumentContentFrameStyle}">
+                <VerticalStackLayout Spacing="10">
+                    <Label Style="{x:StaticResource DocumentSectionTitleStyle}" Text="Styles" />
+                    <Label Text="There are 7 styles of chips: 1. Assist, 2. AssistElevated, 3. Filter, 4. FilterElevated 5. Input, 6. Suggestion, 7. SuggestionElevated." />
+                    <app:HorizontalWrapLayout Spacing="5">
+                        <mdc:Chip Style="{DynamicResource AssistChipStyle}" Text="chip" />
+                        <mdc:Chip Style="{DynamicResource AssistElevatedChipStyle}" Text="chip" />
+                        <mdc:Chip Style="{DynamicResource FilterChipStyle}" Text="chip" />
+                        <mdc:Chip Style="{DynamicResource FilterElevatedChipStyle}" Text="chip" />
+                        <mdc:Chip Style="{DynamicResource InputChipStyle}" Text="chip" />
+                        <mdc:Chip Style="{DynamicResource SuggestionChipStyle}" Text="chip" />
+                        <mdc:Chip Style="{DynamicResource SuggestionElevatedChipStyle}" Text="chip" />
+                    </app:HorizontalWrapLayout>
+                    <app:SourceCodeExpander Code="{x:Binding ChipXamlCode}" CodeType="Xaml" />
+                </VerticalStackLayout>
+            </Frame>
+        </VerticalStackLayout>
+    </ScrollView>
+</app:BasePage>