This is a migrated thread and some comments may be shown as answers.

Editing RadTileViewItem template to add Close Button

13 Answers 263 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Kathleen
Top achievements
Rank 1
Kathleen asked on 20 Apr 2010, 06:55 PM
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.

13 Answers, 1 is accepted

Sort by
0
Dimitrina
Telerik team
answered on 23 Apr 2010, 11:08 AM
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.
0
Kathleen
Top achievements
Rank 1
answered on 23 Apr 2010, 12:01 PM

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.


0
Accepted
Tina Stancheva
Telerik team
answered on 28 Apr 2010, 01:29 PM
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.
0
lin
Top achievements
Rank 1
answered on 21 Jun 2010, 03:51 AM
very good ,but how to writes code for  click event of close button, how to  finds RadTileViewItem belonging to  close button .
0
Tina Stancheva
Telerik team
answered on 21 Jun 2010, 09:24 AM
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
0
lin
Top achievements
Rank 1
answered on 22 Jun 2010, 04:52 AM
it work good ,thanks
0
Kathleen
Top achievements
Rank 1
answered on 22 Jun 2010, 11:52 AM
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
0
Accepted
Tina Stancheva
Telerik team
answered on 24 Jun 2010, 04:59 PM
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
0
Kathleen
Top achievements
Rank 1
answered on 24 Jun 2010, 05:36 PM
All set, thank so much for your quick reply, always very happy with the support here.
0
Danny Scheelings
Top achievements
Rank 1
answered on 05 Jul 2010, 12:49 PM
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
0
Kiril Stanoev
Telerik team
answered on 08 Jul 2010, 09:25 AM
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
0
Danny Scheelings
Top achievements
Rank 1
answered on 08 Jul 2010, 09:40 AM
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
0
Kiril Stanoev
Telerik team
answered on 13 Jul 2010, 02:08 PM
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
Tags
TileView
Asked by
Kathleen
Top achievements
Rank 1
Answers by
Dimitrina
Telerik team
Kathleen
Top achievements
Rank 1
Tina Stancheva
Telerik team
lin
Top achievements
Rank 1
Danny Scheelings
Top achievements
Rank 1
Kiril Stanoev
Telerik team
Share this question
or