Changing RadCustomHubTile Datatemplate Image Programmatically

[Laurensius]

Hi i have this xaml in my app

<telerikPrimitives:RadCustomHubTile x:Name="food"
                    Tap="food_Tap"
                    Width="100"
                    Height="100"
                    telerikCore:InteractionEffectManager.IsInteractionEnabled="True">
    <telerikPrimitives:RadCustomHubTile.FrontContentTemplate>
        <DataTemplate>
            <Grid>
                <Grid.Background>
                    <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
                </Grid.Background>
                <Image x:Name="foodImage" Source="/Assets/Icons/food.png" />
            </Grid>
        </DataTemplate>
    </telerikPrimitives:RadCustomHubTile.FrontContentTemplate>
</telerikPrimitives:RadCustomHubTile>

and i want to change image source of foodImage, but it won't allow me to do that in c#.. any idea why?

[Victor]

Hello Lauresnius,

Thanks for the question.
The trick is to use data binding. You need to bind the Source property of your Image to a property of the data context of the data template. The data context will be the object you set as the FrontContent of the hub tile.

For example if you have a class MyViewModel with a property of type ImageSource with the same name, you can set the FrontContent to an instance of MyViewModel. Then your Image will bind like this <Image ImageSource="{Binding ImageSource}"/>. When this is done, all you have to do is to set a new ImageSource to your view model and the view will update itself. For more info please have a look at the MVVM design pattern.

Please write again if you have other questions.

Regards,
Victor
Telerik