Dynamic Image file path

How-to Discussions
1

I try to set File of the Image using a property but it doesn’t appear.

<Panel ux:Class="CardActionButton">
  <string ux:Property="Image"/>
  <string ux:Property="Text"/>

  <StackPanel Alignment="Top" Y="50">
    <Panel Width="60" Height="60">
      <Image ux:Name="icon" StretchMode="Uniform" Width="50" Alignment="Center" Color="#FFF" File="{ReadProperty Image}"/>
      <Circle Color="#013EA9"/>
    </Panel>
    <Panel Alignment="Center">
      <Text FontSize="16" Color="#fff" Font="RobotoThin" Margin="0,10,0,0">{ReadProperty Text}</Text>
    </Panel>
  </StackPanel>
</Panel>

<Panel ux:Name="CardActionButtons" Opacity="1">
  <CardActionButton Image="../Assets/Icons/contactless.png" Text="Pay in-Store">
    <Clicked>
      <Callback Handler="{toggleCardInAction}"/>
    </Clicked>
  </CardActionButton>
</Panel>

But if I hardcode the File property, it works

<Image ux:Name="icon" StretchMode="Uniform" Width="50" Alignment="Center" Color="#FFF" File="../Assets/Icons/contactless.png"/>

What could be wrong here?

2

Have you added the images to the bundle, by adding them in the "Includes" section of your .unoproj file?

Like so:

"Assets/Icons/*.png:Bundle"

When you reference files from UX, they are implicitly bundled. When you don’t, you have to bundle them explicitly.

3

Perfect! It worked. Got it, thanks!