Articles in this section
Category / Section

How to customize the Context menu in WinRT Schedule?

5 mins read

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

For Customizing the Popup menu in SfSchedule

Create a WinRT application and add SfSchedule control in it.

XAML

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

In this article, you can display a popup containing a 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" Grid.ColumnSpan="2" IsOpen="False" Grid.Row="1">
                <radialmenu:SfRadialMenu x:Name="radialMenu" RimBackground="#FF28A5DB" RimRadiusFactor="0.9"
                                         IsOpen="False" Padding="5" EnableFreeRotation="True"
                                         Visibility="Visible" Background="White" RadiusX="100" RadiusY="100">
                    <radialmenu:SfRadialMenu.RenderTransform>
                        <TranslateTransform x:Name="transform2"/>
                    </radialmenu:SfRadialMenu.RenderTransform>
                    <radialmenu:SfRadialMenu.Icon>
                        <Grid Background="Transparent"/>
                    </radialmenu:SfRadialMenu.Icon>
                    <radialmenu:SfRadialMenuItem  Click="addButton_Click"  >
                        <radialmenu:SfRadialMenuItem.Header>
                            <Border Background="Transparent" Padding="5">
                                <StackPanel>
                                    <Image Stretch="Uniform" Height="25" Width="25" >
                                        <Image.Source>
                                            <BitmapImage   UriSource="ms-appx:/Schedule/Assets/AddNew.png"/>
                                        </Image.Source>
                                    </Image>
                                    <TextBlock Text="Add"/>
                                </StackPanel>
                            </Border>
                        </radialmenu:SfRadialMenuItem.Header>
                    </radialmenu:SfRadialMenuItem>
                    <radialmenu:SfRadialMenuItem  Click="editButton_Click" IsEnabled="True"   >
                        <radialmenu:SfRadialMenuItem.Header>
                            <Border Background="Transparent" Padding="5">
                                <StackPanel>
                                    <Image Stretch="Uniform" Height="25" Width="25" >
                                        <Image.Source>
                                            <BitmapImage UriSource="ms-appx:/Schedule/Assets/Edit.png"/>
                                        </Image.Source>
                                    </Image>
                                    <TextBlock Text="Edit"/>
                                </StackPanel>
                            </Border>
                        </radialmenu:SfRadialMenuItem.Header>
                    </radialmenu:SfRadialMenuItem>
                    <radialmenu:SfRadialMenuItem Click="copyButton_Click"  >
                        <radialmenu:SfRadialMenuItem.Header>
                            <Border Background="Transparent" Padding="5">
                                <StackPanel>
                                    <Image Stretch="Uniform" Height="25" Width="25" >
                                        <Image.Source>
                                            <BitmapImage UriSource="ms-appx:/Schedule/Assets/Copy.png" />
                                        </Image.Source>
                                    </Image>
                                    <TextBlock Text="Copy"/>
                                </StackPanel>
                            </Border>
                        </radialmenu:SfRadialMenuItem.Header>
                    </radialmenu:SfRadialMenuItem>
                    <radialmenu:SfRadialMenuItem   Click="pasteButton_Click" >
                        <radialmenu:SfRadialMenuItem.Header>
                            <Border Background="Transparent" Padding="5">
                                <StackPanel>
                                    <Image Stretch="Uniform" Height="25" Width="25" >
                                        <Image.Source>
                                            <BitmapImage UriSource="ms-appx:/Schedule/Assets/Paste.png" />
                                        </Image.Source>
                                    </Image>
                                    <TextBlock Text="Paste"/>
                                </StackPanel>
                            </Border>
                        </radialmenu:SfRadialMenuItem.Header>
                    </radialmenu:SfRadialMenuItem>
                    <radialmenu:SfRadialMenuItem/>
                    <radialmenu:SfRadialMenuItem  Click="deleteButton_Click"   >
                        <radialmenu:SfRadialMenuItem.Header>
                            <Border Background="Transparent" Padding="5">
                                <StackPanel>
                                    <Image Stretch="Uniform" Height="25" Width="25" >
                                        <Image.Source>
                                            <BitmapImage UriSource="ms-appx:/Schedule/Assets/Delete.png" />
                                        </Image.Source>
                                    </Image>
                                    <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 as true and your customized menu (RadialPopup) can be shown as menu for the 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;
            double borderBoundX = 0.0;
            double borderBoundY = 0.0;
            if (e.CurrentEventArgs is TappedRoutedEventArgs)
            {
                borderBoundX = (e.CurrentEventArgs as TappedRoutedEventArgs).GetPosition(schedule).X + (1.2 * radialMenu.RadiusX);
                borderBoundY = (e.CurrentEventArgs as TappedRoutedEventArgs).GetPosition(schedule).Y + (1.2 * radialMenu.RadiusY);
            }
            else if (e.CurrentEventArgs is HoldingRoutedEventArgs)
            {
                borderBoundX = (e.CurrentEventArgs as HoldingRoutedEventArgs).GetPosition(schedule).X + (1.2 * radialMenu.RadiusX);
                borderBoundY = (e.CurrentEventArgs as HoldingRoutedEventArgs).GetPosition(schedule).Y + (1.2 * radialMenu.RadiusY);
            }
            else if (e.CurrentEventArgs is PointerRoutedEventArgs)
            {
                borderBoundX = (e.CurrentEventArgs as PointerRoutedEventArgs).GetCurrentPoint(schedule).Position.X + (1.2 * radialMenu.RadiusX);
                borderBoundY = (e.CurrentEventArgs as PointerRoutedEventArgs).GetCurrentPoint(schedule).Position.Y + (1.2 * radialMenu.RadiusY);
            }
            if (borderBoundX > (sender as SfSchedule).ActualWidth)
            {
                RadialPopup.HorizontalOffset = borderBoundX - (2.5 * radialMenu.RadiusX);
            }
            else
            {
                if (e.CurrentEventArgs is TappedRoutedEventArgs)
                {
                    RadialPopup.HorizontalOffset = (e.CurrentEventArgs as TappedRoutedEventArgs).GetPosition(schedule).X;
                }
                else if (e.CurrentEventArgs is HoldingRoutedEventArgs)
                {
                    RadialPopup.HorizontalOffset = (e.CurrentEventArgs as HoldingRoutedEventArgs).GetPosition(schedule).X;
                }
                else if (e.CurrentEventArgs is PointerRoutedEventArgs)
                {
                    RadialPopup.HorizontalOffset = (e.CurrentEventArgs as PointerRoutedEventArgs).GetCurrentPoint(schedule).Position.X;
                }
            }
            if (borderBoundY > (sender as SfSchedule).ActualHeight)
            {
                RadialPopup.VerticalOffset = borderBoundY - (2.5 * radialMenu.RadiusY);
            }
            else
            {
                if (e.CurrentEventArgs is TappedRoutedEventArgs)
                {
                    RadialPopup.VerticalOffset = (e.CurrentEventArgs as TappedRoutedEventArgs).GetPosition(schedule).Y;
                }
                else if(e.CurrentEventArgs is HoldingRoutedEventArgs)
                {
                    RadialPopup.VerticalOffset = (e.CurrentEventArgs as HoldingRoutedEventArgs).GetPosition(schedule).Y;
                }
                else if (e.CurrentEventArgs is PointerRoutedEventArgs)
                {
                    RadialPopup.VerticalOffset = (e.CurrentEventArgs as PointerRoutedEventArgs).GetCurrentPoint(schedule).Position.Y;
                }
            }
 
            if (e.CurrentSelectedDate != null)
            {
                this.CurrentSelectedDate = (DateTime)e.CurrentSelectedDate;
            }
            AddDataContext = new BindingClass { Appointment = e.Appointment, CurrentSelectedDate = e.CurrentSelectedDate };
 
            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 OnPointerPressed event of the application, the RadialPopup is closed.

