Lesson 5 - Provide Ribbon UI for a Scheduler
- 4 minutes to read
In This Article
This topic describes how to provide end-users with the basic functionality for switching views, view navigation and for grouping scheduler data via the Ribbon interface. Using this document, you can learn how to create and delete Ribbon items when working with a SchedulerControl.
#Create Ribbon Items
To create a Ribbon UI for a SchedulerControl, follow the steps below.
- Open the Silverlight application with the SchedulerControl, which was created in Lesson 2 of the current Getting Started section. This SchedulerControl is already bound to the required data, and all standard mappings for appointment and resource properties are specified.
To create Ribbon items with a navigation capability within the SchedulerControl view, right-click the scheduler control at design time and select Create Ribbon Items / View Navigator from the context menu.
- To create Ribbon items that represent SchedulerControl views and allowing end-users to switch between them, select the Create Ribbon Items / View Selector item from the context menu.
- To create Ribbon items that allow end-users to specify a type of data grouping in the SchedulerControl, select the Create Ribbon Items / Group By item from the context menu.
After you add these Ribbon items to the project, the following code should be added to the XAML file.
<UserControl x:Class="SilverlightApplication1.MainPage" 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:dxsch="http://schemas.devexpress.com/winfx/2008/xaml/scheduler" xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices" xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars" xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon" xmlns:local="clr-namespace:SilverlightApplication1.Web" mc:Ignorable="d" d:DesignHeight="478" d:DesignWidth="590"> <UserControl.Resources> <riaControls:DomainDataSource Name="domainDataSource1" x:Key="appointmentsDomainDataSource" AutoLoad="True" LoadedData="DomainDataSource_LoadedData" QueryName="GetCarSchedulingQuery" SubmittedChanges="DomainDataSource_SubmittedChanges"> <riaControls:DomainDataSource.DomainContext> <local:SchedulingDomainContext/> </riaControls:DomainDataSource.DomainContext> </riaControls:DomainDataSource> <riaControls:DomainDataSource x:Key="resourcesDomainDataSource" AutoLoad="True" LoadedData="DomainDataSource_LoadedData" QueryName="GetCarsQuery"> <riaControls:DomainDataSource.DomainContext> <local:SchedulingDomainContext/> </riaControls:DomainDataSource.DomainContext> </riaControls:DomainDataSource> <dxsch:SchedulerUICommand x:Key="commands" /> <dxsch:SchedulerControlStringIdConverter x:Key="stringIdConverter" /> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <dxb:BarManager Name="barManager1" ToolbarGlyphSize="Small"> <dxb:BarManager.Items> <dxb:BarButtonItem Command="{Binding Path=NavigateViewBackward, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biNavigateViewBackward" /> <dxb:BarButtonItem Command="{Binding Path=NavigateViewForward, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biNavigateViewForward" /> <dxb:BarButtonItem Command="{Binding Path=GotoToday, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biGotoToday" /> <dxb:BarButtonItem Command="{Binding Path=ViewZoomIn, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biViewZoomIn" /> <dxb:BarButtonItem Command="{Binding Path=ViewZoomOut, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biViewZoomOut" /> <dxb:BarCheckItem Command="{Binding Path=SwitchToDayView, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biSwitchToDayView" /> <dxb:BarCheckItem Command="{Binding Path=SwitchToWorkWeekView, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biSwitchToWorkWeekView" /> <dxb:BarCheckItem Command="{Binding Path=SwitchToWeekView, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biSwitchToWeekView" /> <dxb:BarCheckItem Command="{Binding Path=SwitchToMonthView, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biSwitchToMonthView" /> <dxb:BarCheckItem Command="{Binding Path=SwitchToTimelineView, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biSwitchToTimelineView" /> <dxb:BarCheckItem Command="{Binding Path=SwitchToGroupByNone, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biSwitchToGroupByNone" /> <dxb:BarCheckItem Command="{Binding Path=SwitchToGroupByDate, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biSwitchToGroupByDate" /> <dxb:BarCheckItem Command="{Binding Path=SwitchToGroupByResource, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biSwitchToGroupByResource" /> </dxb:BarManager.Items> <dx:DockPanel> <dxr:RibbonControl dx:DockPanel.Dock="Top"> <dxr:RibbonDefaultPageCategory> <dxr:RibbonPage Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_PageViewNavigator, Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="pageViewNavigator"> <dxr:RibbonPageGroup Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_GroupViewNavigator, Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="grpViewNavigator" ShowCaptionButton="False"> <dxb:BarButtonItemLink BarItemName="biNavigateViewBackward" /> <dxb:BarButtonItemLink BarItemName="biNavigateViewForward" /> <dxb:BarButtonItemLink BarItemName="biGotoToday" /> <dxb:BarButtonItemLink BarItemName="biViewZoomIn" /> <dxb:BarButtonItemLink BarItemName="biViewZoomOut" /> </dxr:RibbonPageGroup> </dxr:RibbonPage> <dxr:RibbonPage Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_PageViewSelector, Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="pageViewSelector"> <dxr:RibbonPageGroup Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_GroupViewSelector, Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="grpViewSelector" ShowCaptionButton="False"> <dxb:BarCheckItemLink BarItemName="biSwitchToDayView" /> <dxb:BarCheckItemLink BarItemName="biSwitchToWorkWeekView" /> <dxb:BarCheckItemLink BarItemName="biSwitchToWeekView" /> <dxb:BarCheckItemLink BarItemName="biSwitchToMonthView" /> <dxb:BarCheckItemLink BarItemName="biSwitchToTimelineView" /> </dxr:RibbonPageGroup> </dxr:RibbonPage> <dxr:RibbonPage Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_PageGroupBy, Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="pageGroupBy"> <dxr:RibbonPageGroup Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_GroupGroupBy, Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="grpGroupBy" ShowCaptionButton="False"> <dxb:BarCheckItemLink BarItemName="biSwitchToGroupByNone" /> <dxb:BarCheckItemLink BarItemName="biSwitchToGroupByDate" /> <dxb:BarCheckItemLink BarItemName="biSwitchToGroupByResource" /> </dxr:RibbonPageGroup> </dxr:RibbonPage> </dxr:RibbonDefaultPageCategory> </dxr:RibbonControl> <dxsch:SchedulerControl Name="schedulerControl1" ActiveViewType="Week" GroupType="Resource" BarManager="{Binding ElementName=barManager1, Mode=OneTime}"> <!-- Some XAML is missing. The complete XAML for the SchedulerControl is listed in Lesson2. --> </dxsch:SchedulerControl> </dx:DockPanel> </dxb:BarManager> </Grid> </UserControl>Run the project. The Ribbon UI is created.
#Delete Ribbon Items
If you want to exclude some items from the Ribbon page, you should delete item links from the Ribbon's ItemLinks collection, and delete corresponding items from the Items collection.
For example, to delete the Go to Today item from the View Navigator Ribbon page group, do one of the following.
At design time, right-click the Go to Today button item on the View Navigator Ribbon page group and select Delete from the invoked context menu.
Comment or delete the following lines in your XAML file.
<dxb:BarManager Name="barManager1" ToolbarGlyphSize="Small"> <dxb:BarManager.Items> <!--...--> <!--<dxb:BarButtonItem Command="{Binding Path=GotoToday, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biGotoToday" />--> <!--...--> </dxb:BarManager.Items> <dx:DockPanel> <dxr:RibbonControl dx:DockPanel.Dock="Top"> <dxr:RibbonDefaultPageCategory> <dxr:RibbonPage Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_PageViewNavigator, Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="pageViewNavigator"> <dxr:RibbonPageGroup Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_GroupViewNavigator, Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="grpViewNavigator" ShowCaptionButton="False"> <dxb:BarButtonItemLink BarItemName="biNavigateViewBackward" /> <dxb:BarButtonItemLink BarItemName="biNavigateViewForward" /> <!--<dxb:BarButtonItemLink BarItemName="biGotoToday" />--> <dxb:BarButtonItemLink BarItemName="biViewZoomIn" /> <dxb:BarButtonItemLink BarItemName="biViewZoomOut" /> </dxr:RibbonPageGroup> </dxr:RibbonPage> <!--...--> </dxr:RibbonDefaultPageCategory> </dxr:RibbonControl> <!--...--> </dx:DockPanel> </dxb:BarManager>