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>