.NET MAUI Preview 14로 메뉴 모음 UI 만들기

22397 단어 mauidesktopcsharpdotnet
2022년 3월 16일, Microsoft released .NET MAUI Preview 14 . 이 새로운 Preview 14 릴리스에서 .NET MAUI는 일반적으로 Windows의 데스크톱 앱 상단에 배치할 수 있는 메뉴인 메뉴 모음 UI를 제공합니다. 이 메뉴 표시줄은 macOS의 제목 표시줄로 볼 수 있습니다. .NET MAUI Preview 14를 사용하여 .NET MAUI 응용 프로그램에서 이 메뉴 표시줄로 작업하는 것이 즐거웠습니다.

이 블로그에서는 사진 뷰어 및 편집기 .NET MAUI 데스크톱 응용 프로그램을 만들고 여기에 메뉴 표시줄을 통합할 것입니다.

사진 뷰어 및 편집기 앱 만들기



1단계: 먼저 Visual Studio를 사용하여 간단한.NET MAUI Preview 14 application을 만듭니다.

2단계: 메뉴는 Shell 및 NavigationPage에만 표시될 수 있습니다. 이 예에서는 NavigationPage를 사용하여 메뉴를 표시하도록 선택했습니다. 따라서 MainPage를 NavigationPage로 로드합니다.

public partial class App : Application
{
  public App()
  {
    InitializeComponent();MainPage = new NavigationPage(new MainPage());
  }
}


3단계: 이제 Content 페이지에서 MenuBarItems 컬렉션을 선언하여 메뉴를 표시합니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MenuBarUIApplication.MainPage"
             BackgroundColor="{DynamicResource SecondaryColor}">
  <ContentPage.MenuBarItems></ContentPage.MenuBarItems>
</ContentPage>


4단계: 필요한 항목을 MenuBarItems 컬렉션에 추가하여 메뉴에 표시합니다. 이 사진 뷰어 및 편집기 응용 프로그램에서 파일 및 편집 메뉴를 추가하겠습니다. 파일 메뉴에는 열기 , 저장 및 종료 옵션이 포함되며 편집 메뉴에는 회전 , 확대/축소 및 재설정이 포함됩니다.

다음 코드 예제를 참조하십시오.

<ContentPage.MenuBarItems>
 <MenuBarItem Text="File">
  <MenuFlyoutItem Text="Open" Clicked="MenuFlyoutItem_Clicked" />
  <MenuFlyoutItem Text="Save" />
  <MenuFlyoutItem Text="Exit" />
 </MenuBarItem>
 <MenuBarItem Text="Edit">
  <MenuFlyoutSubItem Text="Rotate">
  </MenuFlyoutSubItem>
  <MenuFlyoutItem Text="Zoom" Clicked="MenuFlyoutItem_Clicked_5" />
  <MenuFlyoutItem Text="Reset" Clicked="MenuFlyoutItem_Clicked_6" />
 </MenuBarItem>
</ContentPage.MenuBarItems>


5단계: 이제 MenuBarItem에 계단식 메뉴 항목을 추가하겠습니다. 먼저 Rotate MenuBarItem에 하위 메뉴를 추가합니다. 회전 메뉴에는 계단식 메뉴로 90도 회전, 180도 회전, 270도 회전 및 360도 회전 옵션이 있습니다.

다음 코드를 참조하십시오.

<ContentPage.MenuBarItems>
 <MenuBarItem Text="File">
  <MenuFlyoutItem Text="Open" Clicked="MenuFlyoutItem_Clicked" />
  <MenuFlyoutItem Text="Save" />
  <MenuFlyoutItem Text="Exit" />
 </MenuBarItem>
 <MenuBarItem Text="Edit">
   <MenuFlyoutSubItem Text="Rotate">
    <MenuFlyoutItem Text="Rotate 90" Clicked="MenuFlyoutItem_Clicked_1"/>
    <MenuFlyoutItem Text="Rotate 180" Clicked="MenuFlyoutItem_Clicked_2"/>
    <MenuFlyoutItem Text="Rotate 270" Clicked="MenuFlyoutItem_Clicked_3"/>
    <MenuFlyoutItem Text="Rotate 360" Clicked="MenuFlyoutItem_Clicked_4"/>
   </MenuFlyoutSubItem>
   <MenuFlyoutItem Text="Zoom" Clicked="MenuFlyoutItem_Clicked_5" />
   <MenuFlyoutItem Text="Reset" Clicked="MenuFlyoutItem_Clicked_6" />
 </MenuBarItem>
</ContentPage.MenuBarItems>


6단계: 이제 이미지 컨트롤을 그리드 내 ContentPage의 콘텐츠로 추가하여 경계를 자릅니다. 이미지 컨트롤을 사용하여 사진을 보고 편집할 수 있습니다.

