How to Implement Real-Time Preview with the .NET MAUI Color Picker in Drawing Apps?

This article demonstrates how to implement a real-time preview feature in a drawing application using the Syncfusion® .NET MAUI Color Picker.

• In this example, a two-row grid layout is used to build the drawing interface in .NET MAUI.
• The top row contains a horizontal stack with two main sections:
  • a tool selection panel
  • a color picker.
• The tool panel includes interactive icons for Pen, Brush, and Reset, each bound to corresponding event handlers to adjust stroke thickness or clear the canvas.
• The Color Picker (SfColorPicker) is configured in Palette mode and allows users to select a color. This selected color is bound to the StrokeColor property of the drawing canvas (SfSignaturePad) in the second row.
• This setup enables real-time color preview as users draw, enhancing the interactivity and responsiveness of the application.

XAML:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:inputs="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
             xmlns:signaturePad="clr-namespace:Syncfusion.Maui.SignaturePad;assembly=Syncfusion.Maui.SignaturePad"
             xmlns:local="clr-namespace:ColorPickerSample"
             x:Class="ColorPickerSample.MainPage">

    <Grid RowDefinitions="140,*">
        <StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="15">

            <Border Stroke="Gray">
                
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="10" />
                </Border.StrokeShape>
                
                <Grid ColumnDefinitions="45,Auto" RowDefinitions="Auto,Auto,Auto" 
                      ColumnSpacing="50" Margin="15">
                    
                    <!--Pen-->
                    <VerticalStackLayout Grid.Column="0" Grid.Row="0" HorizontalOptions="Center">
                        <Label Text="" FontFamily="MauiMaterialAssets" FontSize="20" 
                               HorizontalOptions="Center" VerticalOptions="Center">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Tapped="PenGestureRecognizerTapped"/>
                            </Label.GestureRecognizers>
                        </Label>
                        <Label Text="Pen" HorizontalOptions="Center"/>
                    </VerticalStackLayout>

                    <!--Brush-->
                    <VerticalStackLayout Grid.Column="1" Grid.Row="0" HorizontalOptions="Center">
                        <Label Text="" FontFamily="MauiMaterialAssets" FontSize="20" 
                               HorizontalOptions="Center" VerticalOptions="Center">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Tapped="BrushGestureRecognizerTapped"/>
                            </Label.GestureRecognizers>
                        </Label>
                        <Label Text="Brush" HorizontalOptions="Center"/>
                    </VerticalStackLayout>

                    <!--Reset-->
                    <VerticalStackLayout Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" 
                                         HorizontalOptions="Center">
                        <Label Text="" FontFamily="MauiMaterialAssets" FontSize="20" 
                               HorizontalOptions="Center" VerticalOptions="Center">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Tapped="ResetTapped"/>
                            </Label.GestureRecognizers>
                        </Label>
                        <Label Text="Reset" HorizontalOptions="Center"/>
                    </VerticalStackLayout>
                    
                </Grid>
            </Border>

            <!--Color Picker-->
            <Border Stroke="Gray">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="10" />
                </Border.StrokeShape>
                <VerticalStackLayout Margin="5,10,5,5">
                    <inputs:SfColorPicker x:Name="colorPicker" ColorMode="Palette"  
                            PaletteRowCount="2" PaletteRowSpacing="5"
                            PaletteColumnSpacing="5" ShowRecentColors="False" 
                            IsColorModeSwitcherVisible="False" IsInline="True" />
                </VerticalStackLayout>
            </Border>

        </StackLayout>

        <!--Drawing Pad-->
        <Border Grid.Row="1" StrokeThickness="1" Stroke="Gray" Margin="15,0,15,15">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="10"/>
            </Border.StrokeShape>

            <signaturePad:SfSignaturePad x:Name="signaturePad" Background ="Transparent"
                          StrokeColor="{Binding Source={x:Reference colorPicker}, Path=SelectedColor}"/>
        </Border>
        
    </Grid>
    
</ContentPage>

C#:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void PenGestureRecognizerTapped(object sender, TappedEventArgs e)
    {
        signaturePad.MaximumStrokeThickness = 2;
    }

    private void BrushGestureRecognizerTapped(object sender, TappedEventArgs e)
    {
        signaturePad.MaximumStrokeThickness = 7;
    }

    private void ResetTapped(object sender, TappedEventArgs e)
    {
        signaturePad.Clear();
    }
}

Output:

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to implement a real-time preview feature in a drawing application using the .NET MAUI Color Picker.

Refer to our .NET MAUI Color Picker feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

If you have any queries or require clarification, please let us know in the comments section below. You can also contact us through our Support Forums, Direct-Trac, or Feedback Portal. We are always happy to assist you!