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

Runtime Themes with Prism & MVVM

11 Answers 266 Views

General Discussions

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

11 Answers, 1 is accepted

answered on 01 Oct 2010, 07:35 AM

tabcontrolbinding.zip

Hello Chris,

The best approach in my opinion is to have property in your ViewModels that holds the current theme and bind each control to this property.
You can find the attached sample project demonstrating this approach.
If you need more information or have any comments about the sample, please contact us.

Greetings,
Miro Miroslavov
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

answered on 01 Oct 2010, 10:30 AM

Thanx Miro. This is the approach I have now adopted and have implemented the Theme into a base ViewModel class that as well as exposing the current theme also handles downloading the required theme on-demand if changed at runtime.

There are two issues I am now facing:

If I have styles applied to controls i.e. 2 different TextBlock styles, and I want the colours of the styles to vary depending on the theme, what is the best way to approach this?
Certain controls are producing error's when the theme is switched at runtime, such as the RadMenu control and the RadGridView. These errors do not occur when I add RadMenu and RadGridView controls to your sample and switch the styles?

Error details below:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E; InfoPath.2)
Timestamp: Fri, 1 Oct 2010 09:28:43 UTC

Message: Unhandled Error in Silverlight 2 Application Value does not fall within the expected range.
Line: 1
Char: 1
Code: 0
URI: http://localhost/Insurer.Analytics.Web/InsurerAnalytics.aspx

Message: Unhandled Error in Silverlight Application
Code: 4009
Category: ManagedRuntimeError
Message: Element is already the child of another element.

Line: 61
Char: 13
Code: 0
URI: http://localhost/Insurer.Analytics.Web/InsurerAnalytics.aspx

Message: Unhandled Error in Silverlight Application
Code: 4009
Category: ManagedRuntimeError
Message: Element is already the child of another element.

Line: 61
Char: 13
Code: 0
URI: http://localhost/Insurer.Analytics.Web/InsurerAnalytics.aspx

Message: Unhandled Error in Silverlight 2 Application Value does not fall within the expected range.
Line: 1
Char: 1
Code: 0
URI: http://localhost/Insurer.Analytics.Web/InsurerAnalytics.aspx

Message: Unhandled Error in Silverlight Application
Code: 4004
Category: ManagedRuntimeError
Message: System.ArgumentException: Value does not fall within the expected range.
   at MS.Internal.XcpImports.CheckHResult(UInt32 hr)
   at MS.Internal.XcpImports.SetValue(IManagedPeerBase obj, DependencyProperty property, DependencyObject doh)
   at MS.Internal.XcpImports.SetValue(IManagedPeerBase doh, DependencyProperty property, Object obj)
   at System.Windows.DependencyObject.SetObjectValueToCore(DependencyProperty dp, Object value)
   at System.Windows.DependencyObject.SetEffectiveValue(DependencyProperty property, EffectiveValueEntry& newEntry, Object newValue)
   at System.Windows.DependencyObject.UpdateEffectiveValue(DependencyProperty property, EffectiveValueEntry oldEntry, EffectiveValueEntry& newEntry, ValueOperation operation)
   at System.Windows.DependencyObject.SetValueInternal(DependencyProperty dp, Object value, Boolean allowReadOnlySet)
   at Telerik.Windows.Controls.GridView.GridViewHeaderCell.PrepareHeaderContent()
   at Telerik.Windows.Controls.GridView.GridViewHeaderCell.Prepare()
   at Telerik.Windows.Controls.GridView.GridViewHeaderRow.PrepareCell(GridViewCellBase cellBase, GridViewColumn column)
   at Telerik.Windows.Controls.GridView.DataCellsPresenter.PrepareContainerForItemOverride(DependencyObject element, Object item)
   at System.Windows.Controls.ItemsControl.MS.Internal.Controls.IGeneratorHost.PrepareItemContainer(DependencyObject container, Object item)
   at System.Windows.Controls.ItemContainerGenerator.System.Windows.Controls.Primitives.IItemContainerGenerator.PrepareItemContainer(DependencyObject container)
   at Telerik.Windows.Controls.GridView.GridViewCellsPanel.InsertContainer(Int32 childIndex, UIElement container, Boolean isRecycled)
   at Telerik.Windows.Controls.GridView.GridViewCellsPanel.AddContainerFromGenerator(Int32 childIndex, UIElement child, Boolean newlyRealized)
   at Telerik.Windows.Controls.GridView.GridViewCellsPanel.GenerateChild(IItemContainerGenerator generator, Size constraint, GridViewColumn column, Int32& childIndex, Size& childSize)
   at Telerik.Windows.Controls.GridView.GridViewCellsPanel.GenerateChildren(IItemContainerGenerator generator, Int32 startIndex, Int32 endIndex, Size constraint)
   at Telerik.Windows.Controls.GridView.GridViewCellsPanel.GenerateAndMeasureChildrenForRealizedColumns(Size constraint)
   at Telerik.Windows.Controls.GridView.GridViewCellsPanel.MeasureOverride(Size constraint)
   at System.Windows.FrameworkElement.MeasureOverride(IntPtr nativeTarget, Single inWidth, Single inHeight, Single& outWidth, Single& outHeight)

Line: 61
Char: 13
Code: 0
URI: http://localhost/Insurer.Analytics.Web/InsurerAnalytics.aspx

answered on 01 Oct 2010, 12:24 PM

Here is an example menu that causes and exception when changing the theme dynamicaly. If I remove all icons from the menu no exceptions are thrown:

