Editing RadTileViewItem template to add Close Button

14 posts, 2 answers
  1. Kathleen
    Kathleen avatar
    55 posts
    Member since:
    Jun 2009

    Posted 20 Apr 2010 Link to this post

    Attached is a screen shot regarding a control I created in blend to add a close button on the right side of the Min/Max buttons.
    I would like my control to still obey the application's Theme, but after editing a copy of the existing template I get all the brushes from the default and I don't know what I can remove from the resources list that will enable me to achieve the same functionality (close button) while still allowing the control to obey the selected Telerik theme.

  2.
  3. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 23 Apr 2010 Link to this post

    Hi Kathleen,

    Please find attached an example.

    If you have further questions please do not hesitate to ask us.
    I hope this will help you.

    Regards,
    Dimitrina
    the Telerik team

    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 Public Issue Tracking system and vote to affect the priority of the items.
  5. Kathleen
    Kathleen avatar
    55 posts
    Member since:
    Jun 2009

    Posted 23 Apr 2010 Link to this post

    Thank you for the reply, I had achieved the X button, but the one in your example is much more appealing.

    My question was, after editing the template to add the button, the existance of all the brushes and colors in the edited template results in the control no longer obeying theming.  But I am uncertain what I should/can remove from the template copy to reobtain theming. 

    So in your example, add this line to the App code behind:

     

    Telerik.Windows.Controls.

     

    StyleManager.ApplicationTheme = new Office_BlueTheme();

     

     

     

    Remove the Styling from the 3rd RadTileItem and run.

    The 2 overridden items do not appear themed to match the third item.


  7. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3299 posts

    Posted 28 Apr 2010 Link to this post

    Hi Kathleen,

    The global themes apply only to controls, where no other style is applied. Therefore the Office_BlueTheme doesn't apply to the RadTileViewItems, since you have defined a custom style for them.

    However, you can examine the theme .xaml files for the Silverlight RadControls in your installation folder (...\Themes\OfficeBlue\Themes\Office\Blue in this case) and decide what you need to use in your custom style.

    I modified the example by removing the following lines:
    <SolidColorBrush x:Key="TileView_Background" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="TileView_OuterBorder" Color="#FF848484"/>
    <SolidColorBrush x:Key="TileView_InneBorder" Color="#FFFFFFFF"/>
    <Thickness x:Key="TileView_InneBorder_Thickness">1</Thickness>
    <LinearGradientBrush x:Key="TileView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFF6F6F6"/>
        <GradientStop Color="#FFD2D2D2" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TileView_HeaderBorder" Color="#FFFFFFFF"/>
    <Thickness x:Key="TileView_HeaderBorder_Thickness">0 0 0 1</Thickness>
     
    <!-- brushes which we used in the style of the button -->
    <LinearGradientBrush x:Key="TileView_ButtonBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF282828"/>
        <GradientStop Color="#FF7C7C7C" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TileView_ButtonOuterBorder" Color="#FFFFFFFF"/>
    <LinearGradientBrush x:Key="TileView_ButtonBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFEEDB7" Offset="0"/>
        <GradientStop Color="#FFFACA6A" Offset="1"/>
        <GradientStop Color="#FFFFC94A" Offset="0.526"/>
        <GradientStop Color="#FFFEEDB7" Offset="0.509"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="TileView_ButtonBackground_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFECE95" Offset="0"/>
        <GradientStop Color="#FFFEB407" Offset="1"/>
        <GradientStop Color="#FFFEBB6E" Offset="0.517"/>
        <GradientStop Color="#FFE78318" Offset="0.539"/>
    </LinearGradientBrush>
     
    <CornerRadius x:Key="TileView_HeaderBorder_CornerRadius">1</CornerRadius>
    <LinearGradientBrush x:Key="TileView_HeaderBorder_HorizontalSplitterOpacityMask" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Black" Offset="0"/>
        <GradientStop Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground" Color="#FFBFBFBF"/>
    <SolidColorBrush x:Key="DisabledBrush" Color="#99FFFFFF"/>
    <CornerRadius x:Key="TileView_InneBorder_CornerRadius">1</CornerRadius>
    <CornerRadius x:Key="TileView_OuterBorder_CornerRadius">2</CornerRadius>
     and replacing them with the corresponding lines from the Office_BlueTheme.
    <SolidColorBrush x:Key="TileView_Background" Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="TileView_OuterBorder" Color="#FF83A5D2" />
    <CornerRadius x:Key="TileView_OuterBorder_CornerRadius">2</CornerRadius>
    <SolidColorBrush x:Key="TileView_InneBorder" Color="#FFFFFFFF" />
    <CornerRadius x:Key="TileView_InneBorder_CornerRadius">1</CornerRadius>
    <Thickness x:Key="TileView_InneBorder_Thickness">1</Thickness>
    <CornerRadius x:Key="TileView_HeaderBorder_CornerRadius">1</CornerRadius>
    <SolidColorBrush x:Key="TileView_HeaderBorder" Color="#FFFFFFFF" />
    <Thickness x:Key="TileView_HeaderBorder_Thickness">0 0 0 1</Thickness>
    <LinearGradientBrush x:Key="TileView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFEBF3FF" />
            <GradientStop Color="#FFCAE1FF" Offset="1" />
        </LinearGradientBrush>
    <LinearGradientBrush x:Key="TileView_ButtonBackground_MouseOver" EndPoint="0.5,1"
                StartPoint="0.5,0">
            <GradientStop Color="#FFFEEDB7" Offset="0" />
            <GradientStop Color="#FFFACA6A" Offset="1" />
            <GradientStop Color="#FFFFC94A" Offset="0.526" />
            <GradientStop Color="#FFFEEDB7" Offset="0.509" />
        </LinearGradientBrush>
    <LinearGradientBrush x:Key="TileView_ButtonBackground_Pressed" EndPoint="0.5,1"
                StartPoint="0.5,0">
            <GradientStop Color="#FFFECE95" Offset="0" />
            <GradientStop Color="#FFFEB407" Offset="1" />
            <GradientStop Color="#FFFEBB6E" Offset="0.517" />
            <GradientStop Color="#FFE78318" Offset="0.539" />
        </LinearGradientBrush>
    <LinearGradientBrush x:Key="TileView_ButtonBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF3C6AA3" Offset="0" />
            <GradientStop Color="#FF83A5D2" Offset="1" />
        </LinearGradientBrush>
    <SolidColorBrush x:Key="TileView_ButtonOuterBorder" Color="#FFFFFFFF" />
    <LinearGradientBrush x:Key="TileView_HeaderBorder_HorizontalSplitterOpacityMask"
                EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Offset="1" />
        </LinearGradientBrush>
    <SolidColorBrush x:Key="TileView_HeaderBorder_HorizontalSplitterBackground" Color="#FF9BB4D4" />
    <SolidColorBrush x:Key="DisabledBrush" Color="#99FFFFFF"></SolidColorBrush>

    Take a look at the project and let me know if this is what you need. If you need more info, please let us know.

    Regards,
    Tina Stancheva
    the Telerik team

    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 Public Issue Tracking system and vote to affect the priority of the items.
  9. lin
    lin avatar
    3 posts
    Member since:
    May 2008

    Posted 20 Jun 2010 Link to this post

    very good ,but how to writes code for  click event of close button, how to  finds RadTileViewItem belonging to  close button .
  11. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3299 posts

    Posted 21 Jun 2010 Link to this post

    Hi Lin,

    You can handle the Click event of the button and find its parent of type RadTileViewItem. Then you can apply some custom logic for the closing behavior of the button.

    I modified the project to illustrate a possible approach to this. Please take a look at it and let me know if it works for you.

    Sincerely yours,
    Tina Stancheva
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  13. lin
    lin avatar
    3 posts
    Member since:
    May 2008

    Posted 21 Jun 2010 Link to this post

    it work good ,thanks
  15. Kathleen
    Kathleen avatar
    55 posts
    Member since:
    Jun 2009

    Posted 22 Jun 2010 Link to this post

    I should probably start a new post, but this has all the background history in it.

    I am using the most recent beta build.

    I would like the resolution to this issue which is marked resolved: Issue ID 2152. (Minimize and Mamimize appear in all states).

    I am assuming that I don't see the resolution because I am using a customized template, what's the best way to extract the template again so I can fix my version?

    Thanks
  17. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3299 posts

    Posted 24 Jun 2010 Link to this post

    Hello Kathleen,

    You only need to change the style of the  ToggleButton element - MaximizeToggleButton. I modified the example to implement the new style of the button.

    Let me know if you need more info.

    Greetings,
    Tina Stancheva
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  19. Kathleen
    Kathleen avatar
    55 posts
    Member since:
    Jun 2009

    Posted 24 Jun 2010 Link to this post

    All set, thank so much for your quick reply, always very happy with the support here.
  21. Danny Scheelings
    Danny Scheelings avatar
    69 posts
    Member since:
    Jan 2006

    Posted 05 Jul 2010 Link to this post

    Hello,

    I just read this very interesting forum post. Thanks to this post I was able to add a close button to my Office Silver themed TileViewItems. Great!

    I have one question though. I added the XAML to a separate styles file which is added as a ResourceDictionary in App.xaml. In this style I added the click event to the close button and the event handler to the UserControl where the TileViewItem has been added. When Silverlight is started I get the following error: Failed to assign to property 'System.Windows.Controls.Primitives.ButtonBase.Click'. I understand what the problem is but I don't know how to handle the click event of the close button.

    Doe anybody know how to solve this?

    Thanks,
    Danny
  23. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 08 Jul 2010 Link to this post

    Hello Danny,

    You are not allowed to have event handlers in merged resource files. The trick here is to put everything that does not have event handlers in a resource file and everything that has event handlers in UserControl.Resources. I've updated last attachment to demonstrate this approach. Have a look at it and let me know if it helps.

    On a side note, I'd like to inform you that we've just released an online tool that allows you to reduce the size of your Silverlight applications. For more information, please visit http://blogs.telerik.com/blogs/posts/10-06-10/telerik_assembly_minifier.aspx

    Greetings,
    Kiril Stanoev
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  25. Danny Scheelings
    Danny Scheelings avatar
    69 posts
    Member since:
    Jan 2006

    Posted 08 Jul 2010 Link to this post

    Hi Kiril,

    Thanks for your reply. Good to know the limitations of Silverlight.

    I have tried to develop my own solution to this problem, using the code behind (which is working :-) ):
    public MainPage()
    {
        InitializeComponent();
        this.AddHandler(FrameworkElement.MouseLeftButtonDownEvent, new MouseButtonEventHandler(TileViewItem_MouseLeftButtonDown), true);
    }
      
    private void TileViewItem_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        Path closeButton = e.OriginalSource as Path;
        if (closeButton != null && closeButton.Name == "CloseButtonPath")
        {
            //Close button actually clicked
            this.ParentTileView.Items.Remove(sender);
            e.Handled = true;
        }
    }

    Off course I had to specify the name 'CloseButtonPath' to the Path which is used to draw the Close button:
    <Path x:Name="CloseButtonPath" ToolTipService.ToolTip="Close"... >

    Danny
  26.
  27. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 13 Jul 2010 Link to this post

    Hello Danny,

    Thank you for sharing your approach with us. That is exactly what you need to do. Let us know if you encounter any further problems.

    All the best,
    Kiril Stanoev
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
Back to Top