[Solved] SlideHubTile alignment for different resolutions

[Alper Cem]

Hello,

I am developing a Windows Phone 8.0 app and would like to develop a page as similar to the image I attached. In short, there will be different sizes of HubTiles in a page, and I use Grid definitions to split the page into rows and columns so that the page can fit well to different screen resolutions. The problem is SlideHubTile doesn't support "Auto" sizing for Horizontal & Vertical Alignment, it requires to manually set a width & height and it gives "value doesn't fall within the rage" exception otherwise. And I need to do so in order to fit them to the rows and columns automatically. 

As a workaround, I try to get the screen size of the phone and set the width & height of the tiles in the code-behind. It worked in terms of appearance, but the image and the text started to behave weird.

Waiting for solutions or suggestions.

Thanks,
Alper

[Alper Cem]

The image on the right is what I meant.

[Rosy Topchiyska]

Hello,

Thank you for contacting us.

The HubTile has fixes size by default. You have to set its Width and Height to double.NaN to force the control to invalidate its measurement state and take the space provided by its parent. You can use the Loaded event to do this.

<Grid Margin="20">
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <telerik:RadHubTile Loaded="RadHubTile_Loaded" Grid.Row="0" Grid.Column="0"/>
    <telerik:RadHubTile Loaded="RadHubTile_Loaded" Grid.Row="0" Grid.Column="1"/>
    <telerik:RadHubTile Loaded="RadHubTile_Loaded" Grid.Row="1" Grid.Column="0"/>
    <telerik:RadHubTile Loaded="RadHubTile_Loaded" Grid.Row="1" Grid.Column="1"/>
</Grid>

private void RadHubTile_Loaded(object sender, RoutedEventArgs e)
{
    var tile = sender as RadHubTile;
    tile.Width = double.NaN;
    tile.Height = double.NaN;
}

I hope this helps. Please, let us know if you gave further questions.

Regards,
Rosy Topchiyska
Telerik