Articles in this section
Category / Section

How to apply a style to the listview item in Xamarin.Forms?

Style can be applied to an element loaded in the item template of listview by defining in the resource of content page and applying to the element.

xaml

<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             xmlns:dataSource="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="StackStyle" TargetType="StackLayout">
                <Setter Property="BackgroundColor" Value="#4b69a0"/>
            </Style>
            <Style x:Key="LabelStyle" TargetType="Label">
                <Setter Property="TextColor" Value="YellowGreen"/>
                <Setter Property="FontAttributes" Value="Italic" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <syncfusion:SfListView x:Name="listView"
                           ItemsSource="{Binding ContactsInfo}"
                           ItemSize="70" >
        <syncfusion:SfListView.DataSource>
            <dataSource:DataSource>
                <dataSource:DataSource.GroupDescriptors>
                    <dataSource:GroupDescriptor PropertyName="DisplayString"/>
                </dataSource:DataSource.GroupDescriptors>
            </dataSource:DataSource>
        </syncfusion:SfListView.DataSource>
        <syncfusion:SfListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.View>
                        <StackLayout Style="{StaticResource StackStyle}">
                            <Label Text="{Binding Key}" TextColor="White" />
                        </StackLayout>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </syncfusion:SfListView.GroupHeaderTemplate>
        <syncfusion:SfListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.View>
                        <Grid>
                            <Label LineBreakMode="NoWrap"
                                   Style="{StaticResource LabelStyle}"
                                   Text="{Binding ContactName}"/>
                            <Label LineBreakMode="NoWrap"
                                   Style="{StaticResource LabelStyle}"
                                   Text="{Binding ContactNumber}"/>
                        </Grid>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </syncfusion:SfListView.ItemTemplate>
    </syncfusion:SfListView>
</ContentPage>  

 

Output:

 

Click here to download the sample.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied