Allow selective delete

[Karl Mikesell]

Currently using the RadTileView with MaximizedMode="One" and have some tiles which cannot be deleted, but would like a way to be able to enable deletion of other tiles.  I can find no property to enable this in the RadTileViewItem, items can be added but never removed; just flipped into Large View.

Ideas?

[Valentin.Stoychev]

Hello Karl Mikesell,

RadTileView is an items control and if you want to remove something from it you will need to remove the respective item from the RadTileView.Items property. The code will be similar to this:

RadTileView1.Items.Remove(RadTileViewItem1);

Please let us know if you have more questions.

Sincerely yours,
Valentin.Stoychev
the Telerik team

[Karl Mikesell]

The purpose of the delete property would be to have the Header bar to include an 'X' to remove tile as a user option.  Since other controls in the Silverlight can add tiles easily it is not that simple to remove them.

How is it currently possible to add an 'X" to the far right side of the header, like that appears on a typical Window.

A normal window allows (Minimize, Full screen, Delete), this is not possible using the TileView, and should be considered to allow delete, Full screen does not make sense, but Minimize could be used to just show the Header only (when in small view).

Something to think about.

Thanks

[Tina Stancheva]

Hello Karl Mikesell,

Please accept my apology for the delayed response.

In order to add a Close button in the RadTileViewItem header you have to edit the Control Template of the RadTileViewItem in Blend. Then you can add a close Button next to the MaximizeToggleButton. Then you can handle the Button's Click event to remove the TileViewItem, for example like so:

private void CloseButton_Click(object sender, RoutedEventArgs e)
{
    RadTileViewItem tileViewItem = (sender as Button).ParentOfType<RadTileViewItem>();
    RadTileView tileView = tileViewItem.ParentTileView;
    tileView.Items.Remove(tileViewItem);
}

Also, if you need to display only the headers of the minimized RadTileViewItems you can try a couple of approaches. The first approach is to specify the MinimizedHeight of each tile to be equal to the height of an item's header, thus getting the desired effect.

The other approach is to specify the RadTileViewItem's height in a dedicated style and set the TileView.ItemContainerStyle (if the TileView is data bound) or the TileViewItem.Style property to that style.Then you can handle the TileStateChanged() event to change the style of the RadTileViewItems depending on their state.

<!--OnlyHeaderItemStyle -->
<Style x:Key="OnlyHeaderItemStyle" TargetType="telerik:RadTileViewItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Background" Value="{StaticResource TileView_Background}"/>
    <Setter Property="BorderBrush" Value="{StaticResource TileView_OuterBorder}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="7"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:RadTileViewItem">
                <Grid Height="44">
    ...
</Style>

private void tileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    RadTileViewItem item = e.Source as RadTileViewItem;
    if (item != null)
    {
        switch (item.TileState)
        {
            case TileViewItemState.Maximized:
                item.Style = this.Resources["RadTileViewItemStyle"] as Style;
                break;
            case TileViewItemState.Minimized:
                item.Style = this.Resources["OnlyHeaderItemStyle"] as Style;
                break;
            case TileViewItemState.Restored:
                item.Style = this.Resources["RadTileViewItemStyle"] as Style;
                break;
        }
    }
}

I prepared a sample project illustrating a possible approach towards implementing the scenario you described. Please take a look at it and let me know if it works for you or if you need more info.

Best wishes,
Tina Stancheva
the Telerik team

[SivaPrasad Bevara]

Hi,

I am using the code in the "tileviewexampleclosebutton.zip" project given above..

The RadTileView close functionality is working good.

But I want to use it in a Theaming application, where the controls theme should be changed based on the user selection. If we use the edited RadTileViewItems style given above, then this control is displayed in only one color given in the style. How can I use it for Theming application.

Please advise.

Regards,
SivaPrasad.B

[Tina Stancheva]

Hello SivaPrasad Bevara,

The described behaviour is expected since you cannot apply both a theme and a custom style to a RadControl. The custom control always takes precedence over the theme. So in your scenario a possible approach would be to create a custom theme for the RadTileView that includes the custom "AddCloseButton" style.

Here and here you can find more info about creating custom themes. I hope this info helps. Please let us know if we can further assist you.

Best wishes,
Tina Stancheva
the Telerik team

[Benjamin]

Hello, I've use the code snippet into my WPF project and delete a list of TileViewItem from my TileView, every things was working very fine until I call remove on the last index of my TileView?
Here is the error message and the stacktrace I've got

Width and Height must be non-negative.
   at System.Windows.Size..ctor(Double width, Double height)
   at System.Windows.Controls.ScrollViewer.OnLayoutUpdated(Object sender, EventArgs e)
   at System.Windows.ContextLayoutManager.fireLayoutUpdateEvent()
   at System.Windows.ContextLayoutManager.UpdateLayout()
   at System.Windows.ContextLayoutManager.UpdateLayoutCallback(Object arg)
   at System.Windows.Media.MediaContext.InvokeOnRenderCallback.DoWork()
   at System.Windows.Media.MediaContext.FireInvokeOnRenderCallbacks()
   at System.Windows.Media.MediaContext.RenderMessageHandlerCore(Object resizedCompositionTarget)
   at System.Windows.Media.MediaContext.AnimatedRenderMessageHandler(Object resizedCompositionTarget)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)
   at System.Windows.Threading.DispatcherOperation.InvokeImpl()
   at System.Windows.Threading.DispatcherOperation.InvokeInSecurityContext(Object state)
   at System.Threading.ExecutionContext.runTryCode(Object userData)
   at System.Runtime.CompilerServices.RuntimeHelpers.ExecuteCodeWithGuaranteedCleanup(TryCode code, CleanupCode backoutCode, Object userData)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean ignoreSyncCtx)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Windows.Threading.DispatcherOperation.Invoke()
   at System.Windows.Threading.Dispatcher.ProcessQueue()
   at System.Windows.Threading.Dispatcher.WndProcHook(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   at MS.Win32.HwndWrapper.WndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   at MS.Win32.HwndSubclass.DispatcherCallbackOperation(Object o)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen(Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)
   at System.Windows.Threading.Dispatcher.InvokeImpl(DispatcherPriority priority, TimeSpan timeout, Delegate method, Object args, Int32 numArgs)
   at MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)
   at MS.Win32.UnsafeNativeMethods.DispatchMessage(MSG& msg)
   at System.Windows.Threading.Dispatcher.PushFrameImpl(DispatcherFrame frame)
   at System.Windows.Threading.Dispatcher.PushFrame(DispatcherFrame frame)
   at System.Windows.Application.RunDispatcher(Object ignore)
   at System.Windows.Application.RunInternal(Window window)
   at System.Windows.Application.Run(Window window)
   at System.Windows.Application.Run()
   at WpfAppPrototype.App.Main() in C:\Users\Benjamin.HO\Dropbox\[Works]\Works_QWERTyT\[WIN]\[iQ]\DEV\approot\WpfAppPrototype\WpfAppPrototype\obj\x86\Debug\App.g.cs:line 0
   at System.AppDomain._nExecuteAssembly(RuntimeAssembly assembly, String[] args)
   at System.AppDomain.ExecuteAssembly(String assemblyFile, Evidence assemblySecurity, String[] args)
   at Microsoft.VisualStudio.HostingProcess.HostProc.RunUsersAssembly()
   at System.Threading.ThreadHelper.ThreadStart_Context(Object state)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean ignoreSyncCtx)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Threading.ThreadHelper.ThreadStart()

[Tina Stancheva]

Hi Benjamin,

I wasn't able to reproduce this issue. Can you please modify the attached sample to better illustrate your scenario and to reproduce the issue so that we can further investigate it.

Thank you in advance for your cooperation.

Kind regards,
Tina Stancheva
the Telerik team

[SivaPrasad Bevara]

Hi,

I tried using the code given in the above sample, for implementing the Close button.

It is working well when I set the Style for the TileViewItem in the Xaml.
In my case, I need to add the TileViewItems dynamically.
So I tried setting the ItemContainerStyle property of the RadTileView. But it is not working.

Can you please help me in setting the style for the dynamically added TileViewItems.

Regards,
SivaPrasad.B

[Tina Stancheva]

Hi Sivaprasad Bevara,

I am not sure how you dynamically add the RadTileViewItems - do you populate the ItemsSource collection of the RadTileView or you are populating the RadTileView.Items collection in code-behind with RadTileViewItems.

Basically the ItemContainerStyle property sets the style of all auto-generated RadTileViewItems only when the control is databound and its ItemsSource is populated with a collection of business items. In this case you can set the ItemContainerStyle property in the RadTileView definition regardless of when its ItemsSource collection is populated.

But if you're adding RadTileViewItems to the RadTileView.Items collection this property won't work. Instead you'll have to set the RadTileViewItems Style property. You can do this either setting up an implicit style in the UserControl hosting the RadTileView or by setting the Style property of each newly defined RadTileViewItem in code-behind.

The first approach - implicit style, basically means that you can define a Style for the RadTileViewItem target type without defining the style x:Key property. An implicit style is applied to all controls of the targeted type within the region in which the style is defined. This means that if you define an implicit style in the application resources of your application, this style will be applied to all controls of the targeted type within the application:

<UserControl.Resources>
  <Style TargetType="telerik:RadTileViewItem">
   ....
  </Style>
</UserControl.Resources>

The second approach is to define a Style in the UserControl or Application resources and access it by its x:Key property in the code-behind file in order to set it as the RadTileViewItem.Style property.

<UserControl.Resources>
  <Style x:Key="TileViewItemStyle" TargetType="telerik:RadTileViewItem">
   ....
  </Style>
</UserControl.Resources>

public void AddNewTile(RadTileView tileViewControl)
{
    RadTileViewItem item = new RadTileViewItem();
    item.Header = "Tile 1";
    item.Content = "Content of Tile 1";
    item.Style = this.Resources["TileViewItemStyle"] as Style;

    tileViewControl.Items.Add(item);
}

I hope this information will help you. Please let me know if I'm missing something or if I can further assist you.

All the best,
Tina Stancheva
the Telerik team

[SivaPrasad Bevara]

Hi Tina,

Thank you very much for your response. I am able to add the style to the RadTileViewItems from the code behind.
Now it is displaying the Close and Toggle buttons. Close button event is working properly.
But it has the problem with the Toggle button. It is not firing the toggle button Events at all

I checked it, and It is the problem with the version of the Telerik Controls.
I am using the "2011.2.1107.1040" version of the Telerik controls.
Even I  tested it in the sample application (given in your earlier posts) which has "2010.2.714.1040" version of the controls. It is working with that version. If I change the Telerik controls to the new version "2011.2.1107.1040" then it is giving the problem. 

Also with the new version, It always setting the "TileViewState" to "Minimized" even we set the TileViewState as Maximized from the Code. It's happening when we add the second Item to the TileViewItems.

For you information, I am adding the RadTileViewItems to the "RadTileView.Items" collection from the Code Behind.
 
Please help me in fixing this. 

Regards,
SivaPrasad.B

[Petar Mladenov]

Hi Sivaprasad Bevara,

Could you please check out our test project which uses the 1107 dlls and let us know if we are missing something? We think it is working correctly.

All the best,
Petar Mladenov
the Telerik team

[SivaPrasad Bevara]

Hi Petar Mladenov,

Thanks for your response.

I am using Silverlight for my application. In this thread I have taken "tileviewexampleclosebutton.zip" sample as reference.

I tried "2011.3.1129.1040" version of the Telerik controls with this application with no luck.
It's not at all firing the "TileStateChanged" event when I try to Minimize/Maximize the TileView.

Can you please provide a sample that works with the Silverlight, so that I can check that with 2011.3.1129.1040" version of the Telerik controls.

Regards,
SivaPrasad.B

[Petar Mladenov]

Hello Sivaprasad Bevara,

 The RadTileView has introduced some changes in its Template from Q2 2010 to Q3 2011. We changed the Template accordingly in the mentioned Silverlight project (the main difference is that a ToggleButton is replaced with telerik's RadToggleButton and some VisualStates are also added). The TileStateChanged now fires when you Maximize a minimized item. We also managed to reproduce your other problem when adding a Maximized Item and the good news is that it is fixed in the internal build from 1205 as you can see in the attached project. Please excuse us for the inconvenience caused.

Best wishes,
Petar Mladenov
the Telerik team

[SivaPrasad Bevara]

Hi Petar Mladenov,

Thanks for your response. Now Tile View is working fine with "2011.3.1205.1040" version of Telerik Controls.

Regards,
SivaPrasad.B