Articles in this section
Category / Section

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

2 mins read

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)
Please  to leave a comment
Access denied
Access denied