Unable to use App resources to define styles

[Cornelius]

Good day,

 

I am trying to centralize all the styling information in my apps resource dictionary, but I am not able to use the resources to define the styles for the RadListView.

This works:

<telerikDataControls:RadListView.PressedItemStyle>
                <telerikListView:ListViewItemStyle BackgroundColor="#F2F2F2" BorderColor="#e9e9e9" BorderWidth="1" BorderLocation="Bottom"/>
            </telerikDataControls:RadListView.PressedItemStyle>

 

This does not work:

<telerikDataControls:RadListView.PressedItemStyle>
               <telerikListView:ListViewItemStyle BackgroundColor="{DynamicResource MedLightGrey}" BorderColor="{DynamicResource LightGrey}" BorderWidth="1" BorderLocation="Bottom"/>
           </telerikDataControls:RadListView.PressedItemStyle>

 

It gives me an error: "No property, bindable property, or event found for 'BackgroundColor' "

I also get the same issue when trying to define ListViewItemStyle in my Resource Dictionary.

Thanks & Regards
Cornelius Kruger

 

 

[Nikolay Demirev]

Hi Cornelius,

The ListViewItemStyle properties are not BindableProperties. That is why you can not set them using DynamicResources. I have logged this as a feature request in our backlog. Here is a public item in our Feedback Portal where you can upvote and follow it in order to receive updates about the progress on the matter.

Meanwhile, you could move the entire ListViewItemStyle instance in your application's styles. And set the RadListView.PressedItemStyle property using the DynamicReource from the styles.

Regards,
Nikolay Demirev
Telerik by Progress

[Bradley]

Can you provide an example of this for those of us new to Xamarin.  Not sure if I know how to properly let the structure for this object :).

[Nikolay Demirev]

Hello Bradley,

I have created a sample project which shows how you can define ListViewItemStyle in a ResourceDictionary and use it for the ListView.PressedItemStyle property value. You can find it attached. 

I hope this helps.

Regards,
Nikolay Demirev
Telerik by Progress

[Bill]

Struggling with this in Xamarin Forms v3.1

Looks like MergedWith is out and Source is in and it won't resolve references to the xmlns entries.

Suggestions for the best way to fix this (and updated documentation) would be great.

Thanks!

[Lance | Senior Manager Technical Support]

Hi Bill,

Unfortunately, this isn't yet supported. Until now, we needed to do a class-based approach to support the MergedWith approach. With the more traditional XAML Source approach, you need a path to the XAML file itself, which we have not yet exposed through the DLLs (or in the product distribution).

As of the latest Xamarin.Forms 3.1 release, MergedWith still works and I have attached a demo to verify. If you have any trouble, open a support ticket and we'll investigate further.

Here's the relevant code:

App.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:dataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"
    xmlns:dataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
    xmlns:chart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
    xmlns:primitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
    xmlns:input="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
    xmlns:conversationalUi="clr-namespace:Telerik.XamarinForms.ConversationalUI;assembly=Telerik.XamarinForms.ConversationalUI"
    xmlns:common="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common"
    x:Class="ResourceMergingTest.Portable.App">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary MergedWith="common:BlueResources"/>
                <ResourceDictionary MergedWith="input:TelerikThemeStyles"/>
                <ResourceDictionary MergedWith="primitives:TelerikThemeStyles"/>
                <ResourceDictionary MergedWith="chart:TelerikThemeStyles"/>
                <ResourceDictionary MergedWith="dataControls:TelerikThemeStyles" />
                <ResourceDictionary MergedWith="dataGrid:TelerikThemeStyles"/>
                <ResourceDictionary MergedWith="conversationalUi:TelerikThemeStyles"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainPage:

<telerikDataControls:RadListView ItemsSource="{Binding Source}" StyleClass="TelerikTheme"/>

Feature Request

However, to prepare for when they do remove the API from the product I have submitted a feature request to the developers. Theming: MergedWith is deprecated, provide Source path for ResourceDictionaries (if you'd like to be notified when the status changes, click the "Follow" button).

Thank you for your feedback.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Bill]

Lance,

Thanks. I expected as much. 

Theming is an important aspect of our product, so I imagine I'll be developing something more current with XF v3.1.

That said, where could I find all the relevant style settings for the Telerik controls? 

Bill

[Lance | Senior Manager Technical Support]

Hi Bill,

We are also excited that Xamarin.Forms has moved forward with this approach as it will allow us to better provide solution to themeing like we have for more mature XAML frameworks. For example, we have Implicit Styling for UI for WPF that works by using MergedDictionaries.

I can't promise any specific direction until I talk the dev team about this, they'll probably do a Spike on what's possible and then move forward. Subscribing to that feedback item will keep you in the loop.

To answer your question about what's currently possible using MergeWith, we have a dedicated documentation section: Themes Overview




The Modifying the Default Theme article will show you the styles that are currently able to overridden in XAML.


Lower Level Tweaks

As far as individual tweaks, each control is a little different as we've been moving away from wrapping native controls from our native Android and iOS components to a more cross platform approach (more flexible styling).

In some cases, a custom renderer is needed to really tweak the native control completely (for example Calendar), in other cases where it's a XamarinForms control you can do everything in Forms (e.g. RadNumericInput, RadButton, RadCheckbox, etc).


Demos

Seeing Custom Renderers in action can certainly help bootstrap you. I recommend reviewing the source code for the official demos apps we have in the App Stores. You can find the source code on your machine where you installed UI for Xamarin to. This help article shows you where to find them.


Future Needs

If you encounter a specific need and can't find an easy answer in the existing documentation, please don't hesitate to open a Support Ticket so that the developer responsible for that control can help you directly.

I hope I was able to point you in the right direction!

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik