Image Bindings

Written By Brian Faeran

Last updated 6 months ago

ImageCache

The ImageCache element is now the recommended image element to use above all others in LaunchBox for Android theme development (as of version 1.19).
It is more performant, has better disposal logic, and integrates more efficiently when used inside a CollectionView.
This results in faster load times, reduced memory usage, and smoother navigation, especially when working with large image lists.

Namespace

Before using ImageCache, ensure this namespace is present in your view file:

xmlns:maui="clr-namespace:FFImageLoading.Maui;assembly=FFImageLoading.Maui"

Example

<maui:CachedImage Source="{Binding ActiveFilter.BannerImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False"/>

Key Properties

DownsampleToViewSize
Resizes the image based on the views size to reduce memory and speed up loading.
Default: False
Recommended: True

FadeAnimationEnabled
Applies a short fade when the image content changes inside a virtualized CollectionView.
Default: Not documented. Set explicitly.
Recommended: False

Source
Image location. URI, local file path, or resource ID.
Default: None

LoadingPlaceholder
Image to show while the main image is loading.
Default: None

ErrorPlaceholder
Image to show if the main image fails to load.
Default: None

Aspect
How the image scales inside its bounds. Values: Fill, AspectFill, AspectFit.
Default: AspectFit

Transformations
One or more visual effects applied in order.
Default: None

Common transformations and what they do:

BlurredTransformation
Applies a blur. Use Radius to control intensity.
Radius (int): Controls the strength of the blur—higher values mean more blur.
CircleTransformation
Crops the image to a perfect circle.
CornersTransformation or RoundedTransformation
Rounds the corners.
Radius (int): Applies uniform rounding to all corners.
CornerRadius variants (if supported): TopLeft, TopRight, BottomLeft, BottomRight to round corners individually.
CropTransformation
Crops to the specified rectangle or percentage area.
CropWidth, CropHeight (in pixels) or:
Inset, InsetX, InsetY (percentage-based cropping from each edge).
GrayscaleTransformation
Converts the image to grayscale.
SepiaTransformation
Applies a warm sepia tone.
TintTransformation
Overlays a tint color with adjustable alpha.
HexColor (string): Specifies the tint color in hex, e.g., #80FFFFFF.
EnableHardTint (bool, optional): When True, applies a solid tint; default is a blend mode overlay.
FlipTransformation
Flips the image horizontally or vertically.
FlipType (enum): Can be Horizontal, Vertical, or Both.
RotateTransformation
Rotates the image by a given number of degrees.
Degrees (double): The angle to rotate the image—e.g., 90 for a quarter-turn.

If any transformation type is not found under your maui namespace, add a second namespace for the transformations types. See the note after the examples.

XAML only examples with your namespace

Add this namespace at the root of the view file:

xmlns:maui="clr-namespace:FFImageLoading.Maui;assembly=FFImageLoading.Maui"

Blurred background

<maui:CachedImage Source="https://example.com/bg.jpg" Aspect="AspectFill" DownsampleToViewSize="True"> 
   <maui:CachedImage.Transformations> 
      <maui:BlurredTransformation Radius="12" /> 
   </maui:CachedImage.Transformations> 
</maui:CachedImage>

Circular avatar with a soft white tint

<maui:CachedImage Source="{Binding SelectedGame.ClearLogoImage}" Aspect="AspectFit" DownsampleToViewSize="True" FadeAnimationEnabled="False"> 
   <maui:CachedImage.Transformations> <maui:CircleTransformation /> 
      <maui:TintTransformation HexColor="#80FFFFFF" /> 
   </maui:CachedImage.Transformations> 
</maui:CachedImage>

Rotated thumbnail in a CollectionView item

<CollectionView ItemsSource="{Binding Games}"> 
   <CollectionView.ItemTemplate> 
      <DataTemplate> 
         <Grid Padding="8"> 
            <maui:CachedImage Source="{Binding SelectedGame.BoxFrontThumbImage}" Aspect="AspectFit" DownsampleToViewSize="True" FadeAnimationEnabled="False"> 
               <maui:CachedImage.Transformations> 
                  <maui:RotateTransformation Degrees="10" /> 
               </maui:CachedImage.Transformations> 
            </maui:CachedImage> 
         </Grid> 
      </DataTemplate> 
   </CollectionView.ItemTemplate> 
