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?

Tagged:

Answers

  • 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;
            }
        }
    }
    

    UWP.App.xaml

    <DataTemplate x:Key="ListViewItemTemplate">
        <Grid Background="LightYellow">
            <Grid.Resources>
                <local:ConcatImageExtensionConverter x:Name="ConcatImageExtensionConverter" />
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.40*" />
                <ColumnDefinition Width="0.40*"/>
                <ColumnDefinition Width="0.20*" />
            </Grid.ColumnDefinitions>
            <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" />
        </Grid>
    </DataTemplate>
    
Sign In or Register to comment.