Forum Xamarin.Forms

Can I style TableView for UWP?

stesvisstesvis USMember ✭✭✭✭

I think we all agree that the TableView in UWP looks absolutely horrible..

Is it possible to make this...:

...look more like iOS?

I don't know if with custom renderers, or by making every cell a custom ViewCell?



  • JarvanJarvan Member, Xamarin Team Xamurai

    To create custom ViewCell to set styles, you can refer to the guide that demonstrates how to create a custom renderer for a ViewCell hosted in the ListView.

    CustomRenderer class

    [assembly: ExportRenderer(typeof(NativeCell), typeof(NativeUWPCellRenderer))]
    namespace CustomRenderer.UWP
        public class NativeUWPCellRenderer : ViewCellRenderer
            public override Windows.UI.Xaml.DataTemplate GetTemplate(Cell cell)
                return App.Current.Resources["ListViewItemTemplate"] as Windows.UI.Xaml.DataTemplate;


    <DataTemplate x:Key="ListViewItemTemplate">
        <Grid Background="LightYellow">
                <local:ConcatImageExtensionConverter x:Name="ConcatImageExtensionConverter" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <ColumnDefinition Width="0.40*" />
                <ColumnDefinition Width="0.40*"/>
                <ColumnDefinition Width="0.20*" />
            <TextBlock Grid.ColumnSpan="2" Foreground="#7F3300" FontStyle="Italic" FontSize="22" VerticalAlignment="Top" Text="{Binding Name}" />
            <TextBlock Grid.RowSpan="2" Grid.Column="1" Foreground="#267F00" FontWeight="Bold" FontSize="12" VerticalAlignment="Bottom" Text="{Binding Category}" />
            <Image Grid.RowSpan="2" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center" Source="{Binding ImageFilename, Converter={StaticResource ConcatImageExtensionConverter}}" Width="50" Height="50" />
            <Line Grid.Row="1" Grid.ColumnSpan="3" X1="0" X2="1" Margin="30,20,0,0" StrokeThickness="1" Stroke="LightGray" Stretch="Fill" VerticalAlignment="Bottom" />
Sign In or Register to comment.