Working with resources

Working with resources

Do you prefer working with styles, colors instead of a mess of inline attributes? No problem, Gorilla gives you instant preview for all kind of resources.

If you define resources in the same file or a different one (e.g. App.xaml), Gorilla will take care of them. Just work as you are used to.

Styles

On Xamarin Forms, styles can be added to the application's global ResourceDictionary and be shared across different content pages, or added to a page's resource dictionary to apply to just the controls on that page.

Gorilla Player allows to instant preview everything about styles, that means you can preview:

• Styles
• Implicit styles (style globally applied to all instances of a control type)
• Direct values for properties setters
• Static and Dynamic resources also for properties setters
• Styles based on other styles

  <!-- Implicit Style -->
  </Style TargetType="Label">
    <Setter Property="FontSize" Value="{StaticResource BaseFontSize}" />
    <Setter Property="TextColor" Value="{StaticResource BaseTextColor}" />
  </Style>

  <!-- Style -->
  <Style x:Key="LabelWarning" TargetType="Label">
    <Setter Property="TextColor" Value="{StaticResource WarningColor}" />
  </Style>

  <!-- BasedOn Style -->
  <Style x:Key="LabelWarningBig" TargetType="Label" BasedOn="{StaticResource LabelWarning}>
    <Setter Property="FontSize" Value="22" />
  </Style>

Colors

Gorilla Player has also the ability of previewing color resources.

The following are the available color types supported for XAML:

• Named Colors
• Hexadecimal colors
• Hexadecimal colors with alpha

  <!-- Named color -->
  <Color x:Key="ErrorColor">Red</Color>

  <!-- Hexadecimal color -->
  <Color x:Key="OkColor">#22c064</Color>  

  <!-- Hexadecimal color with alpha -->
  <Color x:Key="WarningColor">#CCffc107</Color>

Images

Gorilla Player allows previewing images resources without any additional step:

  <FileImageSource x:Key="HamburguerIcon">hamburguer_icon.png</FileImageSource>
  <FileImageSource x:Key="WelcomeBackgroundImage">welcome_bg.jpg</FileImageSource>

...then simply use the image resource as your image source:

  <Image Source="{ StaticResource HamburguerIcon }" />
  <Image Source="{ StaticResource WelcomeBackgroundImage }" />

Global resources (@ToDo)

Local resources (@ToDo)