BindableLayout

  • 아티클

Browse sample. 샘플 찾아보기

.NET 다중 플랫폼 앱 UI(.NET MAUI) 바인딩 가능 레이아웃을 사용하면 클래스에서 Layout 파생된 모든 레이아웃 클래스가 항목 컬렉션에 바인딩하여 콘텐츠를 생성할 수 있으며 각 항목의 모양을 설정할 수 있습니다 DataTemplate.

바인딩 가능한 레이아웃은 클래스에서 BindableLayout 제공하며, 이 레이아웃은 다음과 같은 연결된 속성을 노출합니다.

  • ItemsSource – 레이아웃에서 표시할 항목의 IEnumerable 컬렉션을 지정합니다.
  • ItemTemplate – 레이아웃에 DataTemplate 표시되는 항목 컬렉션의 각 항목에 적용할 항목을 지정합니다.
  • ItemTemplateSelector– 런타임에 항목을 선택하는 DataTemplate 데 사용할 항목을 지정 DataTemplateSelector 합니다.

참고 항목

속성과 ItemTemplateItemTemplateSelector 속성이 모두 설정되면 속성이 ItemTemplate 우선합니다.

또한 클래스는 BindableLayout 다음 바인딩 가능한 속성을 노출합니다.

  • EmptyView – 속성이 string 있을 때 ItemsSource 또는 속성에서 지정한 컬렉션이 null비어 있거나 비어 있을 때 표시될 뷰를 ItemsSourcenull 지정합니다. 기본값은 null입니다.
  • EmptyViewTemplate– 속성이 있을 때 ItemsSource 또는 속성에 지정된 ItemsSource 컬렉션이 null비어 있거나 비어 있을 때 표시할 값을 null 지정 DataTemplate 합니다. 기본값은 null입니다.

참고 항목

속성과 EmptyViewTemplateEmptyViewTemplate 속성이 모두 설정되면 속성이 EmptyView 우선합니다.

이러한 모든 속성은 클래스에서 파생되는 , FlexLayoutGrid, HorizontalStackLayout, StackLayout및 VerticalStackLayout 클래스에 Layout 연결할 AbsoluteLayout수 있습니다.

속성이 BindableLayout.ItemsSource 항목의 컬렉션으로 설정되고 -derived 클래스에 Layout연결된 경우 컬렉션의 각 항목은 표시를 위해 Layout-derived 클래스에 추가됩니다. 그러면 -derived 클래스는 Layout기본 컬렉션이 변경될 때 해당 자식 뷰를 업데이트합니다.

바인딩 가능한 레이아웃은 표시할 항목 컬렉션이 작고 스크롤 및 선택이 필요하지 않은 경우에만 사용해야 합니다. 바인딩 가능한 레이아웃을 래핑하여 스크롤을 제공할 수 있지만 바인딩 가능한 레이아웃 ScrollView에 UI 가상화가 없기 때문에 권장되지 않습니다. 스크롤이 필요한 경우 UI 가상화(예: ListView 또는 CollectionView)를 포함하는 스크롤 가능한 뷰를 사용해야 합니다. 이 권장 사항을 준수하지 않으면 성능 문제가 발생할 수 있습니다.

Important

기술적으로는 클래스에서 Layout 파생된 모든 레이아웃 클래스에 바인딩 가능한 레이아웃을 연결할 수 있지만, 특히 클래스 및 Grid 클래스에 대해 AbsoluteLayout 바인딩 가능한 레이아웃을 연결하는 것이 항상 실용적인 것은 아닙니다. 예를 들어 바인딩 가능한 레이아웃을 사용하여 데이터 Grid 컬렉션을 표시하려는 시나리오를 고려합니다. 여기서 컬렉션의 각 항목은 여러 속성을 포함하는 개체입니다. 각 행은 Grid 컬렉션의 개체를 표시해야 하며 각 열에는 Grid 개체의 속성 중 하나가 표시됩니다. DataTemplate 바인딩 가능한 레이아웃의 경우 단일 개체만 포함할 수 있으므로 해당 개체는 각각 특정 Grid 열에 개체의 속성 중 하나를 표시하는 여러 보기를 포함하는 레이아웃 클래스여야 합니다. 이 시나리오는 바인딩 가능한 레이아웃으로 실현될 수 있지만, 부모 Grid 에 바인딩된 컬렉션의 각 항목에 대한 자식 Grid 이 포함되며 이는 매우 비효율적이며 문제가 있는 레이아웃 사용 Grid 입니다.

데이터로 바인딩 가능한 레이아웃 채우기

