さまざまなビューの時間間隔のカスタマイズ

Scheduler では、1 日より短い表示間隔を含むビュー（日ビュー、週間勤務日ビュー、週ビュー、タイムラインビューなど）の時間間隔をカスタマイズできます。C1Scheduler クラスは、XAML で時間間隔を設定するための SmallVisualIntervalScale プロパティ（VisualIntervalScale プロパティに依存する依存プロパティ）を提供します。

SmallVisualIntervalScale プロパティに特定の値を設定するか、このプロパティを scale などのスケジューラ要素に連結することで、ビューがエンドユーザーによって変更されるたびに時間間隔を更新できます。デフォルトでは、SmallVisualIntervalScale プロパティは TimeSpan.Zero に設定されています。このため、SmallVisualIntervalScale プロパティに値が設定されていない場合、あるいはこのプロパティが XAML で何らかの要素に連結されていない場合は、VisualScaleInterval プロパティだけが有効です。

To add different views to the Scheduler and customize the time span for all the view with visual intervals, follow these steps:

In the XAML designer, add a StackPanel inside the grid and then add two TextBlocks and ComboBoxes to the StackPanel to display view type and scale dropdowns.

次の XAML コードスニペットは、SmallVisualIntervalScale プロパティを scale 要素に連結する方法を示します。

XAML	コードのコピー
<StackPanel Orientation="Horizontal" Grid.Row="0" Margin="5"> <TextBlock VerticalAlignment="Center">View Type</TextBlock> <ComboBox x:Name="viewType" Width="80" Margin="5"> <c1sched:ViewType>Day</c1sched:ViewType> <c1sched:ViewType>Week</c1sched:ViewType> <c1sched:ViewType>WorkingWeek</c1sched:ViewType> </ComboBox> <TextBlock VerticalAlignment="Center" Margin="10, 0">Scale</TextBlock> <ComboBox x:Name="scale" Width="80" Margin="5"></ComboBox> </StackPanel> <!-- We need to use SmallVisualIntervalScale property for specifying the required time span.--> <c1sched:C1Scheduler x:Name="scheduler1" Grid.Row="1" Margin="10 0 0 0" BorderThickness="1" ShowWorkTimeOnly="True" ViewType="{Binding SelectedItem, ElementName=viewType, Mode=TwoWay}" SmallVisualIntervalScale="{Binding SelectedItem, ElementName=scale, Mode=TwoWay}"/>

XAML

コードのコピー

<StackPanel Orientation="Horizontal" Grid.Row="0" Margin="5">
    <TextBlock VerticalAlignment="Center">View Type</TextBlock>
    <ComboBox x:Name="viewType" Width="80" Margin="5">
        <c1sched:ViewType>Day</c1sched:ViewType>
        <c1sched:ViewType>Week</c1sched:ViewType>
        <c1sched:ViewType>WorkingWeek</c1sched:ViewType>
    </ComboBox>
    <TextBlock VerticalAlignment="Center" Margin="10, 0">Scale</TextBlock>
    <ComboBox x:Name="scale" Width="80" Margin="5"></ComboBox>
</StackPanel>

<!-- We need to use SmallVisualIntervalScale property for specifying the required time span.-->
<c1sched:C1Scheduler x:Name="scheduler1" Grid.Row="1" Margin="10 0 0 0" BorderThickness="1" 
                     ShowWorkTimeOnly="True" 
                     ViewType="{Binding SelectedItem, ElementName=viewType, Mode=TwoWay}" 
                     SmallVisualIntervalScale="{Binding SelectedItem, ElementName=scale, Mode=TwoWay}"/>

次の C# コードを使用して、XAML の操作ロジックで scale 要素を初期化します。上記のコード例で使用されている SmallVisualIntervalScale プロパティは、下記のコードで初期化される scale 要素に連結します。

C#	コードのコピー
// initialize time scale combo scale.Items.Add(TimeSpan.FromMinutes(10)); scale.Items.Add(TimeSpan.FromMinutes(15)); scale.Items.Add(TimeSpan.FromMinutes(20)); scale.Items.Add(TimeSpan.FromMinutes(30)); scale.Items.Add(TimeSpan.FromMinutes(60)); scale.Items.Add(TimeSpan.FromHours(2)); viewType.SelectedIndex = 0; scale.SelectedIndex = 0;

コードのコピー

// initialize time scale combo
scale.Items.Add(TimeSpan.FromMinutes(10));
scale.Items.Add(TimeSpan.FromMinutes(15));
scale.Items.Add(TimeSpan.FromMinutes(20));
scale.Items.Add(TimeSpan.FromMinutes(30));
scale.Items.Add(TimeSpan.FromMinutes(60));
scale.Items.Add(TimeSpan.FromHours(2));
viewType.SelectedIndex = 0;
scale.SelectedIndex = 0;