Editing RadTileViewItem template to add Close Button

[Kathleen]

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.

[Dimitrina]

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.

[Kathleen]

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.

[Tina Stancheva]

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.

[lin]

very good ,but how to writes code for  click event of close button, how to  finds RadTileViewItem belonging to  close button .

[Tina Stancheva]

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

[lin]

it work good ,thanks

[Kathleen]

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

[Tina Stancheva]

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

[Kathleen]

All set, thank so much for your quick reply, always very happy with the support here.

[Danny Scheelings]

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

[Kiril Stanoev]

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

[Danny Scheelings]

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

[Kiril Stanoev]

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