</CollectionView>

Border example for a stroke

Since CachedImage does not expose Stroke and StrokeThickness directly, wrap it in a Border:

<Border Stroke="#FFFFFFFF" StrokeThickness="2" Padding="2" BackgroundColor="Transparent"> <maui:CachedImage Source="{Binding SelectedGame.BackgroundThumbImage}" Aspect="AspectFill" DownsampleToViewSize="True" FadeAnimationEnabled="False" /> </Border>

Want me to drop these into your ImageCache section and cross link them from Image Binding Properties so theme authors see them right away?

Image Binding Properties for Filters Views

BannerImage
Displays a filter’s banner:

<maui:CachedImage Source="{Binding ActiveFilter.BannerImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

ClearLogoImage
Displays a filter’s clear logo:

<maui:CachedImage Source="{Binding ActiveFilter.ClearLogoImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

BoxFrontImage
Displays a filter’s box image:

<maui:CachedImage Source="{Binding ActiveFilter.BoxFrontImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

BoxFrontImage with Crossfade
Displays a filter’s box image with a crossfade effect:

<maui:CachedImage x:Name="BoxFrontImage" IsVisible="{Binding BoxImageVisible}" Aspect="AspectFit" DownsampleToViewSize="True" FadeAnimationEnabled="False" /> 
<maui:CachedImage x:Name="BoxFrontImage2" IsVisible="{Binding BoxImageVisible}" Aspect="AspectFit" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

Default Background Image
Default background image used in LaunchBox for Android:

<maui:CachedImage x:Name="BackgroundImage" Source="splash_background.jpg" Aspect="AspectFill" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

Image Binding Properties for Games Views

ClearLogoImage

<maui:CachedImage Source="{Binding ActiveGame.ClearLogoImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

ClearLogoThumbImage (more performant, use in wheels)

<maui:CachedImage Source="{Binding ActiveGame.ClearLogoThumbImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

TitleScreenshotImage

<maui:CachedImage Source="{Binding ActiveGame.TitleScreenshotImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

TitleScreenshotThumbImage (more performant, use in wheels)

<maui:CachedImage Source="{Binding ActiveGame.TitleScreenshotThumbImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

GameplayScreenshotImage

<maui:CachedImage Source="{Binding ActiveGame.GameplayScreenshotImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

GameplayScreenshotThumbImage (more performant, use in wheels)

<maui:CachedImage Source="{Binding ActiveGame.GameplayScreenshotThumbImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

BoxFrontImage

<maui:CachedImage Source="{Binding ActiveGame.BoxFrontImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

BoxFrontThumbImage (more performant, use in wheels)

<maui:CachedImage Source="{Binding ActiveGame.BoxFrontThumbImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

BackgroundImage

<maui:CachedImage Source="{Binding ActiveGame.BackgroundImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

BackgroundThumbImage (improves performance)

<maui:CachedImage Source="{Binding ActiveGame.BackgroundThumbImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

PlatformClearLogoImage

<maui:CachedImage Source="{Binding ActiveGame.PlatformClearLogoImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

PlatformBoxFrontImage

<maui:CachedImage Source="{Binding ActiveGame.PlatformBoxFrontImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

PlatformBannerImage

<maui:CachedImage Source="{Binding ActiveGame.PlatformBannerImage}" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

BoxFrontImage with Crossfade

<maui:CachedImage x:Name="BoxFrontImage" Aspect="AspectFit" DownsampleToViewSize="True" FadeAnimationEnabled="False" /> 
<maui:CachedImage x:Name="BoxFrontImage2" Aspect="AspectFit" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

BackgroundImage with Crossfade (includes fallback image)

<maui:CachedImage x:Name="BackgroundImage" Source="splash_background.jpg" Aspect="AspectFit" DownsampleToViewSize="True" FadeAnimationEnabled="False" /> 
<maui:CachedImage x:Name="BackgroundImage2" Source="splash_background.jpg" Aspect="AspectFit" DownsampleToViewSize="True" FadeAnimationEnabled="False" />

Image Binding Properties for Startup Views