<telerikNavigation:RadMenu ClickToOpen="True" x:Name="ActionButtons" Style="{StaticResource RadMenu_Style}" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal" Margin="5 0 5 2" telerikSchema:StyleManager.Theme="{Binding CurrentTheme.Theme}">
            <telerikNavigation:RadMenuItem Icon="/Insurer.Analytics.SharedResources;component/Icons/toolbox_small.png" Header="Actions" telerikSchema:StyleManager.Theme="{Binding CurrentTheme.Theme}">
                <telerikNavigation:RadMenuItem Icon="/Insurer.Analytics.SharedResources;component/Icons/mail_read.png" Header="Mark All As Read"   Command="{Binding MarkAllItemsReadCommand}" CommandParameter="{Binding SelectedItems, ElementName=InstanceGrid}" telerikSchema:StyleManager.Theme="{Binding CurrentTheme.Theme}" />
                <telerikNavigation:RadMenuItem Icon="/Insurer.Analytics.SharedResources;component/Icons/mail_unread.png" Header="Mark All As Unread" Command="{Binding MarkAllItemsUnreadCommand}" CommandParameter="{Binding SelectedItems, ElementName=InstanceGrid}" telerikSchema:StyleManager.Theme="{Binding CurrentTheme.Theme}"/>
                <telerikNavigation:RadMenuItem Icon="/Insurer.Analytics.SharedResources;component/Icons/cabinet.png" Header="Archive All" Command="{Binding MarkAllItemsArchived}" CommandParameter="{Binding SelectedItems, ElementName=InstanceGrid}" telerikSchema:StyleManager.Theme="{Binding CurrentTheme.Theme}" />
                <telerikNavigation:RadMenuItem Header="UnArchive All" Command="{Binding MarkAllItemsUnArchived}" CommandParameter="{Binding SelectedItems, ElementName=InstanceGrid}" telerikSchema:StyleManager.Theme="{Binding CurrentTheme.Theme}" >
                    <telerikNavigation:RadMenuItem.IconTemplate>
                        <DataTemplate>
                            <Image Source="/Insurer.Analytics.SharedResources;component/Icons/cabinet.png" Opacity="0.4" />
                        </DataTemplate>
                    </telerikNavigation:RadMenuItem.IconTemplate>
                </telerikNavigation:RadMenuItem>
            </telerikNavigation:RadMenuItem>
        </telerikNavigation:RadMenu>

answered on 06 Oct 2010, 04:02 PM

Hi Chris,

The problem is that when you change the Theme - all visuals are re-created and if you have some static content (like the icon) - you'll get the exception because the same visual is tried to be inserted into another place in the visual tree.
Anyway in this scenario you can workaround it if you use the IconTemplate for each MenuItem.
If you have further problems, please let us know.

Sincerely yours,
Miro Miroslavov
the Telerik team

answered on 11 Oct 2010, 02:09 PM

Hello Chris,

You can also use DataTemplates for the Grid columns. Just set the HeaderTemplate with an Image like follows.

<grid:GridViewDataColumn Header="/Insurer.Analytics.SharedResources;component/Icons/mail_read.png">

<grid:GridViewDataColumn.HeaderTemplate>

<DataTemplate>

<Image Source="{Binding}" ToolTipService.ToolTip="Read" />

</DataTemplate>

</grid:GridViewDataColumn.HeaderTemplate>

</grid:GridViewDataColumn>

Just keep in mind that in that way of development everything should be in a template.
Can you try it and let me know if this is ok for you.

Best wishes,
Miro Miroslavov
the Telerik team

answered on 14 Oct 2010, 08:18 AM

Hi Chris,

Sorry for misleading you. Please use the Header property:

<grid:GridViewDataColumn>

<grid:GridViewDataColumn.Header>

<DataTemplate>

<Image Source="/Insurer.Analytics.SharedResources;component/Icons/mail_read.png" ToolTipService.ToolTip="Read" />

</DataTemplate>

</grid:GridViewDataColumn.Header>

</grid:GridViewDataColumn>

Greetings,
Veselin Vasilev
the Telerik team

answered on 10 May 2011, 08:45 PM

Hi;

I'm having the same issue with RadPanelBar control.

here is my xaml:
<telerik:RadPanelBar Name="radControlPanelBar" VerticalAlignment="Stretch"
telerik:StyleManager.Theme="{Binding Source={StaticResource menuItems}, Path=SelectedTheme}" >
<telerik:RadPanelBarItem DropPosition="Inside" TabNavigation="Once" >
<telerik:RadPanelBarItem.HeaderTemplate>
<DataTemplate>
<TextBlock Text="Map Layers"/>
</DataTemplate>
</telerik:RadPanelBarItem.HeaderTemplate>
</telerik:RadPanelBarItem>
</telerik:RadPanelBar>

I wanted to share the same theme for my controls, it works with all my page controls except RadPanelBar. I hope this is not because of the little arrow we use to Expand/Collapse items. there is no way to change that image I think.

Any work around this please ?

answered on 13 May 2011, 04:06 PM

CustomThemeDemo.zip

Hi Hamid,

I am not sure what might be causing your issue. I tried to reproduce it on our side but I wasn't able to. Can you please have a look at the attached sample and let me know if it works for you? Also, if the attached solution doesn't illustrate your scenario correctly, can you please modify it accordingly or send us a small sample reproducing your issue so that we can further investigate it. Thank you in advance.

Greetings,
Tina Stancheva
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Runtime Themes with Prism &amp; MVVM

11 Answers, 1 is accepted

Runtime Themes with Prism & MVVM