C#

   protected override void OnPointerPressed(PointerRoutedEventArgs e)
        {
            RadialPopup.IsOpen = false;
        }

By clicking SfRadialMenuItem of Add in Popup, addButton_Click event adds the appointments in Schedule.

C#

  void addButton_Click(object sender, RoutedEventArgs e)
        {
            RadialPopup.IsOpen = false;
            radialMenu.IsOpen = false;
            AddAppointment();
        }

By clicking SfRadialMenuItem of Edit in Popup, editButton _Click event edits the appointments in Schedule.

C#

void editButton_Click(object sender, RoutedEventArgs e)
        {
            RadialPopup.IsOpen = false;
            EditAppointment();
        }

By clicking SfRadialMenuItem of Delete in Popup, deleteButton _Click event deletes the saved appointments in Schedule.

C#

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

By clicking SfRadialMenuItem of Copy in Popup, copyButton _Click event copies the selected appointment in Schedule.

C#

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

By clicking SfRadialMenuItem of Paste in Popup, 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;
                appointment.StartTime = (DateTime)this.CurrentSelectedDate;
                appointment.EndTime = ((DateTime)this.CurrentSelectedDate).Add(appTimeDiff);
                Schedule.Appointments.Add(appointment);
            }
        }

Sample Location (In WinRT SB): WinRT->Schedule->CustomizationDemo

 

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