# property feature is not working with images and masks

**URL:** <https://forums.fusetools.com/t/property-feature-is-not-working-with-images-and-masks/3239>\
**Category:** Bug Reports\
**Created:** [December 17, 2015, 8:32pm UTC](https://forums.fusetools.com/t/property-feature-is-not-working-with-images-and-masks/3239 "2015-12-17T20:32:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sven\_Wiese-Solty](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sven_wiese-solty/32/325_2.png) [@Sven\_Wiese-Solty](https://forums.fusetools.com/u/Sven_Wiese-Solty)\
**Post date:** [December 17, 2015, 8:32pm UTC](https://forums.fusetools.com/t/property-feature-is-not-working-with-images-and-masks/3239/1 "2015-12-17T20:32:30Z")

</div>

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

```auto
<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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Sven\_Wiese-Solty](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sven_wiese-solty/32/325_2.png) [@Sven\_Wiese-Solty](https://forums.fusetools.com/u/Sven_Wiese-Solty)\
**Post date:** [December 18, 2015, 12:04am UTC](https://forums.fusetools.com/t/property-feature-is-not-working-with-images-and-masks/3239/2 "2015-12-18T00:04:27Z")

</div>

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [December 18, 2015, 11:19am UTC](https://forums.fusetools.com/t/property-feature-is-not-working-with-images-and-masks/3239/3 "2015-12-18T11:19:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [December 28, 2015, 2:18pm UTC](https://forums.fusetools.com/t/property-feature-is-not-working-with-images-and-masks/3239/4 "2015-12-28T14:18:24Z")

</div>

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](https://www.fusetools.com/community/forums/permalink/2d6bfc0d-8829-4531-a63f-6e5985d89a1c)

Thanks for reporting!