property feature is not working with images and masks

The new property feature is not working with images and masks. Here is a sample

<Grid ux:Class="MenuEntry" ux:Name="self" Columns="auto,1*">
    <string ux:Property="ItemMask" ux:Value="" />
    <string ux:Property="ItemText" ux:Value="" />
    <bool ux:Property="IsSelected" ux:Value="false" />
    <WhileTrue ux:Name="selected" Value="{Property self.IsSelected}">
        <Change colorImage.Color="#f00" />
    </WhileTrue>        
    <Rectangle Width="42" Height="42">
        <SolidColor ux:Name="colorImage" Color="#111"/>
        <Image File="{Property self.ItemMask}" />
    </Rectangle>
    <Text Value="{Property self.ItemText}" />
</Grid>

<StackPanel Margin="14,0,0,0" Height="32">
    <MenuEntry ItemMask="Assets/Masks/mask.doctor.png" ItemText="Neuigkeiten"/>
    <MenuEntry ItemMask="Assets/Masks/mask.badge.png" ItemText="Profil"/>
</StackPanel>

As you can see I defined the path to menu image (mask) and the menu caption as string. This working for the text but not for the image or mask…

btw that wasn’t working with a data context also:

<ScrollView AllowedScrollDirections="Vertical" Margin="0,120,0,0" Alignment="Top">
    <StackPanel ux:Name="panMenu" Margin="20,40,0,50">
        <JavaScript>
            var Global = require('Global');
            module.exports = {
                items: Global.menuItems
            }
        </JavaScript>
        <Each Items="{items}">
            <Grid Columns="auto,1*" Margin="0,6,0,6">
                <Rectangle Width="30" Height="30">
                    <SolidColor ux:Name="colorImage" Color="#111"/>
                    <Mask File="{image}" />
                </Rectangle>
                <Text Value="{title}" Margin="10,0,0,0" Font="Light" FontSize="20" />
            </Grid> 
        </Each>
    </StackPanel>
</ScrollView>

Ok, a workaround for the second scenario with data context is to use FileImageSources:

<FileImageSource ux:Key="doctor" File="Assets/Masks/mask.doctor.png" />
<FileImageSource ux:Key="gear" File="Assets/Masks/mask.gear.png" />
<FileImageSource ux:Key="emergency" File="Assets/Masks/mask.emergency.png" />
<FileImageSource ux:Key="injection" File="Assets/Masks/mask.injection.png" />
<FileImageSource ux:Key="virus" File="Assets/Masks/mask.virus.png" />
<FileImageSource ux:Key="pill" File="Assets/Masks/mask.pill.png" />
<FileImageSource ux:Key="history" File="Assets/Masks/mask.history.png" />
<FileImageSource ux:Key="shield" File="Assets/Masks/mask.shield.png" />
<FileImageSource ux:Key="info" File="Assets/Masks/mask.info.png" />

...
<Each Items="{items}">
    <Grid Columns="auto,1*" Margin="0,6,0,6">
        <Rectangle Width="30" Height="30">
            <SolidColor ux:Name="colorImage" Color="#111"/>
            <Mask Source="{DataToResource image}" />
        </Rectangle>
        <Text Value="{title}" Margin="10,0,0,0" Font="Light" FontSize="20" TextColor="#111"/>
        <WhileTrue Value="{IsSelected}">
            <Change colorImage.Color="#0A51A8" />
        </WhileTrue>
    </Grid> 
</Each>

But this is not working for the property scenario

Hi,

Image files are not described by strings, but by ImageSource objects. The UX processor needs some tweaks before this will work as desired. I’m filing a ticket for having this improved.

Hi Sven,

This issue is now fixed internally, awaiting roll-out.

You can read about the changes here: https://www.fusetools.com/community/forums/permalink/2d6bfc0d-8829-4531-a63f-6e5985d89a1c

Thanks for reporting!