Need customization in RadTileViewControl

4 posts, 0 answers
  1. Shweta
    Shweta avatar
    11 posts
    Member since:
    Oct 2011

    Posted 14 Nov 2011 Link to this post

    Hi Team,
    I need a small customization in RadTileViewControl. I have 12 tiles in one page. when I maximize 1 tile, allrest tiles are arranges in minimized form on right side with maximize icon. As per my requirement, instead of maximize button, I added a text 'More Details'.

    Now my problem is, I don't want to show this 'More Details' text on minimized tiles, coming vertically on right side. Kindly suggest me, how can I remove that 'More Details' (maximize button) text from minimized tiles.


    Regards,
    Shweta
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 17 Nov 2011 Link to this post

    Hi Shweta,

     I guess you mean the scenario described in this forum thread (I can see that Kanwal is from Infosys too, I guess you are colleagues). If yes, lets use the last project from Zarko as a base.
    If you need to get rid of the MoreDetails TextBlock in Restored and Minimized states, you can set remove the "

    "RestoreIcon" "TextBlock:
    <Setter Property="Template">
                                                            <Setter.Value>
                                                                <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
                                                                    <Grid>
                                                                        <Grid x:Name="Restore"
                                                                              Height="20"
                                                                              Background="Transparent">
                                                                            <Grid.ToolTip>
                                                                                <ToolTip Content="Maximize" telerik:LocalizationManager.ResourceKey="TileViewItemMaximizeText" />
                                                                            </Grid.ToolTip>
                                                                            <!--<TextBlock x:Name="RestoreIcon"
                                                                                       HorizontalAlignment="Right"
                                                                                       Text="" />-->
                                                                        </Grid>
                                                                        <Grid x:Name="Collapse"
                                                                              Height="20"
                                                                              Background="Transparent"
                                                                              Visibility="Collapsed">
                                                                            <Grid.ToolTip>
                                                                                <ToolTip Content="Minimize" telerik:LocalizationManager.ResourceKey="TileViewItemMinimizeText" />
                                                                            </Grid.ToolTip>
                                                                            <TextBlock x:Name="BackIcon"
                                                                                       HorizontalAlignment="Right"
                                                                                       Text="Back" />
                                                                        </Grid>
                                                                    </Grid>
                                                                    <ControlTemplate.Triggers>
                                                                        <Trigger Property="IsMouseOver" Value="True">
                                                                            <!--<Setter TargetName="RestoreIcon" Property="Foreground" Value="Orange" />-->
                                                                            <Setter TargetName="BackIcon" Property="Foreground" Value="Orange" />
                                                                        </Trigger>
                                                                        <Trigger Property="IsPressed" Value="True" />
                                                                        <Trigger Property="IsChecked" Value="True">
                                                                            <Setter TargetName="Restore" Property="Visibility" Value="Collapsed" />
                                                                            <Setter TargetName="Collapse" Property="Visibility" Value="Visible" />
                                                                        </Trigger>
                                                                    </ControlTemplate.Triggers>

    Please let us know if this is what you need.
       Regards,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Shweta
    Shweta avatar
    11 posts
    Member since:
    Oct 2011

    Posted 17 Nov 2011 Link to this post

    Hi Team,
    The solution provided by you wa partially helpful.
    On Maximize state, you are showing 'Back' link, that is helpful. But I want 'More Data' link text on normal window and I don't want to show any text on left side vertically arranged tiles.
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 22 Nov 2011 Link to this post

    Hi Shweta,

     We added some animations to control the Opacity of the MinimizeToglleButton:

    <Trigger Property="TileState" Value="Minimized">
                               <Trigger.EnterActions>
                                   <BeginStoryboard>
                                       <Storyboard>
                                           <DoubleAnimation Duration="0"
                                                            Storyboard.TargetName="MaximizeToggleButton"
                                                            Storyboard.TargetProperty="Opacity" From="1" To="0">
                                           </DoubleAnimation>
                                       </Storyboard>
                                   </BeginStoryboard>
                               </Trigger.EnterActions>
                               <Trigger.ExitActions>
                                   <BeginStoryboard>
                                       <Storyboard>
                                           <DoubleAnimation Duration="0"
                                                            Storyboard.TargetName="MaximizeToggleButton"
                                                            Storyboard.TargetProperty="Opacity"
                                                            From="0" To="1"
                                                            >                                               
                                           </DoubleAnimation>
                                       </Storyboard>
                                   </BeginStoryboard>
                               </Trigger.ExitActions>
                           </Trigger>
    You can examine this realized in the attached solution. Please let us know if this satisfies you. Greetings,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top