WinUI 스케줄러를 사용하여 히트 맵 캘린더 설계
오늘날 인터넷 데이터는 우리 삶에서 중요한 역할을 합니다. 우리는 인터넷을 사용하여 탐색, 앱 다운로드, 이메일 확인, 게임 플레이, 청구서 지불 등을 수행합니다. 이 블로그에서는 Syncfusion WinUI Scheduler 컨트롤을 사용하여 매일 인터넷 데이터 사용량을 기반으로 히트 맵 캘린더를 디자인하는 방법을 보여줍니다.
WinUI 스케줄러
SyncfusionWinUI Scheduler 컨트롤은 열 지도 달력을 디자인하는 데 필요한 유일한 도구입니다. 먼저 MonthCellTemplate 클래스의 MonthCellTemplateSelector 또는 MonthViewSettings 속성을 사용하여 WinUI 스케줄러의 월 셀을 사용자 지정해야 합니다. MonthCellTemplate 또는 MonthCellTemplateSelector 속성의 DataContext는 MonthCell 입니다.
참고: 스케줄러를 처음 사용하는 경우 계속하기 전에 설명서WinUI Scheduler getting started를 읽어 보십시오.
인터넷 데이터 사용량 내역 생성
먼저 인터넷 데이터 사용 내역을 생성합니다. MonthCell 및 DateText과 같은 Appointments 데이터 컨텍스트 클래스 속성을 사용하여 MonthCellTemplate의 모바일 데이터 사용 세부 정보를 바인딩할 수 있습니다.
Appointments에서 MonthCell의 세부 정보를 생성하려면 사용량, 날짜 및 색상과 같은 인터넷 데이터를 유지 관리하는 사용자 지정 이벤트 개체를 만들어야 합니다. AppointmentMapping 속성을 사용하여 이러한 사용자 정의 이벤트 데이터 속성을 스케줄러에 매핑하여 MonthCellTemplate 에서 모바일 데이터 사용 세부 정보를 바인딩합니다.
인터넷 데이터 모델 생성
다음으로 필요한 인터넷 세부 정보를 사용하여 사용자 지정 이벤트를 만듭니다. 다음 코드 예제를 참조하십시오.
/// <summary>
/// Represents the Internet data properties.
/// </summary>
public class InternetData : NotificationObject
{
private DateTime date;
private Brush color;
private int usage;
public int Usage
{
get { return usage; }
set
{
usage = value;
RaisePropertyChanged("Usage");
}
}
public DateTime Date
{
get { return date; }
set
{
date = value;
RaisePropertyChanged("Date");
}
}
public Brush Color
{
get { return color; }
set
{
color = value;
RaisePropertyChanged("Color");
}
}
}
인터넷 데이터 수집 생성
그런 다음 인터넷 데이터 개체의 컬렉션을 만들고 ItemsSource 속성에 할당하여 Appointments에서 MonthCell의 세부 정보를 생성합니다. MonthCell 속성은 MonthCellTemplate 에서 인터넷 데이터 사용량을 가져오는 데 사용됩니다.
필요한 인터넷 데이터 사용 세부 정보를 사용하여 ObservableCollection 유형의 사용자 지정 인터넷 데이터 컬렉션을 만들 것입니다.
public class HeatMapViewModel
{
public HeatMapViewModel()
{
this.GenerateData();
}
public ObservableCollection<InternetData> InternetDataUsages { get; set; }
/// <summary>
/// Generate random data for heat map calendar based on internet data usage.
/// </summary>
private void GenerateData()
{
//// Creating an instance for internet data collection.
InternetDataUsages = new ObservableCollection<InternetData>();
var startDate = DateTime.Now.Date.AddMonths(-2);
var random = new Random();
//// Adding random data to the internet data collection.
for (int i = 0; i < 200; i++)
{
InternetData internetData = new InternetData();
internetData.Date = startDate.AddDays(i);
//// Data usage in terms of GB.
internetData.Usage = random.Next(0, 15);
internetData.Color = GetColor(internetData.Usage);
this.InternetDataUsages.Add(internetData);
}
}
/// <summary>
/// Methods to get the color based on data usage.
/// </summary>
/// <param name="data"></param>
private Brush GetColor(int data)
{
//// Data usage in terms of GB.
if (data < 3)
{
return new SolidColorBrush(Color.FromArgb(255, 238, 238, 238));
}
else if (data < 6)
{
return new SolidColorBrush(Color.FromArgb(255, 198, 228, 139));
}
else if (data < 9)
{
return new SolidColorBrush(Color.FromArgb(255, 123, 201, 111));
}
else if (data < 12)
{
return new SolidColorBrush(Color.FromArgb(255, 35, 154, 59));
}
else
{
return new SolidColorBrush(Color.FromArgb(255, 25, 97, 39));
}
}
}
인터넷 데이터 개체 속성 매핑
AppointmentMapping 속성을 구성하여 사용자 지정 인터넷 데이터 개체 속성을 WinUI 스케줄러 컨트롤에 매핑합니다.
다음 코드 예제를 참조하십시오.
<Window
...
xmlns:Scheduler="using:Syncfusion.UI.Xaml.Scheduler" >
<Grid>
<Grid.DataContext>
<local:HeatMapViewModel />
</Grid.DataContext>
<Scheduler:SfScheduler x:Name="scheduler"
ItemsSource="{Binding InternetDataUsages }"
AppointmentEditFlag="None">
<!--The collection of internet data object can be assigned to the scheduler ItemsSource property in order to generate the details of appointments in the MonthCell which is used to get the details of the internet data usage for the day-->
<Scheduler:SfScheduler.AppointmentMapping>
<Scheduler:AppointmentMapping StartTime="Date"
AppointmentBackground="Color"/>
</Scheduler:SfScheduler.AppointmentMapping>
</Scheduler:SfScheduler>
</Grid>
WinUI Scheduler를 사용하여 히트 맵 캘린더 설계
이제 MonthCellTemplate 의 MonthViewSettings 속성을 사용하여 WinUI Scheduler 컨트롤의 월 셀을 사용자 지정합니다. 스케줄러 컨트롤에서 AppointmentEditFlag 속성을 None으로 설정하여 편집기 열기를 제한합니다. 그런 다음 AppointmentDisplayMode 속성을 None으로 설정하여 월 셀에 약속이 표시되지 않도록 합니다.
MonthCellTemplate을 사용하여 히트맵 달력을 디자인하려면 다음 코드를 참조하십시오.
<Window
...
xmlns:Scheduler="using:Syncfusion.UI.Xaml.Scheduler">
<Grid>
<Grid.DataContext>
<local:HeatMapViewModel />
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Scheduler:SfScheduler x:Name="scheduler"
ItemsSource="{Binding InternetDataUsages}"
AppointmentEditFlag="None">
<!--The collection of internet data object can be assigned to the scheduler ItemsSource property in order to generate the details of appointments in the MonthCell which is used to get the details of the internet data usage for the day-->
<Scheduler:SfScheduler.AppointmentMapping>
<Scheduler:AppointmentMapping StartTime="Date"
AppointmentBackground="Color"/>
</Scheduler:SfScheduler.AppointmentMapping>
<Scheduler:SfScheduler.MonthViewSettings>
<Scheduler:MonthViewSettings AppointmentDisplayMode="None">
<!--Declare the DataTemplate for the scheduler month cell in order to create the heatmap calendar-->
<Scheduler:MonthViewSettings.MonthCellTemplate>
<DataTemplate>
<Grid Background="{Binding Appointments[0].Data.Color}">
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5" Text="{Binding DateText}" />
</Grid>
</DataTemplate>
</Scheduler:MonthViewSettings.MonthCellTemplate>
</Scheduler:MonthViewSettings>
</Scheduler:SfScheduler.MonthViewSettings>
</Scheduler:SfScheduler>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition Width="0.8*"/>
<ColumnDefinition Width="0.1*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="0.6*"/>
</Grid.RowDefinitions>
<TextBlock Text="Less" HorizontalTextAlignment="Start" VerticalAlignment="Bottom" Grid.Row="0">
<TextBlock Text="More" HorizontalTextAlignment="End" VerticalAlignment="Bottom" Grid.Row="0"/>
<Border Grid.Row="1" Margin="0,2,0,5" Height="20" MinWidth="500" VerticalAlignment="Top">
<Border.Background>
<LinearGradientBrush EndPoint="1,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#eeeeee" Offset="0.0" />
<GradientStop Color="#c6e48b" Offset="0.3" />
<GradientStop Color="#7bc96f" Offset="0.6" />
<GradientStop Color="#239a3b" Offset="0.8" />
<GradientStop Color="#196127" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Grid>
</Grid>
</Window>
WinUI 스케줄러 컨트롤을 사용하여 히트 맵 캘린더 설계
GitHub 참조
자세한 내용은 Designing a heat map calendar using the WinUI Scheduler GitHub demo을 참조하십시오.
결론
읽어 주셔서 감사합니다! 이 게시물에서는 SyncfusionWinUI Scheduler 컨트롤을 사용하여 인터넷 데이터 사용량을 기반으로 히트 맵 캘린더를 설계하는 방법에 대한 간략한 개요를 제공했습니다. 이 중 하나를 사용하면 서로 다른 색상 패턴으로 데이터의 추세를 쉽게 이해할 수 있습니다. 이 블로그 게시물의 단계를 시도하고 의견 섹션에서 피드백을 공유하십시오!
기존 고객의 경우 Essential Studio의 새 버전을 License and Downloads 페이지에서 다운로드할 수 있습니다. 아직 Syncfusion 고객이 아닌 경우 30일free trial을 사용해 사용 가능한 기능을 확인할 수 있습니다.
궁금한 사항은 support forum , support portal 또는 feedback portal 을 통해 문의할 수 있습니다. 기꺼이 도와드리겠습니다!
관련 블로그
Reference
이 문제에 관하여(WinUI 스케줄러를 사용하여 히트 맵 캘린더 설계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/syncfusion/designing-a-heat-map-calendar-using-winui-scheduler-4508텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