다음 코드 예제를 참조하십시오.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MenuBarUIApplication.MainPage"
             BackgroundColor="{DynamicResource SecondaryColor}">
  <ContentPage.MenuBarItems>
   <MenuBarItem Text="File">
    <MenuFlyoutItem Text="Open" Clicked="MenuFlyoutItem_Clicked" />
    <MenuFlyoutItem Text="Save" />
    <MenuFlyoutItem Text="Exit" />
   </MenuBarItem>
   <MenuBarItem Text="Edit">
    <MenuFlyoutSubItem Text="Rotate">
     <MenuFlyoutItem Text="Rotate 90" Clicked="MenuFlyoutItem_Clicked_1"/>
     <MenuFlyoutItem Text="Rotate 180" Clicked="MenuFlyoutItem_Clicked_2"/>
     <MenuFlyoutItem Text="Rotate 270" Clicked="MenuFlyoutItem_Clicked_3"/>
     <MenuFlyoutItem Text="Rotate 360" Clicked="MenuFlyoutItem_Clicked_4"/>
    </MenuFlyoutSubItem>
    <MenuFlyoutItem Text="Zoom" Clicked="MenuFlyoutItem_Clicked_5" />
    <MenuFlyoutItem Text="Reset" Clicked="MenuFlyoutItem_Clicked_6" />
   </MenuBarItem>
  </ContentPage.MenuBarItems><Grid IsClippedToBounds="True">
  <Image x:Name="photoViewerImage"
         Source="dotnet_bot.png"
         HorizontalOptions="Center" />
  </Grid>
</ContentPage>


7단계: 마지막으로 MenuBarItems에 대한 코드 비하인드 로직을 추가하여 각각의 작업을 수행합니다. 데스크톱 플랫폼에서 파일을 선택하는 UI를 제공하는 .NET MAUI Preview 14의 FilePicker를 사용하고 있습니다. 또한 Image 컨트롤의 ViewExtensions.RotateTo 및 ViewExtensions.ScaleTo 메서드를 사용하여 각각 회전 및 확대/축소 작업을 수행하고 있습니다.

private async void MenuFlyoutItem_Clicked(object sender, EventArgs e)
{
  var result = await OpenPicker(PickOptions.Images);
}async Task<FileResult> OpenPicker(PickOptions imageOption)
{
try
{
  var value = await FilePicker.PickAsync(imageOption);
  if (value != null)
  {
    if (value.FileName.EndsWith("png", StringComparison.OrdinalIgnoreCase) ||
    value.FileName.EndsWith("jpg", StringComparison.OrdinalIgnoreCase))
    {
      var stream = await value.OpenReadAsync();
      this.photoViewerImage.Source = ImageSource.FromStream(() => stream);
    }
  }return value;
}
catch (Exception ex)
{
}return null;
}private void MenuFlyoutItem_Clicked_1(object sender, EventArgs e)
{
  this.photoViewerImage.RotateTo(90, 500, Easing.BounceIn);
}private void MenuFlyoutItem_Clicked_2(object sender, EventArgs e)
{
  this.photoViewerImage.RotateTo(180, 500, Easing.BounceIn);
}
private void MenuFlyoutItem_Clicked_3(object sender, EventArgs e)
{
  this.photoViewerImage.RotateTo(270, 500, Easing.BounceIn);
}
private void MenuFlyoutItem_Clicked_4(object sender, EventArgs e)
{
  this.photoViewerImage.RotateTo(360, 500, Easing.BounceIn);
}
private void MenuFlyoutItem_Clicked_5(object sender, EventArgs e)
{
  this.photoViewerImage.ScaleTo(2, 500, Easing.BounceOut);
}
private void MenuFlyoutItem_Clicked_6(object sender, EventArgs e)
{
  this.photoViewerImage.ScaleTo(1, 500, Easing.BounceOut);
  this.photoViewerImage.RotateTo(0, 500, Easing.BounceIn);
}


이제 MenuBarItems를 사용하는 메뉴와 함께 간단한 .NET MAUI Preview 14 Photo Viewer 및 Editor가 준비되었습니다.


.NET MAUI 미리 보기 14를 사용하는 MenuBarItem

GitHub 참조



또한 Creating a Menu Bar UI with .NET MAUI Preview 14 on GitHub 의 전체 예제를 확인할 수 있습니다.

.NET MAUI Preview 14와의 동기화 호환성



Syncfusion.NET MAUI controls은 Essential Studio for .NET MAUI 2022 Volume 1 릴리스에서 .NET MAUI Preview 14와 호환됩니다. 이 릴리스는 3월 말에 출시될 예정입니다. NuGet Gallery에서 제어 패키지를 설치하고 .NET MAUI Preview 14 애플리케이션에서 사용할 수 있습니다.

결론



이 블로그를 즐기셨기를 바라며 읽어주셔서 감사합니다! 자세한 내용은 .NET MAUI Preview 14 기사를 참조하십시오. 또한 .NET MAUI Preview 14 release notes 을 확인하십시오.

.NET MAUI 제품군에서 보고 싶은 피드백, 특별 요구 사항 또는 컨트롤이 있는 경우 아래 의견 섹션에 알려주십시오.

또한 support forum , support portal 또는 feedback portal 을 통해 문의하실 수 있습니다. 기꺼이 도와드리겠습니다!

관련 블로그


  • Touching Base with .NET MAUI Essentials
  • Create a Hyperlink UI in .NET MAUI Preview 13
  • 5 Important Things to Make Your Cross-Platform (.NET MAUI) App Accessible
  • Learn How to Use Dependency Injection in .NET MAUI
  • Create Your First .NET MAUI App with Microsoft MVP Codrina Merigo [Webinar Show Notes]
    • Flutter-WebRTC 종합 가이드
    AI를 사용한 테스트 툴 "Testim"의 거친 특징

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage