Binding TileViewItem header to ViewModel in Prism

[Mats]

Hi!
I'm using a TileView to display my views in a Prism project. Here is my TileView-code:

<telerik:RadTileView Name="AktRegion" regions:RegionManager.RegionName="AktRegion">
    <telerik:RadTileView.ItemContainerStyle>
        <Style TargetType="telerik:RadTileViewItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding TileHeaderText}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </telerik:RadTileView.ItemContainerStyle>
</telerik:RadTileView>

The view is displayed as intended but my header text is not set. My ViewModel-class has a property called TileHeaderText. If I set it to a static text the header is displayed correctly so I guess my binding path is wrong.

I'm using the same technique to show views in a TabControl (the microsoft one) and it works correctly, is it done someway else with your controls?

Any suggestions are greatly appreciated!

[Tina Stancheva]

Hello Mats,

Can you please elaborate more on the structure of your PRISM application. Do you inject ViewModels or Views inside the RadTileView? If you can send a small project reproducing the issue, we will be able to further investigate it.

In the meantime you can examine the attached sample illustrating a possible approach towards implementing PRISM scenario where the RadTileView is used a region. I hope it helps.

Regards,
Tina Stancheva
the Telerik team

[Mats]

Thanks for the reply!
I'm using a View-first approach where I'm injecting views into my regions. I've modified your sample to do that and I get the same issue.
The support ticket has ID 424652.

I assume that I need to modify my binding path in my header template somehow but I'm not sure how it should look.
/Mats

[Tina Stancheva]

Hi Mats,

I attached a sample project to the supprt thread you sent. However i will attach it here as well and I will paste my answer in case anyone else encounter the same issue:

Basically when a UI control is exposed as a region, a region adapter is used for creating a region and associating it to the control. Since the RadTileView is an ItemsControl the default ItemsControlRegionAdapter is used to control its behavior as a region in PRISM. So what it does is to get the view that is injected in the TileView and to place it inside the TileViewItems' Content. Now, since the view is placed inside the TileViewItem.Content, you cannot access its DataContext inside the DataTemplate.

However, if you create your won custom RegionAdapter for the RadTileView control, you will be able to create how to define the RadTileViewItems created inside the RadTileView based on your views. I modified the project to illustrate a possible approach. Give it a try and let us know if it works for you.

Greetings,
Tina Stancheva
the Telerik team

[Mats]

Wow, it worked perfectly! Thanks!!

I must say that you have excellent support. :-)

Update: I did the same thing with a RadTabControl and it worked also. Maybe this could be something you should include in the framework? Altho I must say it's very nice to understand how the region adapter works. Thanks again for the help!

[Kiril Stanoev]

Hello Mats,

Thanks for the suggestion. We'll definitely take it into consideration when working on improving the quality of our controls.

All the best,
Kiril Stanoev
the Telerik team

[Tina Stancheva]

Hi Mats,

I just wanted to follow up on this. We have added a feature request to our PITS to implement custom region adapter for the RadTabControl so that it can be used out-of-the-box in PRISM scenarios. You can vote for the item here thus increasing its priority.

Greetings,
Tina Stancheva
the Telerik team

[Mats]

Ok, nice. I'll vote for the feature.

In my implementation for the TileView-scenario I created a baseclass for my viewmodel that exposes an MaximizeRequested event.
I then added an eventhandler in my region adapter so I can easily maximize the associated tileview from my viewmodel.

private void WireMaximizeEvent(FrameworkElement frameworkItem, RadTileViewItem tabItem)
{
    var viewModel = frameworkItem.DataContext as TileViewModelBase;
    if (viewModel != null)
    {
        viewModel.MaximizeRequested += (s, e) => _regionTarget.MaximizedItem = tabItem;
    }
}

Not sure if it fits everyone but to me it was a nice clean solution to be able to manipulate the region directly from the viewmodel.

[Tina Stancheva]

Hi Mats,

Thanks for sharing your approach with the community. I am sure it will be highly appreciated.

Greetings,
Tina Stancheva
the Telerik team

[Marc Gervais]

Tina:

I have tried implementing the techniques from your latest sample project into my application but I am still not getting the bound Header Text to show up. Here is what my RadTileView looks like:

<telerik:RadTileView
    prism:RegionManager.RegionName="{Binding Source={StaticResource regionNames}, Path=DashboardWidgetsRegion}"
    prism:RegionManager.RegionManager="{Binding DashboardRegionManager}"
    prism:RegionManager.RegionContext="{Binding DashboardContainer}"
    MaximizeMode="ZeroOrOne"
    PreservePositionWhenMaximized="True"
    MaxColumns="2"
    RowHeight="200"
    MinimizedRowHeight="200"
    MinimizedColumnWidth="300">

    <telerik:RadTileView.ItemContainerStyle>
        <Style TargetType="telerik:RadTileViewItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <!--<Image Source="{Binding ModuleIconPath}" Width="16" Height="16" />-->
                            <TextBlock Text="{Binding ModuleShortName}" FontWeight="Bold" Padding="3" Margin="5,0,0,0" FontSize="11" />
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </telerik:RadTileView.ItemContainerStyle>
</telerik:RadTileView>

• Each of the ViewModels that are being injected contain the ModuleShortName property.
• I have a RegionAdapter set up for the RadTileView.
• I am using MEF, not Unity.

 

I'm at a loss here. Any assistance/guidance would be helpful.

Thanks.
Marc.

[Tina Stancheva]

Hello Marc,

Unfortunately I wasn't able to reproduce the issue locally. Can you please have a look at the attached sample and let me know if I am missing something? If you can modify the project to illustrate your scenario and issue, then we will be able to further investigate it and look for solutions.

Thank you in advance for your cooperation.

Best wishes,
Tina Stancheva
the Telerik team