.NET UI 프레임워크를 위한 간결한 차세대 C# 마크업
C# Markup 2는 뛰어난 Uno 플랫폼을 포함하여 여러 UI 프레임워크를 지원합니다.
Uno를 모른다면 확인해 보시기 바랍니다. Uno는 가장 훌륭하고 성숙한 .NET UI 프레임워크 중 하나이며, 실제 프로덕션 앱 end2end를 빠르게 생성해야 할 때 도움이 될 인상적인 광범위한 기능을 제공합니다.
dotnet new install Uno.Templates
dotnet new install Modern.CSharp.Templates
md UnoCSharpMarkup2
cd UnoCSharpMarkup2
dotnet new unoapp -preset recommended
dotnet new mcs-uno-markup2 --presentation mvux --allow-scripts yes
Uno 플랫폼은 XAML을 지원하지만 최근에는 Uno C# 마크업과 함께 C# UI도 수용했습니다. C# 마크업 2에는 1세대 C# 마크업 변형이 제공하는 것 이상의 또 다른 옵션이 추가되었습니다.
옵션이 있다는 것은 좋은 일입니다. 모두가 승리합니다. 개발자는 자신이 가장 좋아하는 경험을 얻고 UI 프레임워크는 더 많은 채택을 얻습니다. 확인해보시고 맘에 드는걸로 골라보세요!
첫인상으로, 다음은 빠른 나란히 비교입니다.
C# Markup 2를 사용하여 Flutter와 유사한 UI 개발 경험을 즐겨보세요.
new
, HorizontalAlignment = HorizontalAlignment.Center
, () =>
또는 nameof()
를 끝없이 반복하지 않으며 더 이상 지정하지 않습니다. 예, 각 TextBlock
바인딩에 대해 Text
속성에 바인딩하려고 합니다.MyPage.cs
편집하는 동안 Markup API만 참조하세요. MyPage.cs
, MyPage.logic.cs
편집 중에 UI 프레임워크 및 기타 API를 참조하세요.XAML/HTML/JavaScript/CSS가 필요하지 않습니다. 방해가 되는 엔진이나 레이어가 없습니다.
NuGet
채팅(필요한 경우 먼저 DotNetEvolution에 가입)
질문이나 도움을 받을 수 있는 최고의 장소입니다!
C# 마크업 1을 찾고 계십니까? 여기서 찾아보세요
2024년 5월 7일
.NET 단일 프로젝트를 포함하는 Uno 플랫폼 5.2용 새로운 C# 마크업 2.4
오늘 릴리스는 Uno의 .NET 단일 프로젝트 및 uno.sdk
를 포함하여 Uno 5.2로 완전히 업데이트되었습니다!
을 더한:
dotnet new unoapp
템플릿에 대한 지원이 추가되었습니다.2023년 12월 21일
Uno 플랫폼 5를 위한 새로운 C# 마크업 2 템플릿
몇 가지 새로운 C# Markup 2 방법 외에도 오늘 릴리스에는 Uno 플랫폼 5용 새로운 C# Markup 2 템플릿(업데이트된 mcs-uno-markup2
템플릿 및 새로운 mcs-uno-view
템플릿)에 대한 지원이 추가되었습니다.
dotnet new unoapp
템플릿을 사용하여 생성했든 Visual Studio용 Uno 솔루션 마법사를 사용하여 생성했든 관계없이 기존 및 새로운 Uno 솔루션 모두에 대해 향상된 마찰 없는 시작을 즐겨보세요.mcs-uno-view
템플릿은 mcs-uno-markup2
에 포함된 편리한 New-View.ps1
스크립트에서 사용됩니다.2023년 11월 18일
2.3 릴리스는 GA입니다. .NET 8, Uno 5 및 5개의 Uno 라이브러리에 대한 지원이 추가되었습니다!
이 릴리스는 뛰어난 Uno 5 릴리스와 .NET 8 GA로 완전히 업데이트되었습니다. Visual Studio용 Uno 솔루션 마법사를 사용하고 명령 하나로 언제든지 C# Markup 2 프로젝트를 추가할 수 있습니다. 모든 Uno 마법사 사용자 정의가 지원됩니다. C# 마크업 2를 MVUX 또는 MVVM, XAML 또는 Uno C# 마크업과 결합하고, Uno 탐색 확장을 사용하고, .NET 8 또는 .NET 7을 대상으로 합니다. 모든 Uno 대상 플랫폼이 지원됩니다.
새로운 닷넷의 새로운 C# Markup 2 프로젝트 템플릿을 사용하면 즉시 시작할 수 있습니다. 최적의 개발자 환경을 위해 세심하게 최적화되었습니다. 깔끔한 솔루션 탐색기 보기, 마크업 및 논리 파일의 자동 파일 그룹화, 깔끔한 마크업 소스, 집중된 Intellisense, 명확한 시작점 코드의 마크업 확장 및 빠른 핫 리로드 - IDE가 핫 리로드할 수 있지만 (아직) UI를 업데이트할 수 없는 플랫폼의 경우 자동 및 디버그 모드의 핫 리로드 버튼 오버레이 사용) 자동으로.
일반적인 C# Markup 2 개선 사항과 5개의 추가 Uno 라이브러리에 대한 C# Markup 2 API를 즐겨보세요.
ThemeResource
는 C# intellisense에서 검색 가능하며 강력한 형식입니다.시작하기가 완전히 최신 상태입니다. 이 리포지토리와 이 추가 정보의 예제는 곧 업데이트되어 새로운 기능을 선보일 예정입니다.
NJoy 간결한 C# 마크업!
2023년 11월 1일
2.3 미리보기 릴리스에는 5개의 Uno 라이브러리가 추가되었습니다!
일반적인 C# Markup 2 개선 사항과 5개의 추가 Uno 라이브러리에 대한 C# Markup 2 API를 즐겨보세요.
ThemeResource
는 C# intellisense에서 검색 가능하며 강력한 형식입니다.지금 시도해 볼 수 있습니다. 위에 나열된 NuGet을 참조하세요. 새로운 기능에 대한 문서와 새로운 시작 가이드가 다음 릴리스 에 곧 제공될 예정입니다!
2023년 6월 27일
2.2 .NET MAUI 지원 출시 및 시작
2023년 3월 25일
설문조사 결과가 나왔습니다! 그리고 승자는...
C# Markup 2의 다음 빌드 항목에 대한 2023년 3월 설문 조사 결과가 나왔습니다!
놀랍게도 답변에 Avalonia UI용 C# Markup 2에 대한 요청이 추가되었습니다. 큰 호응을 얻었고, 2위에 근접했습니다.
다음은 "기타" 옵션 Blazor 및 AvaloniaUI에 대한 좋아요를 포함한 설문 조사 결과입니다.
그리고 승자는 MAUI용 C# Markup 2 입니다!
릴리스를 확인하려면 이 저장소를 보고 별표를 표시하세요. #CSharpForMarkup 트윗을 통해 진행 상황을 확인할 수도 있습니다. 응답해 주셔서 감사합니다.
2023년 2월 28일
주요 릴리스 - WinUI 3용 C# Markup 2 버전 2.0!
WinUI 3용 C# Markup 2 버전 2.0이 출시되었습니다! .NET 7, C# 11, 최신 Windows 앱 SDK 및 Uno 플랫폼으로 완전히 업데이트되었습니다. 6개의 지원되는 대상 플랫폼, C# 핫 리로드 지원 및 dotnet 새 프로젝트 템플릿을 포함한 많은 개선이 이루어졌습니다.
Applicita에서 제공한 정보
이 릴리스를 가능하게 해준 Applicita에 특별히 감사드립니다. 회사가 이런 방식으로 OSS를 지원하는 것을 보는 것은 고무적입니다(Applicita는 또한 다른 몇 가지 유용한 라이브러리를 오픈 소스로 제공했습니다).
이번 릴리스의 새로운 기능에 대한 자세한 내용은 여기에서 확인하세요.
2023년 2월 16일
WinUI 3 및 Uno 플랫폼용 C# Markup 2의 새 릴리스가 2023년 2월에 출시됩니다.
.NET 7, C# 11, 최신 Windows 앱 SDK 및 Uno 플랫폼으로 업데이트되었습니다. C# 핫 리로드 지원 및 dotnet 새 프로젝트 템플릿을 포함하여 많은 개선이 이루어졌습니다. 이 공간을 주목하세요!
2022년 4월 14일
새로운 0.8 릴리스:
ControlTemplate
지원 및Style
개선 사항이 추가되었습니다!
전체 개선 목록은 여기와 여기를 참조하세요.
2022년 2월 15일
새로운 0.6 릴리스: WPF 및 많은 개선 사항이 추가되었습니다!
개선 사항의 전체 목록은 여기를 참조하세요.
2021년 11월 30일
UNOCONF 2021에서 C# 마크업 2가 발표되었습니다!
이 첫 번째 미리 보기는 C# 10 및 .NET 6이 포함된 WinUI 3 및 Uno 플랫폼(브라우저 웹 어셈블리 포함)을 대상으로 합니다. 빠른 내부 개발 루프를 위해 .NET Hot Reload를 지원합니다.
UNOCONF 2021에서 C# Markup 2 발표를 참조하세요.
Build()
, Assign()
및 Invoke()
와 통합되는지 확인하세요.먼저 개발 환경이 준비되었는지 확인하세요.
기존 Uno 플랫폼 5.2 솔루션을 선택하거나 Uno 플랫폼 템플릿 마법사 또는 dotnet new unoapp 템플릿을 사용하여 새 솔루션을 만듭니다. 어떤 옵션이든 자유롭게 선택하세요. C# Markup 2는 모든 대상 플랫폼에서 .NET 8 또는 .NET 7, MVUX 또는 MVVM, XAML 또는 Uno C# Markup을 사용하여 Uno 5.2를 완벽하게 지원합니다.
Windows App SDK, Uno 플랫폼 등에 대한 템플릿을 얻으려면 dotnet new
용 최신 Modern.CSharp.Templates를 설치하세요.
dotnet new install Modern.CSharp.Templates
템플릿 매개변수에 대한 도움말을 보려면 다음 안내를 따르세요.
dotnet new mcs-uno-markup2 -h
Uno 플랫폼 솔루션에 C# Markup 2 프로젝트를 추가합니다. 예:
cd C:ReposUnoApp1
dotnet new mcs-uno-markup2 --appRootNamespace InnoWvate.UnoApp1 --presentation mvux --allow-scripts Yes
이는 다음을 수행합니다.
작업 예제를 사용하여 새 프로젝트 UnoApp1.Presentation
솔루션에 추가합니다.
New-View.ps1
스크립트Readme.md
프레젠테이션 프로젝트는 C# 마크업 UI 모범 사례에 따라 유지 관리가 가능하도록 사전 구성되어 있습니다.
프레젠테이션 프로젝트에 NuGet 패키지 참조 추가
UnoApp1
프로젝트에 프레젠테이션 프로젝트에 대한 참조를 추가합니다.
솔루션 폴더 이름(위 예에서는 UnoApp1
)과 다른 경우 dotnet new
의 --name
매개 변수를 사용하여 기존 Uno 프로젝트의 이름을 지정할 수 있습니다. 지정된 이름은 새 프로젝트에서도 .Presentation
접미사와 함께 사용됩니다.
Uno 솔루션을 열거나 다시 로드하고 프레젠테이션 프로젝트의 Readme.md
단계에 따라 시작하세요.
C# Markup 2 사용 방법을 알아보려면 아래 기능 설명을 읽어보세요.
더 완전한 예를 보려면 이 저장소의 예제 앱을 참조하세요.
C# 마크업 2에는 기존 UI 프레임워크를 위한 완전한 선언적이며 유연한 API가 포함되어 있습니다. 연결된 속성을 포함하여 거의 모든 레이아웃, 보기 및 속성을 표시하고 각 마크업 도우미/매개변수를 기본 UI 개체/속성에 대한 인라인 문서에 연결하는 전체 인라인 문서를 포함합니다.
C# Markup 2가 제공하는 풍부한 UI 프레임워크에는 최대 500개 이상의 UI 개체 유형이 포함될 수 있습니다. 예를 들어 레이아웃, 보기 및 스타일뿐만 아니라 브러시, 서식 있는 텍스트 요소, 그리기 기본 요소, 변환, 애니메이션, 시각적 상태 등도 포함됩니다. 또한 C# 마크업은 레이아웃, 바인딩, 변환기, 템플릿 등을 위한 강력하고 간결한 편의 API를 제공합니다.
레이아웃, 보기, 속성 및 속성 값은 다음과 같습니다.
모든 속성은 확장 메서드(뷰 유형 또는 기본 유형에 정의된 속성 및 연결된 속성)를 사용하여 설정할 수 있습니다.
뷰 유형에 직접 정의된 속성은 명명된 매개변수를 사용하여 설정할 수도 있습니다.
이는 기본 유형을 취하는 속성에 주로 유용합니다.
열거형 값을 취하는 속성에는 확장 메서드가 있으므로 열거형 이름을 반복할 필요가 없습니다.
(예: TextAlignment: TextAlignment.Center
):
연결된 속성 이름 앞에는 정의 유형과 밑줄이 붙습니다.
한 번의 호출로 동일한 정의 유형에 대해 여러 연결된 속성 값을 설정할 수 있습니다.
이 외에도 가장 일반적으로 사용되는 매개변수만 포함하는 일부 뷰 유형에 대한 편의 오버로드가 있습니다.
공통 속성 값 유형에 대한 to
네임스페이스에 암시적 변환기가 제공됩니다.
이것들은 다음과 같습니다:
string
값을 허용하는 모든 변환기string
이외의 다른 유형도 허용하는 추가 수동 변환기입니다. 예: Button() .CornerRadius (2.5)
또는Button() .CornerRadius ((2.5, 0, 2.5, 0))
to.Point
사용한 예:
Button ( ) . Background ( RadialGradientBrush ( Center : ( 50 , 50 ) , GradientOrigin : ( 100 , 50 ) ) )
to.TimeSpan
및 to.Duration
사용하는 예:
ColorAnimation ( BeginTime : " 0:0:5 " , Duration : 2.5 )
대부분의 경우 to.
유형은 지원되는 값과 형식을 설명합니다. 특히 문자열의 경우 추측을 피할 수 있습니다.
스타일은 다음과 같이 할당할 수 있습니다.
그리고 다음과 같이 정의됩니다.
WPF에서는 스타일 설정기 값을 바인딩할 수 있습니다(WinUI 3에서는 이를 지원하지 않음).
DataTemplate
은 Func<UIElement>
로 전달됩니다.
ControlTemplate
은 다음과 같이 생성할 수 있습니다.
.BindTemplate()
메서드를 사용하면 템플릿 속성을 템플릿 기반 부모에 바인딩할 수 있습니다.targetType
매개변수는 선택사항입니다.b
여기에는 null 값의 static UI_Button
필드가 있습니다. 이 예에서는 Button
에 대한 바인딩 표현식을 편집할 때 Intellisense를 얻는 한 가지 방법만 보여줍니다. 자세한 내용은 바인딩 능력을 참조하세요. 암시적 또는 명시적 Style
에서 ControlTemplate
사용하는 방법은 다음과 같습니다.
그리드 행과 열에 숫자 대신 열거형을 사용할 수 있습니다. 이렇게 하면 가독성이 향상되고 행과 열을 추가/제거/재정렬할 때 수동으로 번호를 다시 매길 필요가 없습니다.
마크업 도우미의 일반적인 조합에 대한 대안으로 속기 도우미가 포함되어 있습니다.
모든 레이아웃은 children
의 null
값을 무시합니다. 이를 통해 페이지 (재) 빌드 시 표현식 값에 따라 조건부 보기를 가질 수 있습니다.
Spread
도우미를 사용하면 children
목록의 특정 위치에 다양한 수의 하위 항목을 삽입할 수 있습니다(Flutter가 제공하는 것과 유사).
C# 10 CallerArgumentExpression 특성 덕분에 성능이 좋은 바인딩 경로를 지정하기 위해 문자열이나 nameof()
사용할 필요가 없습니다. 대신 C# 표현식을 사용하여 완전한 Intellisense, 컴파일러 확인, 이름 변경 지원 등의 모든 이점을 누릴 수 있습니다.
위 이미지의 intellisense 설명에서 pathExpression
매개변수는 다음과 같은 여러 편의 바인딩 구문을 지원한다는 점에 유의 하세요.
viewmodel.path
|| (viewmodel expression).path
, 여기서 path
를 포함할 수 있습니다 .
예:.Bind (vm.SelectedTweet)
는 "SelectedTweet"에 바인딩됩니다..Bind ((vm.SelectedTweet).Title)
"제목"에 바인딩됩니다..Bind ((vm.SelectedTweet).Author.Name)
"Author.Name"에 바인딩됩니다.?
null 값 유형 인스턴스를 사용하면 개체 인스턴스 없이도 C#의 장점을 누릴 수 있습니다. 예:.Bind (vm?.SelectedTweet?.Title)
"제목"에 바인딩됩니다.?
표현식의 값은 신경 쓰지 않아도 런타임에 표현식이 평가되기 때문에 필요할 수 있습니다. CallerArgumentExpression 속성은 표현식 값 외에 표현식 문자열도 제공합니다..Bind ("SelectedTweet")
"SelectedTweet"에 바인딩됩니다. pathExpression
의 주변 "
, @
또는 공백 문자는 무시됩니다.
Bind
UI 프레임워크가 바인딩을 위해 제공하는 거의 모든 기능을 지원합니다. 또한 다음을 수행할 수 있는 Bind
오버로드가 많이 있습니다.
일반적인 마크업 페이지는 다음과 같이 시작됩니다.
FlutterPage.cs
:
using CSharpMarkup . < UI framework name > ;
using static CSharpMarkup . < UI framework name > . Helpers ;
namespace Examples ;
partial class FlutterPage
{
public void Build ( ) => Content =
partial class
사용에 유의하세요. 이를 통해 UI 마크업을 UI 로직 과 분리할 수 있습니다.
FlutterPage.logic.cs
:
using < UI framework namespace > . Controls ;
namespace Examples ;
public sealed partial class FlutterPage : Page , IBuild
{
readonly FlutterViewModel vm ;
public FlutterPage ( )
{
InitializeComponent ( ) ; // Only needed for WinUI
DataContext = vm = < obtain viewmodel instance > ;
Build ( ) ;
중요한:
<page>.cs
와 같은 C# 마크업 파일 에서:
CSharpMarkup.*
네임스페이스 사용을 포함하지만 Microsoft.UI.Xaml 사용과 같은 UI 개체 모델 사용은 포함하지 않습니다 using Microsoft.UI.Xaml;
(설계상 CSharpMarkup 네임스페이스의 유형 이름은 UI 객체 모델의 유형 이름과 동일하므로 둘 다 포함하면 모호함이 발생합니다)
UI 개체 모델 사용을 UI 논리 파일로 제한해 보세요. 필요한 경우 C# 마크업 파일에서 UI 개체 모델을 안전하게 사용할 수 있습니다. 그러면 좋은 방법은 별칭을 사용하여 전역 네임스페이스를 정의하는 것입니다. 예를 들어 global using UI = Microsoft.UI;
자세한 지침은 dotnet new mcs-uno-markup2
로 생성된 프로젝트의 GlobalUsings.cs
에 있는 설명을 참조하세요.
<page>.logic.cs
와 같은 UI 로직 파일 에서:
CSharpMarkup
개체를 사용하지 마세요.
마크업 개체 인스턴스는 마크업 표현식 외부에서 사용하는 것이 안전하지 않습니다(성능 기능으로 인해 - 각 마크업 개체 유형에는 각 보기에 추가 개체를 할당하는 것을 방지하기 위해 단일 정적 인스턴스가 있습니다). 이것이 바로 Assign
및 Invoke
(아래 참조)가 마크업 개체 자체 대신 마크업 개체에 포함된 UI 개체를 논리에 전달하는 이유입니다.
Assign
및 Invoke
사용하면 UI 마크업을 UI 로직과 통합할 수 있습니다.
SearchPage.cs
:
SearchPage.logic.cs
:
SearchPage.cs
:
SearchPage.logic.cs
:
메모 :
SearchPage.cs
에서StackPanel
및TextBox
는 마크업 개체 유형이지만
SearchPage.logic.cs
에서는 해당 UI 프레임워크 개체 유형입니다.
마크업에 색상을 적절하게 적용할 수 있는 C# 마크업 IDE 확장(아직...)은 없지만 Visual Studio 옵션에서 다음 해결 방법을 사용하면 C# 마크업 가독성을 높일 수 있습니다.
Fonts and Colors
아래에서 User Types - Classes
에서 User Members - Methods
(사용자 Custom...
버튼 사용) 색상을 복사합니다. 이제 뷰와 속성의 마크업 색상은 더 이상 동일하지 않습니다.