Styles not loading (Resources not found) in ListView ViewCell template

[MrXemiu]

The following page cannot be displayed in Gorilla Player. Instead an error message is presented indicating that none of the resources identified in the Style attributes of the template elements can be found. I'm using Xlabs MVVM, so the page inherits from BaseView.

I have other pages throughout the application that inherit from BaseView, depend on StaticResources defined locally as well as in App.xaml, AND DO render in Gorilla Player. The only difference, as far as I can tell, is that this page contains a ListView.

Anyway, this is a great tool, but I'm very stuck right now.

<?xml version="1.0" encoding="utf-8"?>

<mvvm:BaseView xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:mvvm="clr-namespace:XLabs.Forms.Mvvm;assembly=XLabs.Forms"
               Title="Survey List"
               x:Class="eSiteMoble.View.SurveyListPage">
  <mvvm:BaseView.Resources>
    <ResourceDictionary>

      <Style x:Key="ListItemStyle" TargetType="Grid">
        <Setter Property="Margin" Value="15, 20" />
        <Setter Property="VerticalOptions" Value="Start"/>
        <Setter Property="HorizontalOptions" Value="Fill" />
      </Style>

      <Style x:Key="StatusIconStyle" TargetType="Image" BasedOn="{StaticResource IconStyle}">
        <Setter Property="HorizontalOptions" Value="Start"/>
        <Setter Property="VerticalOptions" Value="Start" />
      </Style>

      <Style x:Key="FacilityStyle" TargetType="Label" BasedOn="{StaticResource Heading3}">
        <Setter Property="HorizontalTextAlignment" Value="Start" />
        <Setter Property="VerticalOptions" Value="Start" />
      </Style>

      <Style x:Key="ContactIconStyle" TargetType="Image" BasedOn="{StaticResource IconStyle}">
        <Setter Property="HorizontalOptions" Value="Center"></Setter>
        <Setter Property="VerticalOptions" Value="Start"></Setter>
      </Style>

      <Style x:Key="AddressStyle" TargetType="Label" BasedOn="{StaticResource LabelStyle}">
        <Setter Property="TextColor" Value="{StaticResource LightTextColor}" />
      </Style>

      <Style x:Key="DateStack" TargetType="StackLayout">
        <Setter Property="HorizontalOptions" Value="Center" />
        <Setter Property="VerticalOptions" Value="Start" />
        <Setter Property="Orientation" Value="Vertical" />
        <Setter Property="Spacing" Value="0" />
      </Style>

      <Style x:Key="MonthStyle" TargetType="Label" BasedOn="{StaticResource Heading5}">
        <Setter Property="HorizontalTextAlignment" Value="Center" />
      </Style>

      <Style x:Key="DateStyle" TargetType="Label" BasedOn="{StaticResource Heading1}">
        <Setter Property="HorizontalTextAlignment" Value="Center" />
      </Style>

    </ResourceDictionary>
  </mvvm:BaseView.Resources>

  <mvvm:BaseView.Content>

    <ListView x:Name="ListFacilities"
              ItemsSource="{Binding WorkflowItems}"
              HasUnevenRows="True"
              SelectedItem="{Binding SelectedFacility}"
              HorizontalOptions="Fill"
              VerticalOptions="FillAndExpand">

      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <ViewCell.View>

              <Grid Style="{StaticResource ListItemStyle}">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width=".12*" />
                  <ColumnDefinition Width=".715*" />
                  <ColumnDefinition Width=".16*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                  <RowDefinition />
                  <RowDefinition />
                </Grid.RowDefinitions>

                <Image Source="{Binding SurveyStatus, Converter={StaticResource SurveyStatusToImageSourceConverter}}" Style="{StaticResource StatusIconStyle}" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"  />
                <Label Text="{Binding FacilityName}" Style="{StaticResource FacilityStyle}" Grid.Column="1" Grid.Row="0" />

                <Grid Grid.Column="1" Grid.Row="1" HorizontalOptions="Fill" VerticalOptions="Start">
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="10" />
                    <ColumnDefinition Width="*"/>
                  </Grid.ColumnDefinitions>
                  <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                  </Grid.RowDefinitions>

                  <Image Source="icon_contact_location.png" Style="{StaticResource ContactIconStyle}" Grid.Column="0" Grid.Row="0"></Image>
                  <Label Text="{Binding Address1}" Style="{StaticResource AddressStyle}" Grid.Column="1" Grid.Row="0" LineBreakMode="WordWrap" />

                  <Image Source="icon_contact_person.png" Style="{StaticResource ContactIconStyle}"  Grid.Column="0" Grid.Row="1" />
                  <Label Text="{Binding ContactName}" Style="{StaticResource LabelStyle}" Grid.Column="1" Grid.Row="1"  />

                  <Image Source="icon_contact_phone.png" Style="{StaticResource ContactIconStyle}" Grid.Column="0" Grid.Row="2" />
                  <Label Text="{Binding ContactPhone}" Style="{StaticResource LabelStyle}"  Grid.Column="1" Grid.Row="2"  />

                </Grid>

                <StackLayout Style="{StaticResource DateStack}" Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" >
                  <Label x:Key="lblMonth" Style="{StaticResource MonthStyle}" Text="{Binding DueDate, Converter={StaticResource SurveyListMonthToStringConverter}}" IsVisible="{Binding DueDate, Converter={StaticResource NullToBooleanConverter}}"></Label>
                  <Label x:Key="lblDate" Style="{StaticResource DateStyle}" Text="{Binding DueDate, StringFormat='{0:dd}'}" IsVisible="{Binding DueDate, Converter={StaticResource NullToBooleanConverter}}"></Label>
                </StackLayout>

              </Grid>
            </ViewCell.View>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </mvvm:BaseView.Content>
</mvvm:BaseView>

[jpbrocca]

Hi @MrXemiu,

Please have a look at the following related issue where one user shares a workaround: https://github.com/UXDivers/Gorilla-Player-Support/issues/163

Please let us know if this helped you or if you need more help. Best, JP

[MrXemiu]

I read through that thread and it wasn't helpful. I tried changing StaticResource to DynamicResource but the error persisted. I double checked XLabs.Forms.BaseView and there's no corresponding .xaml document associated with it.

Lastly, I want to reiterate that other .xaml documents that inherit from XLabs.Forms.BaseView and make use of both global and local styles render appropriately in Gorilla Player. I think this issue is specific to ListView ItemTemplates.

[alexcons]

Probably unrelated, but I was using the following format: {StaticResource Key=StatusIconStyle} And I had to change it to {StaticResource StatusIconStyle} because the parser was failing to extract the name correctly and was assuming that the resource name was "Key=StatusIconStyle" I think this is a bug on Gorilla, the RegEx used to extract the resource name should consider both nomencaltures