Tile "Grid" Behavior

4 posts, 1 answers
  1. Ryan
    Ryan avatar
    3 posts
    Member since:
    Mar 2019

    Posted 21 Jun Link to this post

    I'm looking to achieve a Tile "Grid"-like behavior, with Tiles of varying sizes being placed with optional space between them within in a fixed area. The tiles would be resizable between the provided sizes (Single, Double, Quad) but also a 1x2 orientation (Tall) and the space between them would always been in increments of the fixed TilePlaceHolderSide value. See the behavior of the Windows 10 Start Menu Tiles for the closest easily-accessible example.

    I am well aware that I'm going to have to do some customization, particularly in layout/measurement, but I'm just wondering:

    • Which would be a better starting point: TileList or TileView?
    • Would I have to modify the source directly, or would simply creating a custom control that inherits from TileList or TileView be enough?
    • Has anyone on these forums met a similar requirement and have any advice?
  2. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1021 posts

    Posted 26 Jun Link to this post

    Hi Ryan,

    Although the RadTileList control allows for a number of customizations, modifying the way tiles are measured and arranged will not be an easy task. I would still recommend it as a starting point instead of the RadTileView as I believe it is closer to the result you're looking for.

    As for your second question, I would not advise you to modify the source code directly, but rather to create a custom RadTileList control with a custom TileListPanel. To achieve the latter, you can create the following custom style:

    <Style TargetType="telerik:TileGroupContainer" BasedOn="{StaticResource TileGroupContainerStyle}">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <local:CustomTileListPanel x:Name="groupPanelTemplatePanel" VerticalAlignment="{Binding VerticalTilesAlignment, RelativeSource={RelativeSource AncestorType=telerik:RadTileList}}"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    I once again wish to note that this will require a lot of customization and, unfortunately, such custom implementations go out of the scope of the support services we provide. I can recommend contacting our Professional Services to get further assistance with implementing the desired functionality.

    To answer your last question, I'm afraid I do not believe we've received a similar requirement in the past and can thus not suggest any resources for your reference.

    I do, however, hope that you found this information. If I can further assist you with anything that does fall within our support scope, please let me know.

    Regards,
    Dilyan Traykov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Answer
    Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1021 posts

    Posted 26 Jun Link to this post

    Hi Ryan,

    Although the RadTileList control allows for a number of customizations, modifying the way tiles are measured and arranged will not be an easy task. I would still recommend it as a starting point instead of the RadTileView as I believe it is closer to the result you're looking for.

    As for your second question, I would not advise you to modify the source code directly, but rather to create a custom RadTileList control with a custom TileListPanel. To achieve the latter, you can create the following custom style:

    <Style TargetType="telerik:TileGroupContainer" BasedOn="{StaticResource TileGroupContainerStyle}">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <local:CustomTileListPanel x:Name="groupPanelTemplatePanel" VerticalAlignment="{Binding VerticalTilesAlignment, RelativeSource={RelativeSource AncestorType=telerik:RadTileList}}"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    I once again wish to note that this will require a lot of customization and, unfortunately, such custom implementations go out of the scope of the support services we provide. I can recommend contacting our Professional Services to get further assistance with implementing the desired functionality.

    To answer your last question, I'm afraid I do not believe we've received a similar requirement in the past and can thus not suggest any resources for your reference.

    I do, however, hope that you found this information. If I can further assist you with anything that does fall within our support scope, please let me know.

    Regards,
    Dilyan Traykov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Ryan
    Ryan avatar
    3 posts
    Member since:
    Mar 2019

    Posted 27 Jun Link to this post

    Excellent, Thank you for the reply. I have reached out at the link you provided but may take a stab at customizing the Control myself.
Back to Top