Articles in this section
Category / Section

How to customize the Context menu in WPF Schedule?

8 mins read

Context Menu can easily be customized by overriding the default Context menu of the control. This article explains how you can customize the default menu that is used in SfSchedule.

Customizing the Popup menu in SfSchedule

Create a WPF application and add SfSchedule control in it.

XAML

                         <syncfusion:SfSchedule  x:Name="Schedule" 
                               ScheduleType="Day"/>

You can display a popup containing Radial Menu with all the actions that the default menu of the Schedule has.

Using the Icon property of the RadialMenu, you can customize the icons displayed in the center of RadialMenu circle.

Refer to the following code example with customized SfRadialMenuItem.

XAML

<Popup x:Name="RadialPopup" shared:SkinStorage.VisualStyle="Metro" Placement="MousePoint" AllowsTransparency="True" IsOpen="False">
            <radialmenu:SfRadialMenu x:Name="radialMenu" RimBackground="#FF28A5DB" RimRadiusFactor="0.9" 
                                     IsOpen="False" Background="White" BorderBrush="Green" Padding="5"
                                     RadiusX="100" RadiusY="100"
                                     EnableFreeRotation="True" Visibility="Visible">
                <radialmenu:SfRadialMenu.Icon>
                    <Ellipse x:Name="centerRim" Fill="White" Stroke="Black" StrokeThickness="2" Height="30" Width="30"/>
                </radialmenu:SfRadialMenu.Icon>
                <radialmenu:SfRadialMenu.RenderTransform>
                    <TranslateTransform x:Name="transform2"/>
                </radialmenu:SfRadialMenu.RenderTransform>
                <radialmenu:SfRadialMenuItem  Click="addButton_Click" CheckMode="None"   >
                    <radialmenu:SfRadialMenuItem.Header>
                        <Border Background="Transparent" >
                            <StackPanel Margin="10,10,0,0">
                                <Path x:Name="path1" Width="25" UseLayoutRounding="False" Stretch="Fill" RenderTransformOrigin="0.5,0.5" Opacity="1" Height="25" Fill="Black" Data="M19.833,0L32.5,0 32.5,19.833999 52.334,19.833999 52.334,32.500999 32.5,32.500999 32.5,52.333 19.833,52.333 19.833,32.500999 0,32.500999 0,19.833999 19.833,19.833999z"/>
                                <TextBlock   Text="Add"/>
                            </StackPanel>
                        </Border>
                    </radialmenu:SfRadialMenuItem.Header>
                </radialmenu:SfRadialMenuItem>
                <radialmenu:SfRadialMenuItem  Click="editButton_Click"  CheckMode="None"   >
                    <radialmenu:SfRadialMenuItem.Header>
                        <Border Background="Transparent" Padding="5">
                            <StackPanel>
                                <Path Width="20"  UseLayoutRounding="False" Stretch="Fill" RenderTransformOrigin="0.5,0.5" Opacity="1" Height="25" Fill="Black" Data="M0,44.439791L18.98951,54.569246 0.47998798,62.66881z M17.428029,12.359973L36.955557,23.568769 21.957478,49.686174 20.847757,46.346189 15.11851,45.756407 14.138656,42.166935 8.5292659,41.966761 6.9493899,38.037481 2.4399572,38.477377z M26.812517,0.0009765625C27.350616,-0.012230873,27.875986,0.10826397,28.348372,0.3782568L42.175028,8.3180408C43.85462,9.2780154,44.234529,11.777948,43.02482,13.89789L41.375219,16.767812 21.460039,5.3381228 23.10964,2.4582005C23.979116,0.941679,25.437378,0.034730911,26.812517,0.0009765625zz"  />
                                <TextBlock  Text="Edit"/>
                            </StackPanel>
                        </Border>
                    </radialmenu:SfRadialMenuItem.Header>
                </radialmenu:SfRadialMenuItem>
                <radialmenu:SfRadialMenuItem Click="copyButton_Click"  CheckMode="None"  >
                    <radialmenu:SfRadialMenuItem.Header>
                        <Border Background="Transparent" Padding="5">
                            <StackPanel>
                                <Path Width="20" UseLayoutRounding="False" Stretch="Fill" RenderTransformOrigin="0.5,0.5" Opacity="1" Height="25" Fill="Black" Data="M31.687001,23.116L31.687001,31.394341C31.687001,31.394341,31.526705,36.832023,25.52624,36.359949L18.506,36.388395 18.506,49.587002 18.506001,54.153999 18.506,59.292614C18.506,59.812107,18.929218,60.233997,19.448625,60.233997L45.808704,60.233997C46.326101,60.233997,46.749998,59.812107,46.749998,59.292614L46.749998,24.057384C46.749998,23.539322,46.326101,23.116,45.808704,23.116z M20.552001,4.5669994L20.552001,14.60861C20.552001,14.60861,20.358706,21.203206,13.080177,20.631915L4.565999,20.665694 4.565999,48.4459C4.566,49.076302,5.0797424,49.587002,5.7100554,49.587002L14.742001,49.587002 14.742001,35.400336 18.161097,31.792807 18.166127,31.774705 26.474542,22.972 26.521163,22.972 29.953973,19.349999 38.822001,19.349999 38.822001,5.7076302C38.822001,5.0806808,38.309198,4.5669994,37.680792,4.5669994z M18.449971,0L37.680651,0C40.833681,0,43.391001,2.5571156,43.391001,5.707489L43.391001,19.349999 45.80884,19.349999C48.409018,19.35,50.517,21.458894,50.517,24.05704L50.517,59.292992C50.517,61.893593,48.409018,64,45.80884,64L19.448812,64C16.849223,64,14.742,61.893593,14.742001,59.292992L14.742001,54.153999 5.709774,54.153999C2.555994,54.153999,0,51.599316,0,48.445534L0,19.465691 4.1473293,15.090039 4.1532602,15.068708 14.229262,4.3929996 14.286199,4.3929996z"/>
                                <TextBlock  Text="Copy"/>
                            </StackPanel>
                        </Border>
                    </radialmenu:SfRadialMenuItem.Header>
                </radialmenu:SfRadialMenuItem>
                <radialmenu:SfRadialMenuItem   Click="pasteButton_Click" CheckMode="None"  >
                    <radialmenu:SfRadialMenuItem.Header>
                        <Border Background="Transparent" Padding="5">
                            <StackPanel>
                                <Path  Width="20" UseLayoutRounding="False" Stretch="Fill" RenderTransformOrigin="0.5,0.5" Opacity="1" Height="24" Fill="Black" Data="M31.948999,57.859001L45.188999,57.859001 45.188999,59.699001 31.948999,59.699001z M31.948999,51.950001L45.188999,51.950001 45.188999,53.791 31.948999,53.791z M28.396044,35.408001C28.009256,35.408001,27.689001,35.726357,27.689001,36.116974L27.689001,62.648006C27.689001,63.039406,28.009256,63.357002,28.396044,63.357002L48.248085,63.357002C48.638691,63.357002,48.957001,63.039406,48.957001,62.648006L48.957001,45.402447 43.671608,45.381203C39.153995,45.736,39.033001,41.642223,39.033001,41.642223L39.033001,35.408001z M28.395853,32.571999L40.336986,32.571999 42.92213,35.299999 42.958431,35.299999 49.212662,41.928822 49.216327,41.942017 51.790001,44.657917 51.790001,62.648022C51.790001,64.605804,50.204025,66.191002,48.247158,66.191002L28.395853,66.191002C26.438854,66.191002,24.853,64.605804,24.853,62.648022L24.853,36.116901C24.853,34.16061,26.438854,32.571999,28.395853,32.571999z M23.4165,2.7189999C21.472765,2.7190001 19.896,4.211246 19.896,6.0526261 19.896,7.8918042 21.472765,9.3859997 23.4165,9.3859997 25.360433,9.3859997 26.936998,7.8918042 26.936998,6.0526261 26.936998,4.211246 25.360433,2.7190001 23.4165,2.7189999z M23.4165,0C26.836176,0,29.627563,2.5418639,29.798687,5.7406974L29.806993,6.0519996 35.229999,6.0519996 35.229999,7.9879994 46.833999,7.9879994 46.833999,34.156097 41.895698,28.945999 41.695999,28.945999 41.695999,14.389 35.229999,14.389 35.229999,20.865 11.604001,20.865 11.604001,14.389 5.136998,14.389 5.136998,59.294998 21.228,59.294998 21.228,62.648151C21.228,63.142387,21.27823,63.625092,21.373855,64.091423L21.431106,64.338997 0,64.338997 0,7.9879994 11.604001,7.9879994 11.604001,6.0519996 17.026007,6.0519996 17.034315,5.7406974C17.205442,2.5418639,19.996919,0,23.4165,0z"/>
                                <TextBlock Text="Paste"/>
                            </StackPanel>
                        </Border>
                    </radialmenu:SfRadialMenuItem.Header>
                </radialmenu:SfRadialMenuItem>
                <radialmenu:SfRadialMenuItem/>
                <radialmenu:SfRadialMenuItem  Click="deleteButton_Click"  CheckMode="None"  >
                    <radialmenu:SfRadialMenuItem.Header>
                        <Border Background="Transparent" Padding="5">
                            <StackPanel>
                                <Path  UseLayoutRounding="False" Stretch="Fill" Width="20"  RenderTransformOrigin="0.5,0.5" Opacity="1" Height="25" Fill="Black" Data="M33.977998,27.684L33.977998,58.102997 41.373998,58.102997 41.373998,27.684z M14.841999,27.684L14.841999,58.102997 22.237998,58.102997 22.237998,27.684z M4.0319996,22.433001L52.183,22.433001 52.183,63.999001 4.0319996,63.999001z M15.974,0L40.195001,0 40.195001,7.7260003 56.167001,7.7260003 56.167001,16.000999 0,16.000999 0,7.7260003 15.974,7.7260003z" />
                                <TextBlock   Text="Delete"/>
                            </StackPanel>
                        </Border>
                    </radialmenu:SfRadialMenuItem.Header>
                </radialmenu:SfRadialMenuItem>
            </radialmenu:SfRadialMenu>
        </Popup>

