ZIndex를 사용하여 .NET MAUI에서 오버레이 요소 처리

.NET MAUI에서 작업 중이고 특정 조건에 따라 공개해야 하는 두 개 이상의 컨트롤이 서로 위에 있는 경우 이 문서가 의심할 여지 없이 해당 문제를 처리하는 데 도움이 될 것입니다.

요소가 z축에 표시되는 순서는 .NET MAUI Preview 12에서 IView 인터페이스에서 상속된 모든 요소에 추가된 속성인 ZIndex로 표시됩니다. ZIndex 값이 더 높은 컨트롤은 다른 컨트롤 위에 배치됩니다. 예를 들어 ZIndex가 0인 컨트롤은 아래쪽에 있고 ZIndex가 1 이상인 컨트롤은 위쪽(표시됨)에 있습니다.

이 블로그에서는 기본 렌더링을 사용하는 ZIndex 동작과 .NET MAUI 보기를 전면으로 가져오는 절차를 살펴보겠습니다.

ZIndex를 처리하지 않고 렌더링 컨트롤

다음 코드 예제는 ZIndex를 정의하지 않고 그리드로 보기 요소를 정의합니다.

<Grid>
    <Label Text="View 1"  Margin="10,0,0,0" BackgroundColor="Green" Style="{StaticResource labelStyle}" />
    <Label Text="View 2" Margin="30,30,0,0" BackgroundColor="Navy" Style="{StaticResource labelStyle}"/>
    <Label Text="View 3"  Margin="60,60,0,0" BackgroundColor="Yellow" Style="{StaticResource labelStyle}"/>
    <Label Text="View 4"  Margin="90,90,0,0" BackgroundColor="SkyBlue" Style="{StaticResource labelStyle}"/>
</Grid>

다음 스크린샷은 위의 XAML 코드의 결과를 보여줍니다.

ZIndex를 사용한 렌더링 컨트롤

다음 코드 예제에서 각 보기는 ZIndex 값으로 정의됩니다. 여기서는 이전 예제에서 최상위 레이어로 칠해진 마지막 뷰가 다른 뷰보다 낮은 ZIndex 값으로 설정됩니다.

<Grid>
    <Label Text="View 1" ZIndex="4" Margin="10,0,0,0" BackgroundColor="Green" Style="{StaticResource labelStyle}" />
    <Label Text="View 2" ZIndex="3" Margin="30,30,0,0" BackgroundColor="Navy" Style="{StaticResource labelStyle}"/>
    <Label Text="View 3" ZIndex="2" Margin="60,60,0,0" BackgroundColor="Yellow" Style="{StaticResource labelStyle}"/>
    <Label Text="View 4" ZIndex="1" Margin="90,90,0,0" BackgroundColor="SkyBlue" Style="{StaticResource labelStyle}"/>
</Grid>

보기는 할당된 ZIndex 값을 기반으로 렌더링됩니다. 여기서 View1은 ZIndex 값이 더 높기 때문에 다른 레이어 위에 칠해집니다.

.NET MAUI 보기를 전면으로 가져오기

다음 코드 예제에서 각 보기는 초기 로드 중에 ZIndex 값으로 정의됩니다.

<Grid>
    <Label x:Name="view1" Text="View 1" ZIndex="4" Margin="10,0,0,0" BackgroundColor="Green" Style="{StaticResource labelStyle}" >
        <Label.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding BringToFront}" CommandParameter="{Binding Source={x:Reference view1}}"/>
        </Label.GestureRecognizers>
    </Label>
    <Label x:Name="view2" Text="View 2" ZIndex="3" Margin="30,30,0,0" BackgroundColor="Navy" Style="{StaticResource labelStyle}">
        <Label.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding BringToFront}" CommandParameter="{Binding Source={x:Reference view2}}"/>
        </Label.GestureRecognizers>
    </Label>
    <Label x:Name="view3" Text="View 3" ZIndex="2" Margin="60,60,0,0" BackgroundColor="Yellow" Style="{StaticResource labelStyle}">
        <Label.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding BringToFront}" CommandParameter="{Binding Source={x:Reference view3}}"/>
        </Label.GestureRecognizers>
    </Label>
    <Label x:Name="view4" Text="View 4" ZIndex="1" Margin="90,90,0,0" BackgroundColor="SkyBlue" Style="{StaticResource labelStyle}">
        <Label.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding BringToFront}" CommandParameter="{Binding Source={x:Reference view4}}"/>
        </Label.GestureRecognizers>
    </Label>
</Grid>

이제 런타임에서 .NET MAUI 보기의 ZIndex 값을 동적으로 업데이트할 것입니다. 여기에서 클릭 동작에 따라 보기를 앞으로 가져오도록 선택합니다. 다음 코드 예제를 참조하십시오.

private async void OnBringToFrontAsync(object view)
{
    var viewName = (view as Label).Text;
    bool answer = await Application.Current.MainPage.DisplayAlert("Bring to front", "I am "+viewName + " , " + "Shall i move to front ?", "Yes", "No");
    if (answer)
    {
        (view as Label).ZIndex = Zindex;
        Zindex += 1;
    }
}

자원

ZIndex를 사용하려면 GitHub에서 dynamically update ZIndex in .NET MAUI 프로젝트를 사용할 수 있습니다.

결론

이제 .NET MAUI 응용 프로그램에서 ZIndex를 사용하는 것에 대한 명확한 아이디어를 가지셨기를 바랍니다.

Syncfusion.NET MAUI suite은 .NET MAUI 응용 프로그램을 구축하기 위한 10개 이상의 UI 컨트롤과 라이브러리를 제공합니다. 사용해 보고 의견을 공유해 주세요.

MAUI에 발을 담그기 전에 조금 더 기다려야 하는 경우 Syncfusion의 Xamarin 제품군은 기본 편집기에서 DataGrid , Charts , ListView 및 Rich Text Editor과 같은 강력한 고급 컨트롤에 이르기까지 150개 이상의 UI 컨트롤을 제공합니다. ) .

의견이나 질문이 있는 경우 support forum , support tickets 또는 feedback portal 을 통해 문의할 수 있습니다. 기꺼이 도와드리겠습니다!

읽어 주셔서 감사합니다!

관련 블로그

Introducing the New .NET MAUI Range Selector

Generating QR Codes and Other Barcodes is Now Easy in .NET MAUI

Introducing the New .NET MAUI Linear Gauge Control

How to Add an Alert Notification UI to Your .NET MAUI App