Lesson 4 - Provide Bars UI for a Scheduler
- 4 minutes to read
In This Article
This topic explains how to provide end-users with the basic functionality for switching views, view navigation and grouping scheduler data via Bars UI. Using this document, you can learn how to create and delete bar items when working with a SchedulerControl.
#Create Bar Items
To provide Bars 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 required data, and all standard mappings for appointments and resource properties are specified.
To create a bar with a navigation capability within the SchedulerControl view, right-click the scheduler control at design time and select Create Bars / View Navigator from the context menu.
- To create a bar representing SchedulerControl views and allowing end-users to switch them, select the Create Bars / View Selector item from the context menu.
- To create a bar allowing end-users to specify a type of data grouping in the SchedulerControl, select the Create Bars / Group By item from the context menu.
After you add these bars to the project, the following code will be added to your XAML automatically. If it doesn't, you can manually add this code.
<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: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.Bars> <dxb:Bar Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_GroupViewNavigator, Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="barViewNavigator"> <dxb:Bar.DockInfo> <dxb:BarDockInfo ContainerType="Top" /> </dxb:Bar.DockInfo> <dxb:Bar.ItemLinks> <dxb:BarButtonItemLink BarItemName="biNavigateViewBackward" /> <dxb:BarButtonItemLink BarItemName="biNavigateViewForward" /> <dxb:BarButtonItemLink BarItemName="biGotoToday" /> <dxb:BarButtonItemLink BarItemName="biViewZoomIn" /> <dxb:BarButtonItemLink BarItemName="biViewZoomOut" /> </dxb:Bar.ItemLinks> </dxb:Bar> <dxb:Bar Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_GroupViewSelector, Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="barViewSelector"> <dxb:Bar.DockInfo> <dxb:BarDockInfo ContainerType="Top" /> </dxb:Bar.DockInfo> <dxb:Bar.ItemLinks> <dxb:BarCheckItemLink BarItemName="biSwitchToDayView" /> <dxb:BarCheckItemLink BarItemName="biSwitchToWorkWeekView" /> <dxb:BarCheckItemLink BarItemName="biSwitchToWeekView" /> <dxb:BarCheckItemLink BarItemName="biSwitchToMonthView" /> <dxb:BarCheckItemLink BarItemName="biSwitchToTimelineView" /> </dxb:Bar.ItemLinks> </dxb:Bar> <dxb:Bar Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_GroupGroupBy, Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="barGroupBy"> <dxb:Bar.DockInfo> <dxb:BarDockInfo ContainerType="Top" /> </dxb:Bar.DockInfo> <dxb:Bar.ItemLinks> <dxb:BarCheckItemLink BarItemName="biSwitchToGroupByNone" /> <dxb:BarCheckItemLink BarItemName="biSwitchToGroupByDate" /> <dxb:BarCheckItemLink BarItemName="biSwitchToGroupByResource" /> </dxb:Bar.ItemLinks> </dxb:Bar> </dxb:BarManager.Bars> <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> <dxsch:SchedulerControl Name="schedulerControl1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 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> </dxb:BarManager> </Grid> </UserControl>Run the project. Bars UI for SchedulerControl is created.
#Delete Bar Items
If you want to exclude some items from a bar, you should delete item links from the bar's ItemLinks collection and delete the corresponding bar items from the Items collection.
For example, to delete the Go to Today item from the View Navigator bar, do one of the following.
At design time, right-click a corresponding bar button item 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.Bars> <dxb:Bar Caption="{Binding Source={StaticResource stringIdConverter}, ConverterParameter=Caption_GroupViewNavigator, Converter={StaticResource stringIdConverter}, Mode=OneTime}" Name="barViewNavigator"> <dxb:Bar.DockInfo> <dxb:BarDockInfo ContainerType="Top" /> </dxb:Bar.DockInfo> <dxb:Bar.ItemLinks> <!--...--> <!--<dxb:BarButtonItemLink BarItemName="biGotoToday" />--> <!--...--> </dxb:Bar.ItemLinks> </dxb:Bar> <!--...--> </dxb:BarManager.Bars> <dxb:BarManager.Items> <!--...--> <!--<dxb:BarButtonItem Command="{Binding Path=GotoToday, Mode=OneTime, Source={StaticResource commands}}" CommandParameter="{Binding ElementName=schedulerControl1}" Name="biGotoToday" />--> <!--...--> </dxb:BarManager.Items> <!--...--> </dxb:BarManager>