Binding Image Source to a Property

How-to Discussions
1

Hi,

I tried to bind a Property value to the Source of an Image but I wasn’t sucessful. Below is the sample code that I prepared:

  1. First image uses a global image source.
  2. Second image’s Source is set by databinding to the defined resource’s key name, which is later converted to the resource with DataToResource.
  3. Third one is trying to get the resource name from the Property of a button which holds the defined resource’s key name (like in databinding case). But unfortunately this doesn’t work.
<App Theme="Basic">
  <FileImageSource File="assets/location.png" ux:Global="globalLocationImage" />
  <FileImageSource File="assets/location.png" ux:Key="keyLocationImage" />

  <JavaScript>
    module.exports = {
      data: {
        imageResName: "keyLocationImage"
      }
    };
  </JavaScript>

  <Button ux:Class="MenuButton1" ux:Name="menuButton1" Height="30" Width="300" Text="Button wGlobal Image">
    <Image Source="globalLocationImage" Width="16" Height="16" Layer="Background" Alignment="Left" Margin="10,0,0,0" />
  </Button>

  <Button ux:Class="MenuButton2" ux:Name="menuButton2" Height="30" Width="300" Text="Button wDataBound Image">
    <Image Source="{DataToResource data.imageResName}" Width="16" Height="16" Layer="Background" 
      Alignment="Left" Margin="10,0,0,0" />
  </Button>

  <Button ux:Class="MenuButton3" ux:Name="menuButton3" Height="30" Width="300" Text="{Property menuButton3.ImageResourceName}" >
    <string ux:Property="ImageResourceName" />
    <Image Source="{DataToResource Property menuButton3.ImageResourceName}" Width="16" Height="16" Layer="Background" 
      Alignment="Left" Margin="10,0,0,0" />
  </Button>

  <StackPanel>
    <MenuButton1 />
    <MenuButton2 />
    <MenuButton3 ImageResourceName="keyLocationImage" /> 
  </StackPanel>
</App>

And here is the image of the resulting screen:

file

Is there a way to make this work?

Thanks in advance

Ipek

2

You put {DataToResource Property ...} take of the Property part

3

Thanks for the reply.

If I understand you correctly you meant to take of the Property keyword after the DataToResource, like this:

<Image Source="{DataToResource menuButton3.ImageResourceName}" />

If so, it still doesn’t work.

4

I’ve created a sample that demonstrates the various approaches to creating a button with an image:

https://github.com/fusetools/fuse-samples/tree/buttonimage/Samples/Controls/ButtonWithImage

5

Thanks for the reply and the detailed sample :slight_smile: The case that I’ve asked is working now. Also through the sample I’ve learned the way to make binding by using the file name! Which is something that I prefer and tried before without success :slight_smile:

Thanks again,

Ipek