The above popup is added in the application next to Schedule and its IsOpen property can be handled based on the Context Menu event of Schedule and OnPointerPressed events of the application.

Using ContextMenuOpening event of SfSchedule, you can avoid the opening of default menu selection by setting the Cancel property to True and your customized menu, that is, the RadialPopup can be displayed as the menu for Schedule.

The customized menu placement can be handled using the position values present in the argument of the event.

C#

   void Schedule_PopupMenuOpening(object sender, ContextMenuOpeningEventArgs e)
        {
            RadialPopup.IsOpen = false;
            e.Cancel = true;
            RadialPopup.IsOpen = true;
            radialMenu.IsOpen = true;
            if (e.CurrentSelectedDate != null)
            {
                CurrentSelectedDate = (DateTime)e.CurrentSelectedDate;
            }
            AddDataContext = new BindingClass() { CurrentSelectedDate = e.CurrentSelectedDate, Appointment = e.Appointment };
           if (e.Appointment != null)
            {
                for (int i = 0; i < radialMenu.Items.Count; i++)
                {
                    if (i == 3 && copiedAppointment == null)
                    {
                        (radialMenu.Items[i] as SfRadialMenuItem).IsEnabled = false;
                        (radialMenu.Items[i] as SfRadialMenuItem).Opacity = 0.5;
                    }
                    else
                    {
                        (radialMenu.Items[i] as SfRadialMenuItem).IsEnabled = true;
                        (radialMenu.Items[i] as SfRadialMenuItem).Opacity = 1;
                    }
                }
            }
            else
            {
                (radialMenu.Items[1] as SfRadialMenuItem).IsEnabled = false;
                (radialMenu.Items[1] as SfRadialMenuItem).Opacity = 0.5;
                (radialMenu.Items[2] as SfRadialMenuItem).IsEnabled = false;
                (radialMenu.Items[2] as SfRadialMenuItem).Opacity = 0.5;
                (radialMenu.Items[5] as SfRadialMenuItem).IsEnabled = false;
                (radialMenu.Items[5] as SfRadialMenuItem).Opacity = 0.5;
                (radialMenu.Items[0] as SfRadialMenuItem).IsEnabled = true;
                if (copiedAppointment != null)
                {
                    (radialMenu.Items[3] as SfRadialMenuItem).IsEnabled = true;
                    (radialMenu.Items[3] as SfRadialMenuItem).Opacity = 1;
                }
                else
                {
                    (radialMenu.Items[3] as SfRadialMenuItem).IsEnabled = false;
                    (radialMenu.Items[3] as SfRadialMenuItem).Opacity = 0.5;
                }
            }
        }

