MainWindow.xaml

<Window x:Class="ColorPicker_RadialGradient.MainWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ColorPicker_RadialGradient"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        xmlns:syncfusion1="clr-namespace:Syncfusion.Windows.Tools;assembly=Syncfusion.Shared.Wpf"
        mc:Ignorable="d" WindowStartupLocation="CenterScreen"
        Title="MainWindow" Width="850" Height="700">
    <Window.DataContext>
        <local:ViewModel></local:ViewModel>
    </Window.DataContext>

    <Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Border Margin="0"  Grid.Row="1">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="100"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Rectangle Fill="{Binding SelectedBrush,Mode=TwoWay}"
                           Width="50" Height="50" Grid.Row="0"></Rectangle>
                <syncfusion:ColorPicker x:Name="colorPicker" Margin="20"
                                        Brush="{Binding SelectedBrush,Mode=TwoWay}"
                                        BrushMode="{Binding BrushModes, Mode=TwoWay}"
                                        Color="{Binding SelectedColor, Mode=TwoWay}"
                                        EnableSolidToGradientSwitch="{Binding EnableSolidToGradientSwitch, Mode=TwoWay}"
                                        GradientBrushDisplayMode="{Binding GradientBrushDisplayMode, Mode=TwoWay}"
                                        GradientPropertyEditorMode="{Binding GradientPropertyEditorMode, Mode=TwoWay}"                               
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Top"  
                                        Width="200"
                                        Height="30"
                                        Grid.Row="2" >
                </syncfusion:ColorPicker>
            </Grid>
        </Border>

        <GroupBox Margin="0,0,3,3" FontWeight="Bold" FontSize="14" FontFamily="Segoe UI" Grid.Column="1" BorderBrush="Silver" Header="User Options">
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="220"></ColumnDefinition>
                    <ColumnDefinition Width="150" ></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <TextBlock FontWeight="Normal" FontFamily="Segoe UI" FontSize="13" Margin="3" Text ="Brush Modes" Grid.Row="0" VerticalAlignment="Center" Grid.Column="0"/>
                <ComboBox FontWeight="Normal" FontFamily="Segoe UI" FontSize="13" Grid.Row="0" Grid.Column="1" SelectedItem="{Binding BrushModes, Mode=TwoWay}"  SelectedIndex="1" VerticalAlignment="Center" Margin="3" Name="button" >
                    <syncfusion1:BrushModes>Solid</syncfusion1:BrushModes>
                    <syncfusion1:BrushModes>Gradient</syncfusion1:BrushModes>
                </ComboBox>

                <TextBlock FontWeight="Normal" FontFamily="Segoe UI" FontSize="13" Margin="3" Text ="GradientBrushDisplayMode"  Grid.Row="1"  Grid.Column="0"/>
                <ComboBox  FontWeight="Normal" FontFamily="Segoe UI" FontSize="13" SelectedItem="{Binding GradientBrushDisplayMode, Mode=TwoWay}" Grid.Row="1" Grid.Column="1" Margin="3" Name="grouping"  >
                    <syncfusion1:GradientBrushDisplayMode>Default</syncfusion1:GradientBrushDisplayMode>
                    <syncfusion1:GradientBrushDisplayMode>Extended</syncfusion1:GradientBrushDisplayMode>
                </ComboBox>

                <TextBlock FontWeight="Normal" FontFamily="Segoe UI" FontSize="13" Margin="3" Text ="GradientPropertyEditorMode"  Grid.Row="2"  Grid.Column="0"/>
                <ComboBox  FontWeight="Normal" FontFamily="Segoe UI" FontSize="13" SelectedItem="{Binding GradientPropertyEditorMode, Mode=TwoWay}" Grid.Row="2" Grid.Column="1" Margin="3" Name="GradientPropertyEditor"  >
                    <syncfusion1:GradientPropertyEditorMode>Popup</syncfusion1:GradientPropertyEditorMode>
                    <syncfusion1:GradientPropertyEditorMode>Extended</syncfusion1:GradientPropertyEditorMode>
                </ComboBox>

                <TextBlock FontWeight="Normal" FontFamily="Segoe UI" FontSize="13" Margin="3" Text ="EnableSolidToGradientSwitch"  Grid.Row="3" />
                <CheckBox FontWeight="Normal" FontFamily="Segoe UI" FontSize="13" Grid.Row="3" Grid.Column="1" IsChecked="{Binding EnableSolidToGradientSwitch, Mode=TwoWay}" Margin="3" Name="search" />

            </Grid>
        </GroupBox>
    </Grid>
</Window>