• 검색

WPF 컨트롤을 .NET 5 이상으로 마이그레이션하면서 저희는 컨트롤의 기본 스타일을 현대화하는 데 시간을 투자했습니다. 원래 WPF 컨트롤이 Silverlight 컨트롤을 기반으로 하기 때문에 그리했으며 현대 WPF 응용 프로그램에서 누구나 원하는 것이 아니기 때문이었습니다. 새로운 테마를 즐기시기 바라며 모든 피드백에 감사드립니다!

이 블로그에서는 .NET 5 Calendar 및 Accordion 컴포넌트의 새로운 스타일 기능 중 일부를 보여드리고 즉석에서 다운로드하고 빌드 및 실행할 수 있는 새로운 샘플을 통해 보여드리겠습니다. 모든 ComponentOne .NET 5 컴포넌트는 NuGet에서 공개적으로 사용할 수 있습니다.

.NET 5용 새 WPF 달력

가장 먼저 눈에 띄는 것은 .NET 5 Calendar의 새로운 모습입니다! 영감을 받은 미니멀리스트 디자인에 기초했습니다. 테마 및 기타 설정을 적용할 수 있는 기본 스타일입니다. WPF 달력은 데스크톱용으로 설계되었으며 터치가 가능해졌습니다.

사용자는 위, 아래, 왼쪽, 오른쪽으로 스와이프하여 원하는 방향으로 달력을 탐색할 수 있습니다. 사용자가 부드러운 애니메이션을 즐길 수 있습니다.

가장 먼저 지정할 항목은 월별 탐색 방향입니다. 표준 방향이 없으므로 Google 달력, iOS 달력 또는 Outlook 달력 등 에뮬레이트하려는 동작을 선택 가능한 옵션을 모두 제공하고자 했습니다. Orientation 속성으로 설정할 수 있습니다.

방향(가로 또는 세로)에 따라 다음과 이전 화살표 아이콘이 업데이트됩니다. NextIconStyle 및 NextItemTemplate 속성을 사용하여 아이콘을 추가로 사용자 정의할 수 있습니다(이전 아이콘에도 유사한 속성이 있음).

또한 WPF 달력은 일 슬롯에 대한 사용자 정의 UI 템플릿을 지원하므로 달력을 날짜 선택에만 사용할 수 있습니다.

다음 템플릿을 사용자 정의합니다. DaySlotTemplate, AdjacentDaySlotTemplate, DayOfWeekDaySlotTemplate.

GitHub의 WPF 달력 샘플에서 이러한 기능의 코드 예제를 찾을 수 있습니다.

새로운 .NET 5용 WPF 아코디언

WPF 아코디언 컨트롤에는 .NET 5를 위한 새로운 스타일도 있습니다. 달력과 동일한 수준의 구성을 가지고 있습니다. 예를 들면 확장 방향과 아이콘 배치를 구성합니다.

WPF 아코디언을 설정하여 왼쪽-오른쪽, 오른쪽-왼쪽, 위-아래 또는 아래-위를 확장할 수 있습니다. ExpandDirection 속성을 설정하기만 하면 됩니다.

ExpandIconAlignment 속성을 설정하여 확장 아이콘을 헤더의 왼쪽이나 오른쪽에 표시할 수 있습니다. C1Calendar 컴포넌트와 유사하게 아이콘 스타일을 사용자 정의할 수도 있습니다.

그러나 WPF Accordion은 모든 패널을 한 번에 확장하도록 구성할 수 있기 때문에 기존의 Accordion 그 이상입니다.

이와 관련된 동작을 설정하려면 ExpandMode 속성을 설정하면 됩니다.

또한 Fill 속성을 설정하여 Accordion 컴포넌트와 같이 확장된 패널이 전체 공간을 채우도록 설정할 수 있습니다.

C1Accordion 컴포넌트는 ItemsControl이므로 데이터를 바인딩할 수 있을 뿐만 아니라 개별 C1Expander 항목을 사용하여 단순 확장이 가능한 패널을 생성할 수도 있습니다.

GitHub의 WPF Accordion Samples에서 이러한 기능에 대한 코드 예제를 찾을 수 있습니다.

WPF Accordion 및 Calendar Sample

WPF Accordion 및 Calendar Sample 컴포넌트를 사용하여 응용 프로그램 왼쪽에 매끄러운 날짜 탐색기를 생성합니다. 확장기와 Accordion 레이아웃을 사용하면 다른 탐색 또는 선택 UI를 작은 공간에 넣을 수 있습니다. 이 샘플에서는 달력 패널만 채웠습니다. 다른 패널은 expand할 수 있도록 열어두었습니다.

앞에서 다루지 않은 몇 가지 흥미로운 기능을 보여주는 .NET 5 WPF 샘플을 다운로드합니다.

축소 가능 탐색 패널

ExpandDirection 및 ExpandIconAlignment를 "Left"로 설정하여 C1Expander 컴포넌트를 사용하여 왼쪽에 축소 가능 패널을 만들 수 있습니다.

여기에서 트릭은 그리드 열 컨테이너의 Width도 "Auto"로 설정되어 있는지 확인하는 것입니다.

<c1:C1Expander ExpandDirection="Left" ExpandIconAlignment="Left" Header="View">
​
</c1:C1Expander>

월 눈금선 표시하기

DayStyle을 만들고 BorderBrush 및 BorderThickness 속성을 설정하여 달력에 눈금선을 표시할 수 있습니다.

<Style x:Key="CalendarDaySlotBaseStyle" TargetType="Control">
  <Setter Property="BorderBrush" Value="LightGray"></Setter>
  <Setter Property="BorderThickness" Value="0.5"></Setter>
</Style>
​
<c1:C1Calendar DayStyle="{StaticResource CalendarDaySlotBaseStyle}" />

사용자 정의 달력 헤더

ShowHeader 속성을 "False"로 설정한 다음 달력 위에 사용자 정의 XAML을 추가하여 C1Calendar 컴포넌트의 헤더를 완전히 제거하고 바꿀 수 있습니다.

샘플에서 TextBlock은 월과 연도를 표시하는 데 사용됩니다. 텍스트를 DisplayDateChanged 이벤트 내에서 캘린더의 DisplayDate로 설정하면 됩니다.

탐색 버튼은 사용자가 좌우로 스와이프하거나 드래그하여 탐색할 수 있으므로 필요하지 않지만 일부 사용자 정의 버튼은 쉽게 추가할 수 있습니다.

private void c1Calendar_DisplayDateChanged(object sender, EventArgs e)
{
  headerText.Text = c1Calendar.DisplayDate.ToString("MMMM yyyy");
}

전체 샘플을 여기에서 다운로드하여 모든 코드를 확인하고 이러한 기능이 실제로 작동하는지 테스트하십시오.

NuGet에서 패키지를 관리하여 .NET 5 응용 프로그램에서 C1Calendar, C1Accordion 및 C1Expander를 빠르게 시작할 수 있습니다.

지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!

• ComponentOne 공식 홈페이지
• ComponentOne 튜토리얼 및 샘플
• ComponentOne Q&A
• ComponentOne FAQ