MAUI의 커스텀컨트롤

프로그래밍 언어 C# / .NET
, , ,
1

안녕하세요. 이광석입니다.

이 글에서는 Maui의 다양한 커스텀컨트롤 만드는 방법 중 하나인 TemplateControl에 대해 소개해드리려고 합니다.

XAML 계열의 크로스플랫폼 중 유일하게 ContentControl이 존재하지않는 프레임워크입니다.

사용자만의 고유 컨트롤 만드는 개념은 없다.

아닙니다. 고유 컨트롤 만들 수 있습니다. Maui는 사용자지정컨트롤, UserControl를 찾을 수 없기에 그런 생각이 들 수 있지만, 실제론 ContentView가 그 역할을 합니다.

컨트롤을 재창조 할 일은 없다.

요즘 디자인 시대엔 Matrial, Cupertino,Flunt와 같은 디자인의 대한 규격들이 들이 존재합니다. 하지만 이런 생각을 해보면 좋을 것 같습니다.
‘Button인데 ToggleButton과 같은 것을 만들고 싶어’ 라던지
‘RadioButton의 모양이 동그라미인데 둥근 네모로 바꾸고싶어’ 라던지
기존의 디자인에 살짝 바꿔야만 하는 상황이 생길 수 있습니다.

다음 글에서는 그렇다면 Maui에서는 어떻게 사용하는지에 대해 공유드릴게요.

2개의 좋아요
2

Custom Control과 User Control 차이점

  1. Custom Control:
  • Control 클래스를 기반으로 확장한 형태로, UI를 직접 포함하지 않음.
  • 기본적인 UI 요소를 제공하지 않으며, 주로 동작을 커스터마이징 할 때 사용.
  • 예: 버튼이지만 ToggleButton처럼 동작하도록 만들 때 사용.
  1. User Control:
  • 사용자 정의 UI 요소로, UI를 직접 포함하고 있음.
  • 복잡한 UI를 만들 때 유용하게 사용.
  • 예: 버튼과 그 상태에 따른 이미지를 포함하는 복합적인 UI를 만들 때 사용.

어떤 경우에 무엇을 선택할지:

  • Custom Control: UI 없이 기본적인 동작을 커스터마이즈해야 할 때 사용.
  • User Control: UI가 복잡하고 여러 요소를 포함하는 경우 사용.

Maui에서 Custom Control 구현

  • Custom Control의 특징:
    • WPF에서는 themes/generic.xaml로 스타일과 리소스를 정의하지만, Maui에서는 기본적으로 Custom Control 개념이 없어 직접 처리해야 함.
  • Generic.xaml 정의:
    • generic.xaml에서 필요한 스타일과 리소스를 정의하고, 이를 ResourceDictionary로 구성해야 함.
    • 예시 코드:
<!--Generic.xaml-->
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:themes="clr-namespace:TemplateMAUI.Themes"
    x:Class="TemplateMAUI.Themes.Generic">
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <!-- BASIC -->
            <themes:Colors />
            <themes:Geometries />
            <!-- STYLES -->
            <themes:AreaChart />
            <themes:AvatarView />
            <themes:BadgeView />
            <themes:BarChart />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</ResourceDictionary>
  • Generic.cs 파일:
public partial class Generic : ResourceDictionary
{
    public Generic()
    {
        InitializeComponent();
    }
}

Maui에서 generic.xaml 적용:

  • App.xaml.cs에서 generic.xaml을 사용하기 위해 ResourceDictionary에 추가해야 함.
  • 예시 코드:
public class TemplateMAUI
{
     public static void Init()
     {
         var templateMAUIDictionary = new Generic();       
        if (!Application.Current.Resources.MergedDictionaries.Contains(templateMAUIDictionary))
                Application.Current.Resources.Add(templateMAUIDictionary);
      }
}

// App.xaml.cs
public App()
{
   .
   .
   TemplateMAUI.Init();
   .
   .
}

정리:

  • WPF에서는 Custom Control을 쉽게 구현할 수 있으나, Maui에서는 generic.xaml을 직접 작성하여 적용해야 함.
  • UI 요소가 없는 Custom Control을 정의하려면 ResourceDictionary를 활용해 generic.xaml 파일을 구성하고, 이를 App.xaml.cs에서 로드해야 함.

다음 글에서는 어떠한 방식으로 스타일을 할 수 있는지 공유 드리겠습니다.

2개의 좋아요