바인딩 가능한 레이아웃은 해당 ItemsSource 속성을 구현 IEnumerable하는 컬렉션으로 설정하고 파생 클래스에 연결하여 데이터로 Layout채워집니다.

<Grid BindableLayout.ItemsSource="{Binding Items}" />

해당하는 C# 코드는 다음과 같습니다.

IEnumerable<string> items = ...;
Grid grid = new Grid();
BindableLayout.SetItemsSource(grid, items);

BindableLayout.ItemsSource 연결된 속성이 레이아웃에 설정되어 있지만 BindableLayout.ItemTemplate 연결된 속성이 설정되지 않은 경우 컬렉션의 모든 항목은 클래스에서 IEnumerable 만든 항목에 의해 LabelBindableLayout 표시됩니다.

항목 모양 정의

연결된 속성을 다음으로 설정하여 바인딩 가능한 레이아웃에서 각 항목의 BindableLayout.ItemTemplate 모양을 정의할 DataTemplate수 있습니다.

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal"
             ...>
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"
                   Aspect="AspectFill"
                   WidthRequest="44"
                   HeightRequest="44"
                   ... />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

해당하는 C# 코드는 다음과 같습니다.

DataTemplate imageTemplate = ...;
StackLayout stackLayout = new StackLayout();
BindableLayout.SetItemsSource(stackLayout, viewModel.User.TopFollowers);
BindableLayout.SetItemTemplate(stackLayout, imageTemplate);

이 예제에서는 컬렉션의 TopFollowers 모든 항목이 다음 항목에 정의된 뷰에 Image 의해 표시됩니다.DataTemplate

.NET MAUI bindable layout with a DataTemplate.

데이터 템플릿에 대한 자세한 내용은 데이터 템플릿을 참조 하세요.

런타임에 항목 모양 선택

연결된 속성을 DataTemplateSelector다음으로 설정 BindableLayout.ItemTemplateSelector 하여 런타임에 바인딩 가능한 레이아웃의 각 항목 모양을 항목 값에 따라 선택할 수 있습니다.

<FlexLayout BindableLayout.ItemsSource="{Binding User.FavoriteTech}"
            BindableLayout.ItemTemplateSelector="{StaticResource TechItemTemplateSelector}"
            ... />

해당하는 C# 코드는 다음과 같습니다.

DataTemplateSelector dataTemplateSelector = new TechItemTemplateSelector { ... };
FlexLayout flexLayout = new FlexLayout();
BindableLayout.SetItemsSource(flexLayout, viewModel.User.FavoriteTech);
BindableLayout.SetItemTemplateSelector(flexLayout, dataTemplateSelector);

다음 예제에서는 클래스를 보여줍니다.TechItemTemplateSelector

public class TechItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate DefaultTemplate { get; set; }
    public DataTemplate MAUITemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return (string)item == ".NET MAUI" ? MAUITemplate : DefaultTemplate;
    }
}

클래스는 TechItemTemplateSelectorDefaultTemplateMAUITemplateDataTemplate 다른 데이터 템플릿으로 설정된 속성을 정의합니다. 이 메서드는 OnSelectTemplate 항목이 MAUITemplate".NET MAUI"와 같을 때 옆에 하트가 있는 진한 빨간색으로 표시된 항목을 반환합니다. 항목이 ".NET MAUI"OnSelectTemplate가 아닌 경우 메서드는 기본 색Label을 사용하여 항목을 표시하는 다음을 반환DefaultTemplate합니다.

.NET MAUI bindable layout with a DataTemplateSelector.

데이터 템플릿 선택기에 대한 자세한 내용은 DataTemplateSelector 만들기를 참조하세요.

데이터를 사용할 수 없는 경우 문자열 표시

속성을 EmptyView 문자열로 설정할 수 있습니다. 이 문자열은 null속성이 있는 경우 ItemsSource 또는 속성에 ItemsSource 지정된 컬렉션이 null 비어 있거나 비어 있는 경우에 표시됩니다Label. 다음 XAML은 이 시나리오의 예를 보여줍니다.

<StackLayout BindableLayout.ItemsSource="{Binding UserWithoutAchievements.Achievements}"
             BindableLayout.EmptyView="No achievements">
    ...
</StackLayout>

그 결과 데이터 바인딩된 컬렉션이 있으면 null속성 값으로 EmptyView 설정된 문자열이 표시됩니다.

Screenshot of a bindable layout string empty view.

데이터를 사용할 수 없는 경우 보기 표시

속성을 EmptyView 뷰로 설정할 수 있습니다. 이 뷰는 속성이 null있는 경우 ItemsSource 또는 속성에 ItemsSource 지정된 컬렉션이 비어 있거나 비어 있을 null 때 표시됩니다. 단일 보기 또는 여러 자식 뷰가 포함된 보기일 수 있습니다. 다음 XAML 예제에서는 여러 자식 뷰가 포함된 보기로 설정된 속성을 보여 EmptyView 줍니다.

<StackLayout BindableLayout.ItemsSource="{Binding UserWithoutAchievements.Achievements}">
    <BindableLayout.EmptyView>
        <StackLayout>
            <Label Text="None."
                   FontAttributes="Italic"
                   FontSize="{StaticResource smallTextSize}" />
            <Label Text="Try harder and return later?"
                   FontAttributes="Italic"
                   FontSize="{StaticResource smallTextSize}" />
        </StackLayout>
    </BindableLayout.EmptyView>
    ...
</StackLayout>

그 결과 데이터 바인딩된 컬렉션이 nullStackLayout 있을 때 해당 자식 뷰와 해당 자식 뷰가 표시됩니다.

Screenshot of a bindable layout empty view with multiple views.

마찬가지로 속성이 EmptyViewTemplate 있을 때 ItemsSource 또는 속성에서 DataTemplate지정 ItemsSource 한 컬렉션이 null비어 있거나 비어 있을 때 표시되는 로 설정할 수 있습니다null. 단일 DataTemplate 보기 또는 여러 자식 뷰가 포함된 뷰를 포함할 수 있습니다. 또한 의 BindingContext 상속 됩니다 BindingContextBindableLayout.EmptyViewTemplate 다음 XAML 예제에서는 단일 보기를 포함하는 속성 집합 DataTemplate 을 보여 EmptyViewTemplate 줍니다.

<StackLayout BindableLayout.ItemsSource="{Binding UserWithoutAchievements.Achievements}">
    <BindableLayout.EmptyViewTemplate>
        <DataTemplate>
            <Label Text="{Binding Source={x:Reference usernameLabel}, Path=Text, StringFormat='{0} has no achievements.'}" />
        </DataTemplate>
    </BindableLayout.EmptyViewTemplate>
    ...
</StackLayout>

그 결과 데이터 바인딩된 컬렉션이 null있으면 해당 컬렉션에 LabelDataTemplate 다음이 표시됩니다.

Screenshot of a bindable layout empty view template.

참고 항목

속성을 EmptyViewTemplate 통해 설정할 DataTemplateSelector수 없습니다.

런타임에 EmptyView 선택

데이터를 사용할 수 없는 경우 표시 EmptyView 될 뷰는 에 개체ResourceDictionary로 ContentView 정의할 수 있습니다. EmptyView 그런 다음 런타임에 일부 비즈니스 논리에 따라 속성을 특정 ContentView속성으로 설정할 수 있습니다. 다음 XAML은 이 시나리오의 예를 보여줍니다.

<ContentPage ...>
    <ContentPage.Resources>
        ...    
        <ContentView x:Key="BasicEmptyView">
            <StackLayout>
                <Label Text="No achievements."
                       FontSize="14" />
            </StackLayout>
        </ContentView>
        <ContentView x:Key="AdvancedEmptyView">
            <StackLayout>
                <Label Text="None."
                       FontAttributes="Italic"
                       FontSize="14" />
                <Label Text="Try harder and return later?"
                       FontAttributes="Italic"
                       FontSize="14" />
            </StackLayout>
        </ContentView>
    </ContentPage.Resources>

    <StackLayout>
        ...
        <Switch Toggled="OnEmptyViewSwitchToggled" />

        <StackLayout x:Name="stackLayout"
                     BindableLayout.ItemsSource="{Binding UserWithoutAchievements.Achievements}">
            ...
        </StackLayout>
    </StackLayout>
</ContentPage>

XAML은 속성 값으로 설정될 개체를 제어하는 개체를 Switch 사용하여 ContentView 페이지 수준에서 ResourceDictionary두 ContentView 개체를 EmptyView 정의합니다. Switch 토글 OnEmptyViewSwitchToggled 되면 이벤트 처리기가 메서드를 ToggleEmptyView 실행합니다.

void ToggleEmptyView(bool isToggled)
{
    object view = isToggled ? Resources["BasicEmptyView"] : Resources["AdvancedEmptyView"];
    BindableLayout.SetEmptyView(stackLayout, view);
}

메서드는 ToggleEmptyView 속성 값에 Switch.IsToggled 따라 개체의 StackLayout 속성을 저장된 ResourceDictionary두 ContentView 개체 중 하나로 설정합니다EmptyView. 그런 다음 데이터 바인딩된 컬렉션이 있으면 nullContentView 속성으로 EmptyView 설정된 개체가 표시됩니다.