How to define Style for RadCustomHubTile.FrontContent and BackContent?

[Lu]

I am trying to define a custom Style for the RadCustomHubTile's Front and BackContent property, but I can't get it to work. The code below works just fine if I only include Height/Width, but once I include FrontContent, it gives me a "Value does not fall within expected range" error. What am I missing?

    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="LiveTileStyle" TargetType="telerikPrimitives:RadCustomHubTile">
            <Setter Property="Height" Value="210"/>
            <Setter Property="Width" Value="210"/>
            <Setter Property="FrontContent">
                <Setter.Value>
                        <Grid Background="Red">
                            <Image Source="/Assets/ApplicationIcon.png" Height="210" Width="210"/>
                            <TextBlock
                                    FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                    FontSize="{StaticResource PhoneFontSizeNormal}"
                                    Margin="11,0,0,11"
                                    Text="Testing"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Bottom"/>
                        </Grid>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>


... (later in the code)

<telerikPrimitives:RadCustomHubTile Style="{StaticResource LiveTileStyle}" />

[Victor]

Hello Lu,

Thanks for writing.
Please use the FrontContentTemplate and BackContentTemplate properties. The problem is that Silverlight elements cannot have multiple parents. DataTemplate objects on the other hand can be shared.

Please write again if you need further assistance.

Regards,
Victor
the Telerik team

[Randall]

Any chance of an example?  I am trying to get RadCustomHubTiles with transparent PNG icons to show the theme color as their background.  Can't find a way to make it work.

[Todor]

Hi Randall,

Here's a sample:

<telerikPrimitives:RadCustomHubTile.FrontContentTemplate>
    <DataTemplate>
        <Grid Background="{StaticResource PhoneAccentBrush}">
            <Image Source="Image.png"/>
        </Grid>
    </DataTemplate>
</telerikPrimitives:RadCustomHubTile.FrontContentTemplate>

In our online documentation you can find more information on how to use RadHubTile.

Regards,
Todor
Telerik