Using the PreviewMouseLeftButtonUp event of the application, the RadialPopup is closed.

C#

void MainWindow_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (RadialPopup != null)
                RadialPopup.IsOpen = false;
        }

Click Add under SfRadialMenuItem Popup. The addButton_Click event adds the appointments in Schedule.

C#

  void addButton_Click(object sender, RoutedEventArgs e)
        {
            AddAppointment();
        }

Click Edit under SfRadialMenuItem Popup. The editButton _Click event edits the appointments in Schedule.

C#

void editButton_Click(object sender, RoutedEventArgs e)
        {
            EditAppointment();
        }

Click Delete under SfRadialMenuItem Popup. The deleteButton _Click event deletes the saved appointments in Schedule.

C#

void deleteButton_Click(object sender, RoutedEventArgs e)
        {
            if (Schedule.SelectedAppointment != null)
                Schedule.Appointments.Remove(Schedule.SelectedAppointment);
        }

Click Copy under SfRadialMenuItem Popup. The copyButton _Click event copies the selected appointment in Schedule.

C#

void copyButton_Click(object sender, RoutedEventArgs e)
        {
            copiedAppointment = (Appointment)Schedule.SelectedAppointment;
        }

Click Paste under SfRadialMenuItem Popup. The pasteButton _Click event pastes the copied appointment in Schedule.

