Set width of HubTile based on resolution only using XAML

[Andrey]

Hello,

I have one problem with RadHubTile control: I have view with Hub control in it. Hub contains multiple HubSections. One of them contains list of RadHubTiles. I need two columns and three rows of HubTiles. If i hardcode size of the HubTile say 144x144px then if I check this view on devices with resolution 800x480 looks ok. But on devices with resolution 1280x720 small HubTiles looks too bad.

Can I fix it using only XAML?

[Andrey]

UPD: If I don't set height and width so hubtiles looks ok on 720p and u

Here is my xaml:      

      <DataTemplate x:Key="RadTileItemTemplate">
        <telerik:RadHubTile
          UpdateInterval="0:0:3"
          TitleTemplate="{StaticResource TileTitleTemplate}"
          Notification="Notificiation"
          NotificationTemplate="{StaticResource TileNotificationTemplate}"
          Background="{StaticResource TransparentTheme}"
          IsFrozen="false"
           Margin="6">
          <telerik:RadHubTile.BackContentTemplate>
            <DataTemplate>
              <StackPanel Margin="16">
                <TextBlock Text="{Binding Information}" TextWrapping="Wrap"/>
              </StackPanel>
            </DataTemplate>
          </telerik:RadHubTile.BackContentTemplate>
        </telerik:RadHubTile>
      </DataTemplate>

      <HubSection>
        <DataTemplate>
          <GridView
            Width="144"
            Height="144"
            ItemsSource="{Binding Items, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Items In Group"
            ItemTemplate="{StaticResource RadTileItemTemplate}"
            SelectionMode="None"
            IsItemClickEnabled="True"
            ContinuumNavigationTransitionInfo.ExitElementContainer="True"
            Name="ActionItem"
            micro:Message.Attach="[Event ItemClick] = [Action OpenSection($eventArgs)]">
          </GridView>
        </DataTemplate>
      </HubSection>

[Rosy Topchiyska]

Hello Andrey,

Thank you for contacting us.

There are several approaches that you can use, but all of them require code behind or a value converter.

One way to avoid explicitly setting a size is to use a value converter, where you can calculate the Width/Height of the tile depending on the screen size. Here is an example:

<Page.Resources>
    <local:Converter x:Key="Converter"/>
    <DataTemplate x:Key="RadTileItemTemplate">
        <primitives:RadHubTile Width="{Binding ElementName=tile, Converter={StaticResource Converter}}" x:Name="tile" Title="{Binding}" Height="{Binding ElementName=tile, Converter={StaticResource Converter}}"/>
    </DataTemplate>
</Page.Resources>
<GridView ItemTemplate="{StaticResource RadTileItemTemplate}"/>

public class Converter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
      return Window.Current.Bounds.Width / 20;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Alternatively you can set the size of the tile in code behind:

<primitives:RadHubTile Loaded="RadHubTile_Loaded" Title="{Binding}"/>

private void RadHubTile_Loaded(object sender, RoutedEventArgs e)
{
    var tile = sender as RadHubTile;
    tile.Width = Window.Current.Bounds.Width / 20;
    tile.Height = Window.Current.Bounds.Width / 20;
}

I hope this helps. 

Regards,
Rosy Topchiyska
Telerik

[Andrey]

Hi Rosy!

Thanks for your reply. It's looks like what I need.