diff --git a/MADE-Uno.sln b/MADE-Uno.sln index 53284e7..9950765 100644 --- a/MADE-Uno.sln +++ b/MADE-Uno.sln @@ -41,6 +41,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MADE.UI.ViewManagement", "s EndProject Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MADE.UI.Controls.ChipBox", "src\MADE.UI.Controls.ChipBox\MADE.UI.Controls.ChipBox.csproj", "{D1A16208-5A34-4CC1-B175-01B5AC99E69E}" EndProject +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MADE.UI.Controls.RichEditToolbar", "src\MADE.UI.Controls.RichEditToolbar\MADE.UI.Controls.RichEditToolbar.csproj", "{258FB310-DC02-488C-97C7-CD1226EAAEC8}" +EndProject Global GlobalSection(SharedMSBuildProjectFiles) = preSolution samples\MADE.Samples\MADE.Samples.Shared\MADE.Samples.Shared.projitems*{04f1b32d-9056-43fc-b4c2-b8c5481bdacb}*SharedItemsImports = 4 @@ -1032,6 +1034,76 @@ Global {D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|x64.Build.0 = Release|Any CPU {D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|x86.ActiveCfg = Release|Any CPU {D1A16208-5A34-4CC1-B175-01B5AC99E69E}.Release|x86.Build.0 = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|Any CPU.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|Any CPU.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|ARM.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|ARM.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|ARM64.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|ARM64.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|iPhone.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|iPhone.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|iPhoneSimulator.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|iPhoneSimulator.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|x64.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|x64.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|x86.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Ad-Hoc|x86.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|Any CPU.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|Any CPU.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|ARM.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|ARM.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|ARM64.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|ARM64.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|iPhone.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|iPhone.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|iPhoneSimulator.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|iPhoneSimulator.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|x64.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|x64.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|x86.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.AppStore|x86.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|Any CPU.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|ARM.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|ARM.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|ARM64.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|ARM64.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|iPhone.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|iPhone.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|iPhoneSimulator.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|iPhoneSimulator.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|x64.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|x64.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|x86.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Debug|x86.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|Any CPU.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|Any CPU.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|ARM.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|ARM.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|ARM64.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|ARM64.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|iPhone.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|iPhone.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|iPhoneSimulator.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|iPhoneSimulator.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|x64.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|x64.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|x86.ActiveCfg = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Package|x86.Build.0 = Debug|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|Any CPU.ActiveCfg = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|Any CPU.Build.0 = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|ARM.ActiveCfg = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|ARM.Build.0 = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|ARM64.ActiveCfg = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|ARM64.Build.0 = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|iPhone.ActiveCfg = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|iPhone.Build.0 = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|iPhoneSimulator.ActiveCfg = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|iPhoneSimulator.Build.0 = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|x64.ActiveCfg = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|x64.Build.0 = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|x86.ActiveCfg = Release|Any CPU + {258FB310-DC02-488C-97C7-CD1226EAAEC8}.Release|x86.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(SolutionProperties) = preSolution HideSolutionNode = FALSE @@ -1053,6 +1125,7 @@ Global {F8D00106-0598-45E7-B92E-EF408249C02E} = {01380FB8-F8A7-4416-AABA-5407574B7723} {442D1E25-FFD1-405D-A1FC-40CAFCAD190C} = {01380FB8-F8A7-4416-AABA-5407574B7723} {D1A16208-5A34-4CC1-B175-01B5AC99E69E} = {01380FB8-F8A7-4416-AABA-5407574B7723} + {258FB310-DC02-488C-97C7-CD1226EAAEC8} = {01380FB8-F8A7-4416-AABA-5407574B7723} EndGlobalSection GlobalSection(ExtensibilityGlobals) = postSolution SolutionGuid = {3921AD86-E6C0-4436-8880-2D9EDFAD6151} diff --git a/assets/SampleIcons.afdesign b/assets/SampleIcons.afdesign index 601622e..be606b8 100644 Binary files a/assets/SampleIcons.afdesign and b/assets/SampleIcons.afdesign differ diff --git a/docs/articles/features/ui-controls-richedittoolbar.md b/docs/articles/features/ui-controls-richedittoolbar.md new file mode 100644 index 0000000..dac9d74 --- /dev/null +++ b/docs/articles/features/ui-controls-richedittoolbar.md @@ -0,0 +1,125 @@ +--- +uid: package-ui-controls-richedittoolbar +title: Using the RichEditToolbar control +--- + +# Using the RichEditToolbar control + +The `MADE.UI.Controls.RichEditToolbar` element is a custom-built UI element that works with [Uno's supported platforms](https://platform.uno/) that provides customizable and extensible collection of buttons that activate rich text features in an associated [RichEditBox](https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.RichEditBox?view=winrt-22000). + +Shown below is the visuals for the control in its default state. + +RichEditToolbar with default button options + +## Example usage + +```xml + + + + + + + + + + + + + + + + + + + + +``` + +## Supporting Uno Platform + +Unfortunately, Uno Platform doesn't currently support the use of `RichEditBox`. + +The control has been custom built now to structure around the unsupported direct attachment to a `RichEditBox` exposing events that allow a developer to use the control in a different context in Uno Platform applications. + +You can listen for these changes by hooking onto the following `RichEditToolbar` events: + +- FontSizeChanged +- FontStyleChanged +- TextColorChanged +- ListStyleChanged + +These are fired when the user changes the font size, font style, text color, or list style. Each event provides an event argument that provides the new values for that setting. + +## Customizing the ChipBox + +The control has many customization properties that are exposed to tailor the experience for your application. + +### Custom toolbar options + +As well as the out-of-the-box options available, the `RichEditToolbar` allows developers to extend the options with additional custom options. + +These can be added to the `CustomOptions` collection on the control either via XAML or in code. + +```xml + + + + + + + +``` + +### Custom text color options + +Exposed on the `RichEditToolbar` is a `CustomTextColorOptions` property that allows you to provide your own custom set of colors to display in the text color options panel. + +Here's an example of adding these via code. + +```csharp +private static readonly IList CustomTextColorOptions = + new List + { + new() {Name = "Pastel pink", Color = "#ff80ff"}, + new() {Name = "Pastel orange", Color = "#ffc680"}, + new() {Name = "Pastel yellow", Color = "#ffff80"}, + new() {Name = "Pastel green", Color = "#80ff9e"}, + new() {Name = "Pastel blue", Color = "#80d6ff"}, + new() {Name = "Pastel purple", Color = "#bcb3ff"}, + }; + +this.RichEditToolbar.CustomTextColorOptions = this.CustomTextColorOptions; +``` + +### Showing font size options + +By default, font size options are shown to the user when using the control out-of-the-box. + +If these options are not desired, set the `ShowFontSizeOptions` property to `False`. + +### Showing text color options + +By default, text color options are shown to the user when using the control out-of-the-box. + +If these options are not desired, set the `ShowTextColorOptions` property to `False`. + +### Showing list style options + +By default, list style options are shown to the user when using the control out-of-the-box. + +If these options are not desired, set the `ShowListStyleOptions` property to `False`. diff --git a/docs/images/RichEditToolbar.png b/docs/images/RichEditToolbar.png new file mode 100644 index 0000000..99c9dcd Binary files /dev/null and b/docs/images/RichEditToolbar.png differ diff --git a/samples/MADE.Samples/MADE.Samples.Droid/MADE.Samples.Droid.csproj b/samples/MADE.Samples/MADE.Samples.Droid/MADE.Samples.Droid.csproj index 35b84b9..bf04261 100644 --- a/samples/MADE.Samples/MADE.Samples.Droid/MADE.Samples.Droid.csproj +++ b/samples/MADE.Samples/MADE.Samples.Droid/MADE.Samples.Droid.csproj @@ -125,6 +125,10 @@ {774fd8d5-ccc1-4eed-aa14-f7069bfae5ce} MADE.UI.Controls.FilePicker + + {258fb310-dc02-488c-97c7-cd1226eaaec8} + MADE.UI.Controls.RichEditToolbar + {e2b20928-dae2-4a9c-bdaf-d787b4f48391} MADE.UI.Controls.Validator diff --git a/samples/MADE.Samples/MADE.Samples.Shared/Features/Home/ViewModels/MainPageViewModel.cs b/samples/MADE.Samples/MADE.Samples.Shared/Features/Home/ViewModels/MainPageViewModel.cs index 319915d..076b69f 100644 --- a/samples/MADE.Samples/MADE.Samples.Shared/Features/Home/ViewModels/MainPageViewModel.cs +++ b/samples/MADE.Samples/MADE.Samples.Shared/Features/Home/ViewModels/MainPageViewModel.cs @@ -47,7 +47,11 @@ private static ICollection GetSampleGroups() new Sample( "InputValidator", typeof(InputValidatorPage), - "/Features/Samples/Assets/InputValidator/InputValidator.png") + "/Features/Samples/Assets/InputValidator/InputValidator.png"), + new Sample( + "RichEditToolbar", + typeof(RichEditToolbarPage), + "/Features/Samples/Assets/RichEditToolbar/RichEditToolbar.png") } }; diff --git a/samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/RichEditToolbar/CustomRichEditToolbarCode.txt b/samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/RichEditToolbar/CustomRichEditToolbarCode.txt new file mode 100644 index 0000000..658c97c --- /dev/null +++ b/samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/RichEditToolbar/CustomRichEditToolbarCode.txt @@ -0,0 +1,2 @@ +// When used in an Uno Platform app, RichEditBox is not supported so the TargetRichEditBox must be set in code. +this.CustomRichEditToolbarControl.TargetRichEditBox = this.CustomRichEditBox; \ No newline at end of file diff --git a/samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/RichEditToolbar/CustomRichEditToolbarXaml.txt b/samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/RichEditToolbar/CustomRichEditToolbarXaml.txt new file mode 100644 index 0000000..ff741bd --- /dev/null +++ b/samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/RichEditToolbar/CustomRichEditToolbarXaml.txt @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/RichEditToolbar/RichEditToolbar.png b/samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/RichEditToolbar/RichEditToolbar.png new file mode 100644 index 0000000..3afee5d Binary files /dev/null and b/samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/RichEditToolbar/RichEditToolbar.png differ diff --git a/samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Pages/RichEditToolbarPage.xaml b/samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Pages/RichEditToolbarPage.xaml new file mode 100644 index 0000000..6c78502 --- /dev/null +++ b/samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Pages/RichEditToolbarPage.xaml @@ -0,0 +1,80 @@ + + + + + + + + + + +