C#

void pasteButton_Click(object sender, RoutedEventArgs e)
        {
            RadialPopup.IsOpen = false;
            if (this.copiedAppointment != null)
            {
                Appointment app = this.copiedAppointment;
                TimeSpan appTimeDiff = app.EndTime - app.StartTime;
                Appointment appointment = new Appointment();
                appointment.Subject = app.Subject;
                appointment.Notes = app.Notes;
                appointment.Location = app.Location;
                appointment.ReadOnly = app.ReadOnly;
                appointment.AppointmentBackground = app.AppointmentBackground;
                appointment.AppointmentTime = this.CurrentSelectedDate.ToString("hh:mm tt");
                appointment.AppointmentType = app.AppointmentType;
                CustomEditor.SetImageForAppointment(appointment);
                appointment.StartTime = (DateTime)this.CurrentSelectedDate;
                appointment.EndTime = ((DateTime)this.CurrentSelectedDate).Add(appTimeDiff);
                Schedule.Appointments.Add(appointment);
            }
        }

Sample Location:

\AppData\Local\Syncfusion\EssentialStudio\12.3.0.36\WPF\SfSchedule.WPF\ SfSchedule\Samples\CustmizationDemo

Screenshot

Figure 1: Context Menu customization in Schedule

                                                       

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied