ListView 모양 사용자 지정Customizing ListView Appearance

샘플 다운로드 샘플 다운로드Download Sample Download the sample

ListView 외에 목록 표시를 제어 하는 기능에는 ViewCell 목록의 각 행에 대 한 인스턴스.ListView has the ability to control the presentation of the list, in addition to the ViewCell instances for each row in the list.

그룹화Grouping

종종 큰 데이터 집합을 지속적으로 스크롤 목록에 표시 하는 경우 다루기 될 수 있습니다.Often, large sets of data can become unwieldy when presented in a continuously scrolling list. 사용 하도록 설정 하면 그룹화를 더 잘 콘텐츠를 구성 하 고 데이터 탐색을 쉽게 해 주는 플랫폼 특정 컨트롤을 활성화 하 여 이러한 경우 사용자 환경을 향상 시킬 수 있습니다.Enabling grouping can improve the user experience in these cases by better organizing the content and activating platform-specific controls that make navigating data easier.

그룹화에 대 한 활성화 될 때를 ListView, 각 그룹에 대 한 헤더 행이 추가 됩니다.When grouping is activated for a ListView, a header row is added for each group.

그룹화 수 있도록 합니다.To enable grouping:

  • (그룹 목록, 요소의 목록이 되 고 각 그룹) 목록의 목록을 만듭니다.Create a list of lists (a list of groups, each group being a list of elements).
  • 설정 된 ListViewItemsSource 해당 목록에 있습니다.Set the ListView's ItemsSource to that list.
  • 설정 IsGroupingEnabled true로 합니다.Set IsGroupingEnabled to true.
  • 설정할 GroupDisplayBinding 그룹의 제목으로 사용 되는 그룹의 속성에 바인딩됩니다.Set GroupDisplayBinding to bind to the property of the groups that is being used as the title of the group.
  • [선택 사항] 설정할 GroupShortNameBinding 그룹의 짧은 이름으로 사용 되는 그룹의 속성에 바인딩됩니다.[Optional] Set GroupShortNameBinding to bind to the property of the groups that is being used as the short name for the group. 점프 목록 (iOS의 오른쪽에 있는 열)에 대 한 짧은 이름을 사용 됩니다.The short name is used for the jump lists (right-side column on iOS).

그룹에 대 한 클래스를 만들어 시작 합니다.Start by creating a class for the groups:

public class PageTypeGroup : List<PageModel>
    {
        public string Title { get; set; }
        public string ShortName { get; set; } //will be used for jump lists
        public string Subtitle { get; set; }
        private PageTypeGroup(string title, string shortName)
        {
            Title = title;
            ShortName = shortName;
        }

        public static IList<PageTypeGroup> All { private set; get; }
    }

위의 코드에서 All 는 ListView의 바인딩 원본으로 지정 될 목록입니다.In the above code, All is the list that will be given to our ListView as the binding source. TitleShortName 그룹 머리글에 사용할 속성입니다.Title and ShortName are the properties that will be used for group headings.

이 단계에서는 All 은 빈 목록입니다.At this stage, All is an empty list. 프로그램 시작 시 채워집니다 있도록 정적 생성자를 추가 합니다.Add a static constructor so that the list will be populated at program start:

static PageTypeGroup()
{
    List<PageTypeGroup> Groups = new List<PageTypeGroup> {
            new PageTypeGroup ("Alfa", "A"){
                new PageModel("Amelia", "Cedar", new switchCellPage(),""),
                new PageModel("Alfie", "Spruce", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Ava", "Pine", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Archie", "Maple", new switchCellPage(), "grapefruit.jpg")
            },
            new PageTypeGroup ("Bravo", "B"){
                new PageModel("Brooke", "Lumia", new switchCellPage(),""),
                new PageModel("Bobby", "Xperia", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Bella", "Desire", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Ben", "Chocolate", new switchCellPage(), "grapefruit.jpg")
            }
        }
        All = Groups; //set the publicly accessible list
}

위의 코드에서 호출할 수도 수 있습니다 Add 의 요소에 대 groups, 형식의 인스턴스는 PageTypeGroup합니다.In the above code, we can also call Add on elements of groups, which are instances of type PageTypeGroup. 이것이 가능 하므로 PageTypeGroup 에서 상속 List<PageModel>합니다.This is possible because PageTypeGroup inherits from List<PageModel>. 이 위에서 언급 한 목록 패턴 목록의 예입니다.This is an example of the list of lists pattern noted above.

그룹화 된 목록을 표시 하기 위한 XAML는 다음과 같습니다.Here is the XAML for displaying the grouped list:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DemoListView.GroupingViewPage"
    <ContentPage.Content>
        <ListView  x:Name="GroupedView"
        GroupDisplayBinding="{Binding Title}"
        GroupShortNameBinding="{Binding ShortName}"
        IsGroupingEnabled="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                     Detail="{Binding Subtitle}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

그 결과는 다음과 같습니다.This results in the following:

했습니다 보면:Note that we have:

  • 설정할 GroupShortNameBindingShortName 그룹 클래스에 정의 된 속성Set GroupShortNameBinding to the ShortName property defined in our group class
  • 설정할 GroupDisplayBindingTitle 그룹 클래스에 정의 된 속성Set GroupDisplayBinding to the Title property defined in our group class
  • 설정 IsGroupingEnabled trueSet IsGroupingEnabled to true
  • 변경 된 ListViewItemsSource 그룹화 된 목록Changed the ListView's ItemsSource to the grouped list

사용자 지정 그룹화Customizing Grouping

목록에서 그룹화를 설정한 경우 그룹 머리글도 사용자 지정할 수 있습니다.If grouping has been enabled in the list, the group header can also be customized.

방법과 유사 ListViewItemTemplate 행 표시 되는 방식을 정의 하기 위한 ListViewGroupHeaderTemplate합니다.Similar to how the ListView has an ItemTemplate for defining how rows are displayed, ListView has a GroupHeaderTemplate.

XAML의 그룹 헤더를 사용자 지정의 예는 다음과 같습니다.An example of customizing the group header in XAML is shown here:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DemoListView.GroupingViewPage">
    <ContentPage.Content>
        <ListView x:Name="GroupedView"
         GroupDisplayBinding="{Binding Title}"
         GroupShortNameBinding="{Binding ShortName}"
         IsGroupingEnabled="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                    Detail="{Binding Subtitle}"
                    TextColor="#f35e20"
                    DetailColor="#503026" />
                </DataTemplate>
            </ListView.ItemTemplate>
            <!-- Group Header Customization-->
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                    Detail="{Binding ShortName}"
                    TextColor="#f35e20"
                    DetailColor="#503026" />
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
            <!-- End Group Header Customization -->
        </ListView>
    </ContentPage.Content>
</ContentPage>

머리글 및 바닥글Headers and Footers

목록의 요소를 사용 하 여 스크롤 하는 헤더 및 바닥글을 제공 하는 ListView에 대 한 것 같습니다.It is possible for a ListView to present a header and footer that scroll with the elements of the list. 머리글 및 바닥글 문자열의 텍스트 또는 더 복잡 한 레이아웃을 수 있습니다.The header and footer can be strings of text or a more complicated layout. 이 별도로 그룹 섹션합니다.Note that this is separate from section groups.

설정할 수 있습니다 합니다 Header 및/또는 Footer 간단한 문자열 값을 설정할 수 있습니다 하는 더 복잡 한 레이아웃을 합니다.You can set the Header and/or Footer to a simple string value, or you can set them to a more complex layout. 이 밖에도 HeaderTemplateFooterTemplate 수 있는 속성이 데이터 바인딩을 지 원하는 헤더 및 바닥글에 대 한 더 복잡 한 레이아웃을 만듭니다.There are also HeaderTemplate and FooterTemplate properties that let you create more complex layouts for the header and footer that support data binding.

간단한 머리글/바닥글을 만들려면 머리글 또는 바닥글 속성을 표시 하려는 텍스트를 설정 하기만 됩니다.To create a simple header/footer, just set the Header or Footer properties to the text you want to display. 코드In code:

ListView HeaderList = new ListView() {
    Header = "Header",
    Footer = "Footer"
    };

XAML:In XAML:

<ListView  x:Name="HeaderList"  Header="Header" Footer="Footer"></ListView>

사용자 지정된 헤더 및 바닥글을 만들려면 머리글 및 바닥글 뷰를 정의 합니다.To create a customized header and footer, define the Header and Footer views:

<ListView.Header>
    <StackLayout Orientation="Horizontal">
        <Label Text="Header"
        TextColor="Olive"
        BackgroundColor="Red" />
    </StackLayout>
</ListView.Header>
<ListView.Footer>
    <StackLayout Orientation="Horizontal">
        <Label Text="Footer"
        TextColor="Gray"
        BackgroundColor="Blue" />
    </StackLayout>
</ListView.Footer>

스크롤 막대 표시 여부Scrollbar Visibility

ListViewHorizontalScrollBarVisibility 하 고 VerticalScrollBarVisibility 속성을 가져오거나 설정를 ScrollBarVisibility 가로나 세로로 스크롤 막대에 표시 되는 경우를 나타내는 값입니다.ListView has HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties, which get or set a ScrollBarVisibility value that represents when the horizontal, or vertical, scroll bar is visible. 두 속성은 다음 값으로 설정할 수 있습니다.Both properties can be set to the following values:

  • Default 플랫폼에 대 한 기본 스크롤 막대 동작을 나타내며의 기본값은는 HorizontalScrollBarVisibilityVerticalScrollBarVisibility 속성입니다.Default indicates the default scroll bar behavior for the platform, and is the default value for the HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties.
  • Always 보기에는 콘텐츠를 맞추는 경우에 스크롤 막대 표시 수를 나타냅니다.Always indicates that scroll bars will be visible, even when the content fits in the view.
  • Never 콘텐츠 보기에 맞지 않는 경우에 스크롤 막대가 표시 되지 않습니다 나타냅니다.Never indicates that scroll bars will not be visible, even if the content doesn't fit in the view.

행 구분 기호Row Separators

사이 구분 기호 선을 표시할지 ListView iOS 및 Android에서 기본적으로 요소입니다.Separator lines are displayed between ListView elements by default on iOS and Android. IOS 및 Android에서 구분 기호 선 숨기기 하려는 경우 설정의 SeparatorVisibility 에 ListView에는 속성입니다.If you'd prefer to hide the separator lines on iOS and Android, set the SeparatorVisibility property on your ListView. 에 대 한 옵션 SeparatorVisibility 됩니다.The options for SeparatorVisibility are:

  • 기본 -iOS 및 Android에서 구분 기호를 표시 합니다.Default - shows a separator line on iOS and Android.
  • None -모든 플랫폼에서 구분 기호를 숨깁니다.None - hides the separator on all platforms.

기본 표시:Default Visibility:

C#: C#:

SepratorDemoListView.SeparatorVisibility = SeparatorVisibility.Default;

XAML:XAML:

<ListView x:Name="SeparatorDemoListView" SeparatorVisibility="Default" />

None:None:

C#: C#:

SepratorDemoListView.SeparatorVisibility = SeparatorVisibility.None;

XAML:XAML:

<ListView x:Name="SeparatorDemoListView" SeparatorVisibility="None" />

통해 구분선의 색을 설정할 수도 있습니다는 SeparatorColor 속성:You can also set the color of the separator line via the SeparatorColor property:

C#: C#:

SepratorDemoListView.SeparatorColor = Color.Green;

XAML:XAML:

<ListView x:Name="SeparatorDemoListView" SeparatorColor="Green" />

참고

이러한 속성 중 하나를 Android에서 로드 한 후 설정 된 ListView 큰 성능 저하가 발생 합니다.Setting either of these properties on Android after loading the ListView incurs a large performance penalty.

행 높이Row Heights

모든 행을 ListView에서 기본적으로 같은 높이 갖습니다.All rows in a ListView have the same height by default. ListView에 해당 동작을 변경 하려면 사용할 수 있는 두 가지 속성이 있습니다.ListView has two properties that can be used to change that behavior:

  • HasUnevenRowstrue/false 값을 행 경우 다양 한 높이 true합니다.HasUnevenRowstrue/false value, rows have varying heights if set to true. 기본값은 false입니다.Defaults to false.
  • RowHeight – 경우 집합의 각 높이 행 HasUnevenRowsfalse합니다.RowHeight – sets the height of each row when HasUnevenRows is false.

설정 하 여 모든 행의 높이 설정할 수 있습니다 합니다 RowHeight 속성에는 ListView합니다.You can set the height of all rows by setting the RowHeight property on the ListView.

사용자 지정 고정된 행 높이Custom Fixed Row Height

C#: C#:

RowHeightDemoListView.RowHeight = 100;

XAML:XAML:

<ListView x:Name="RowHeightDemoListView" RowHeight="100" />

균등 하지 않은 행Uneven Rows

개별 행 높이가 다른 원하는 경우 설정할 수 있습니다 합니다 HasUnevenRows 속성을 true입니다.If you'd like individual rows to have different heights, you can set the HasUnevenRows property to true. 행 높이 되 면 수동으로 설정할 필요가 없습니다 유의 HasUnevenRows 로 설정 된 true이므로 Xamarin.Forms에서 높이 자동으로 계산 됩니다.Note that row heights don't have to be manually set once HasUnevenRows has been set to true, because the heights will be automatically calculated by Xamarin.Forms.

C#: C#:

RowHeightDemoListView.HasUnevenRows = true;

XAML:XAML:

<ListView x:Name="RowHeightDemoListView" HasUnevenRows="true" />

런타임 행 크기 조정Runtime Resizing of Rows

개별 ListView 행 프로그래밍 방식으로 크기를 조정할 수 있는 런타임 시 합니다 HasUnevenRows 속성이 true합니다.Individual ListView rows can be programmatically resized at runtime, provided that the HasUnevenRows property is set to true. 합니다 Cell.ForceUpdateSize 메서드는 다음 코드 예제에서 설명한 것 처럼 보이지 그럴 경우에 셀의 크기를 업데이트 합니다.The Cell.ForceUpdateSize method updates a cell's size, even when it isn't currently visible, as demonstrated in the following code example:

void OnImageTapped (object sender, EventArgs args)
{
    var image = sender as Image;
    var viewCell = image.Parent.Parent as ViewCell;

    if (image.HeightRequest < 250) {
        image.HeightRequest = image.Height + 100;
        viewCell.ForceUpdateSize ();
    }
}

OnImageTapped 대 한 응답으로 이벤트 처리기가 실행을 Image 셀에 되 탭의 크기가 증가 합니다를 Image 는 쉽게 볼 수 있도록 셀에 표시 합니다.The OnImageTapped event handler is executed in response to an Image in a cell being tapped, and increases the size of the Image displayed in the cell so that it's easily viewed.

이 기능은 초과 사용 되 면 강력한 성능 저하가 발생할 수는 note 합니다.Note that there is a strong possibility of performance degradation if this feature is overused.