Set width of HubTile based on resolution only using XAML

4 posts, 1 answers
  1. Andrey
    Andrey avatar
    3 posts
    Member since:
    Jun 2012

    Posted 06 Jun 2015 Link to this post

    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?

  2. Andrey
    Andrey avatar
    3 posts
    Member since:
    Jun 2012

    Posted 06 Jun 2015 in reply to Andrey Link to this post

    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>

  3. Answer
    Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 11 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. Andrey
    Andrey avatar
    3 posts
    Member since:
    Jun 2012

    Posted 16 Jun 2015 in reply to Rosy Topchiyska Link to this post

    Hi Rosy!

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

Back to Top