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:
- First image uses a global image source.
- Second image’s Source is set by databinding to the defined resource’s key name, which is later converted to the resource with DataToResource.
- 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:
Is there a way to make this work?
Thanks in advance
Ipek