-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #28 from MADE-Apps/feature/richedittoolbar
#11 - Added RichEditToolbar control
- Loading branch information
Showing
43 changed files
with
1,921 additions
and
6 deletions.
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
Binary file not shown.
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,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. | ||
|
|
||
| <img src="../../images/RichEditToolbar.png" alt="RichEditToolbar with default button options" /> | ||
|
|
||
| ## Example usage | ||
|
|
||
| ```xml | ||
| <Page | ||
| x:Class="ChipBoxSample.MainPage" | ||
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:controls="using:MADE.UI.Controls" | ||
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" | ||
| mc:Ignorable="d"> | ||
|
|
||
| <Grid> | ||
| <Grid.RowDefinitions> | ||
| <RowDefinition Height="Auto" /> | ||
| <RowDefinition Height="*" /> | ||
| </Grid.RowDefinitions> | ||
|
|
||
| <controls:RichEditToolbar | ||
| x:Name="RichEditToolbarControl" | ||
| TargetRichEditBox="{x:Bind RichEditBox}" | ||
| ShowFontSizeOptions="True" | ||
| ShowTextColorOptions="True" | ||
| ShowListStyleOptions="True"> | ||
| <controls:RichEditToolbar.CustomOptions> | ||
| <AppBarSeparator /> | ||
| <AppBarButton x:Name="SaveButton" Icon="Save" Label="Save" /> | ||
| <AppBarButton x:Name="UndoButton" Icon="Undo" Label="Undo" /> | ||
| <AppBarButton x:Name="RedoButton" Icon="Redo" Label="Redo" /> | ||
| </controls:RichEditToolbar.CustomOptions> | ||
| </controls:RichEditToolbar> | ||
|
|
||
| <win:RichEditBox x:Name="RichEditBox" Grid.Row="1" /> | ||
| </Grid> | ||
| </Page> | ||
| ``` | ||
|
|
||
| ## 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 | ||
| <controls:RichEditToolbar> | ||
| <controls:RichEditToolbar.CustomOptions> | ||
| <AppBarButton x:Name="SaveButton" Icon="Save" Label="Save" /> | ||
| <AppBarButton x:Name="UndoButton" Icon="Undo" Label="Undo" /> | ||
| <AppBarButton x:Name="RedoButton" Icon="Redo" Label="Redo" /> | ||
| </controls:RichEditToolbar.CustomOptions> | ||
| </controls:RichEditToolbar> | ||
| ``` | ||
|
|
||
| ### 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<RichEditToolbarTextColorOption> CustomTextColorOptions = | ||
| new List<RichEditToolbarTextColorOption> | ||
| { | ||
| 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`. |
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
2 changes: 2 additions & 0 deletions
2
...MADE.Samples.Shared/Features/Samples/Assets/RichEditToolbar/CustomRichEditToolbarCode.txt
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,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; |
21 changes: 21 additions & 0 deletions
21
...MADE.Samples.Shared/Features/Samples/Assets/RichEditToolbar/CustomRichEditToolbarXaml.txt
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,21 @@ | ||
| <Grid> | ||
| <Grid.RowDefinitions> | ||
| <RowDefinition Height="Auto" /> | ||
| <RowDefinition Height="*" /> | ||
| </Grid.RowDefinitions> | ||
|
|
||
| <made:RichEditToolbar | ||
| x:Name="CustomRichEditToolbarControl" | ||
| ShowFontSizeOptions="True" | ||
| ShowTextColorOptions="True" | ||
| ShowListStyleOptions="True"> | ||
| <made:RichEditToolbar.CustomOptions> | ||
| <AppBarSeparator /> | ||
| <AppBarButton x:Name="SaveButton" Icon="Save" Label="Save" /> | ||
| <AppBarButton x:Name="UndoButton" Icon="Undo" Label="Undo" /> | ||
| <AppBarButton x:Name="RedoButton" Icon="Redo" Label="Redo" /> | ||
| </made:RichEditToolbar.CustomOptions> | ||
| </made:RichEditToolbar> | ||
|
|
||
| <win:RichEditBox x:Name="CustomRichEditBox" Grid.Row="1" /> | ||
| </Grid> |
Binary file added
BIN
+4.35 KB
...MADE.Samples.Shared/Features/Samples/Assets/RichEditToolbar/RichEditToolbar.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
80 changes: 80 additions & 0 deletions
80
samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Pages/RichEditToolbarPage.xaml
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,80 @@ | ||
| <pages:MvvmPage | ||
| x:Class="MADE.Samples.Features.Samples.Pages.RichEditToolbarPage" | ||
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
| xmlns:made="using:MADE.UI.Controls" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| xmlns:pages="using:MADE.UI.Views.Navigation.Pages" | ||
| xmlns:samples="using:MADE.Samples.Infrastructure.Controls" | ||
| xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| mc:Ignorable="d" | ||
| Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> | ||
|
|
||
| <Grid> | ||
| <Grid.RowDefinitions> | ||
| <RowDefinition Height="Auto" /> | ||
| <RowDefinition Height="*" /> | ||
| </Grid.RowDefinitions> | ||
|
|
||
| <win:CommandBar> | ||
| <win:CommandBar.Content> | ||
| <Button | ||
| x:Name="BackButton" | ||
| VerticalAlignment="Top" | ||
| Command="{x:Bind ViewModel.GoBackCommand}" | ||
| IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}" | ||
| Style="{StaticResource NavigationBackButtonNormalStyle}" | ||
| ToolTipService.ToolTip="Back" /> | ||
| </win:CommandBar.Content> | ||
| </win:CommandBar> | ||
|
|
||
| <Grid Grid.Row="1" Padding="16"> | ||
| <Grid.RowDefinitions> | ||
| <RowDefinition Height="Auto" /> | ||
| <RowDefinition Height="Auto" /> | ||
| <RowDefinition Height="*" /> | ||
| </Grid.RowDefinitions> | ||
|
|
||
| <TextBlock | ||
| Margin="0,0,0,16" | ||
| Style="{StaticResource TitleTextBlockStyle}" | ||
| Text="RichEditToolbar control" /> | ||
|
|
||
| <TextBlock | ||
| Grid.Row="1" | ||
| Margin="0,0,0,24" | ||
| Style="{StaticResource BaseTextBlockStyle}" | ||
| Text="The RichEditToolbar is a custom-built UI element that provides customizable and extensible collection of buttons that activate rich text features in an associated RichEditBox." /> | ||
|
|
||
| <ScrollViewer Grid.Row="2"> | ||
| <Grid> | ||
| <samples:SampleControl | ||
| CodeSource="RichEditToolbar/CustomRichEditToolbarCode.txt" | ||
| SampleName="A RichEditToolbar showing standard font style, size, and color options, plus additional buttons" | ||
| XamlSource="RichEditToolbar/CustomRichEditToolbarXaml.txt"> | ||
| <samples:SampleControl.Sample> | ||
| <Grid> | ||
| <Grid.RowDefinitions> | ||
| <RowDefinition Height="Auto" /> | ||
| <RowDefinition Height="*" /> | ||
| </Grid.RowDefinitions> | ||
|
|
||
| <made:RichEditToolbar x:Name="CustomRichEditToolbarControl"> | ||
| <made:RichEditToolbar.CustomOptions> | ||
| <AppBarSeparator /> | ||
| <AppBarButton x:Name="SaveButton" Icon="Save" Label="Save" /> | ||
| <AppBarButton x:Name="UndoButton" Icon="Undo" Label="Undo" /> | ||
| <AppBarButton x:Name="RedoButton" Icon="Redo" Label="Redo" /> | ||
| </made:RichEditToolbar.CustomOptions> | ||
| </made:RichEditToolbar> | ||
|
|
||
| <win:RichEditBox x:Name="CustomRichEditBox" Grid.Row="1" /> | ||
| </Grid> | ||
| </samples:SampleControl.Sample> | ||
| </samples:SampleControl> | ||
| </Grid> | ||
| </ScrollViewer> | ||
| </Grid> | ||
| </Grid> | ||
| </pages:MvvmPage> |
25 changes: 25 additions & 0 deletions
25
samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Pages/RichEditToolbarPage.xaml.cs
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,25 @@ | ||
| namespace MADE.Samples.Features.Samples.Pages | ||
| { | ||
| using CommunityToolkit.Mvvm.Messaging; | ||
| using MADE.Samples.Features.Samples.ViewModels; | ||
| using MADE.UI.Views.Navigation; | ||
| using MADE.UI.Views.Navigation.Pages; | ||
| using Microsoft.Extensions.DependencyInjection; | ||
|
|
||
| public sealed partial class RichEditToolbarPage : MvvmPage | ||
| { | ||
| public RichEditToolbarPage() | ||
| { | ||
| this.InitializeComponent(); | ||
| this.DataContext = new RichEditToolbarPageViewModel( | ||
| App.Services.GetService<INavigationService>(), | ||
| App.Services.GetService<IMessenger>()); | ||
|
|
||
| #if WINDOWS_UWP | ||
| this.CustomRichEditToolbarControl.TargetRichEditBox = this.CustomRichEditBox; | ||
| #endif | ||
| } | ||
|
|
||
| public RichEditToolbarPageViewModel ViewModel => this.DataContext as RichEditToolbarPageViewModel; | ||
| } | ||
| } |
14 changes: 14 additions & 0 deletions
14
...E.Samples/MADE.Samples.Shared/Features/Samples/ViewModels/RichEditToolbarPageViewModel.cs
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,14 @@ | ||
| namespace MADE.Samples.Features.Samples.ViewModels | ||
| { | ||
| using CommunityToolkit.Mvvm.Messaging; | ||
| using MADE.UI.Views.Navigation; | ||
| using MADE.UI.Views.Navigation.ViewModels; | ||
|
|
||
| public class RichEditToolbarPageViewModel : PageViewModel | ||
| { | ||
| public RichEditToolbarPageViewModel(INavigationService navigationService, IMessenger messenger) | ||
| : base(navigationService, messenger) | ||
| { | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.