Overriding Properties

Hello everyone,

I am creating a class that shows an image from file in the background, then I am extending it (sub-classing) it to show image from a URL.

The problem is that the sub-classed one show both images the one from file and the one from URL. how do I fix this?

this is the markup for FileImgButton and UrlImgButton:

<Panel ux:Class="FileImgButton" Text="Click me!" Image="assets/logo-2.png" Padding="10" >
    <string ux:Property="Text"/>
    <FileSource ux:Property="Image" />
    <Image ux:Name="bgImage" Layer="Background" File="{Property this.Image}"  ContentAlignment="TopLeft" StretchMode="UniformToFill" />
    <Text ux:Name="txtTitle" Alignment="Center" TextAlignment="Center" FontSize="28" TextColor="#3bd" Value="{Property this.Text}" />
</Panel>

<FileImgButton ux:Class="UrlImgButton" Text="Click me!" Url="http://images.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" Padding="10" >
    <string ux:Property="Text"/>
    <string ux:Property="Url" />
    <Image ux:Name="bgImage"  Layer="Background" Url="{Property this.Url}"  ContentAlignment="TopLeft" StretchMode="UniformToFill" />
    <Text ux:Name="txtTitle" Alignment="Center" TextAlignment="Center" FontSize="28" TextColor="#3bd" Value="{Property this.Text}" />
</FileImgButton>

Hi!

<Image ux:Name="bgImage" ... is a field on <Panel ux:Class="FileImgButton" />, the Image in UrlImgButton with the same name will not override but co-exist.

I think you should have two different classes