Theming on DataForm Template microsoft controls

[Carlos]

I have a DataForm filled with a DataTemplate. That that template has several microsoft controls. I want to bind a Theme on them.

The DataForm is (data) filled using a Collection, and the current item is defined by a bind a GridView's selected item.
That selected item is

I use MVVM, and so I have a VM class, defined in the code bellow as:

    <UserControl.DataContext>

        <vm:manFormasContactoVM/>

    </UserControl.DataContext>

I have created an object wich I named "Tema" defined in manFormasContactoVM as:

private Theme _tema = new SummerTheme();
public Theme Tema
{
    get { return _tema; }
    set { _tema = value; OnPropertyChanged("Tema"); }
}

The last defined checkbox of the next posted xaml gets the bind correctly, the controls that are inside the DataTemplate don't. I imagine that's because the data context is the GridView selected item instead of the all manFormasContactoVM class where "Tema" is defined.

So, if I'm not wrong, telerik's don't have textboxes, and I must use Microsoft one's... is there a way I can accomplish the Theme binding on those Microsoft datatemplated controls?

<UserControl
    x:Class="SGA.UserControls.TesteFormasContacto"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:SGA.ViewModels"
    xmlns:wrap="http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:swi="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:esi="clr-namespace:Expression.Samples.Interactivity;assembly=Expression.Samples.Interactivity"
    xmlns:Converter="clr-namespace:SGA.Classes"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    mc:Ignorable="d"
    d:DesignHeight="600" d:DesignWidth="800">

    <UserControl.Resources>
        <Converter:SitConverter x:Key="SitConverter"/>
        <Converter:DataConverter x:Key="DataConverter"/>
        <DataTemplate x:Key="ApenasVisualizar">
            <StackPanel>
                <telerik:RadTabControl DisplayMemberPath="Content">
                    <telerik:RadTabItem>
                        <telerik:RadTabItem.Header>
                            <TextBlock Text="Editar Formas de Contacto" Width="180" Cursor="Hand" HorizontalAlignment="Center"></TextBlock>
                        </telerik:RadTabItem.Header>
                        <telerik:RadTabItem.Content>
                            <telerik:DataFormDataField Margin="0">
                                <Grid Width="540" Height="110" ScrollViewer.VerticalScrollBarVisibility="Auto">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="0.2*"/>
                                        <ColumnDefinition Width="0.8*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="0.5*"/>
                                        <RowDefinition Height="0.5*"/>
                                    </Grid.RowDefinitions>
                                    <TextBlock Text="Designação: " HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="0" Margin="0,10,0,0" telerik:StyleManager.Theme="Expression_Dark"></TextBlock>
                                    <TextBox Text="{Binding DesignacaoProp, Mode=TwoWay}" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" Margin="10,10,0,0" IsReadOnly="True" Height="22" Width="350" telerik:StyleManager.Theme="Expression_Dark"></TextBox>
                                    <TextBlock Text="Activo: " HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="0" Grid.Row="1" Margin="0,-10,0,0" telerik:StyleManager.Theme="Expression_Dark"></TextBlock>
                                    <CheckBox IsChecked="{Binding SitProp, Mode=TwoWay}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="9,-10,0,0" Grid.Column="1" Grid.Row="1" IsEnabled="False" telerik:StyleManager.Theme="Expression_Dark" />
                                </Grid>
                            </telerik:DataFormDataField>
                        </telerik:RadTabItem.Content>
                    </telerik:RadTabItem>
                    <telerik:RadTabItem>
                        <telerik:RadTabItem.Header>
                            <TextBlock Text="Detalhes" Width="180" Cursor="Hand" HorizontalAlignment="Center"></TextBlock>
                        </telerik:RadTabItem.Header>
                        <telerik:RadTabItem.Content>
                            <telerik:DataFormDataField>
                                <Grid Width="540" Height="110" ScrollViewer.VerticalScrollBarVisibility="Auto">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="0.25*"/>
                                        <ColumnDefinition Width="0.25*"/>
                                        <ColumnDefinition Width="0.25*"/>
                                        <ColumnDefinition Width="0.25*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <TextBlock Text="ID:"           Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0" telerik:StyleManager.Theme="Expression_Dark"></TextBlock>
                                    <TextBlock Text="Criado por:"   Grid.Column="0" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0" telerik:StyleManager.Theme="Expression_Dark"></TextBlock>
                                    <TextBlock Text="Criado em:"    Grid.Column="0" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0" telerik:StyleManager.Theme="Expression_Dark"></TextBlock>
                                    <TextBlock Text="Alterado por:" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0" telerik:StyleManager.Theme="Expression_Dark"></TextBlock>
                                    <TextBlock Text="Alterado em:"  Grid.Column="2" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0" telerik:StyleManager.Theme="Expression_Dark"></TextBlock>
                                    <TextBlock Text="Versão:"       Grid.Column="0" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0" telerik:StyleManager.Theme="Expression_Dark"></TextBlock>

                                    <TextBox Text="{Binding IdProp}"      Grid.Column="1" Grid.Row="0" IsReadOnly="True" Width="Auto" Height="20" HorizontalAlignment="Left" VerticalAlignment="Center" telerik:StyleManager.Theme="{Binding Tema}"></TextBox>
                                    <TextBox Text="{Binding InsUserProp}" Grid.Column="1" Grid.Row="1" IsReadOnly="True" Width="100"  Height="20" HorizontalAlignment="Left" VerticalAlignment="Center" telerik:StyleManager.Theme="{Binding Tema}"></TextBox>
                                    <TextBox Text="{Binding InsDataProp,  Converter={StaticResource DataConverter}}"
                                                                          Grid.Column="1" Grid.Row="2" IsReadOnly="True" Width="100"  Height="20" HorizontalAlignment="Left" VerticalAlignment="Center" telerik:StyleManager.BasedOn="frmFormasContacto"></TextBox>
                                    <TextBox Text="{Binding AltUserProp}" Grid.Column="3" Grid.Row="1" IsReadOnly="True" Width="100"  Height="20" HorizontalAlignment="Left" VerticalAlignment="Center" telerik:StyleManager.Theme="Expression_Dark"></TextBox>
                                    <TextBox Text="{Binding AltDataProp, Converter={StaticResource DataConverter}}"
                                                                          Grid.Column="4" Grid.Row="2" IsReadOnly="True" Width="100"  Height="20" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBox>
                                    <TextBox Text="{Binding VersaoProp}"  Grid.Column="1" Grid.Row="5" IsReadOnly="True" Width="Auto" Height="20" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBox>
                                </Grid>
                            </telerik:DataFormDataField>
                        </telerik:RadTabItem.Content>
                    </telerik:RadTabItem>
                </telerik:RadTabControl>
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>

    <UserControl.DataContext>
        <vm:manFormasContactoVM/>
    </UserControl.DataContext>

    <Grid x:Name="LayoutRoot" Height="400" Width="600">
        <telerik:RadBusyIndicator x:Name="bsyIndicator" IsBusy="{Binding BloquearLeituraEscritaDados}" Margin="0" />

        <Grid x:Name="LayoutRoot2" Margin="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.4*"/>
                <RowDefinition Height="0.6*"/>
            </Grid.RowDefinitions>
            <telerik:RadGridView x:Name="grdFormasContacto" ItemsSource="{Binding OCFormasContacto}" RowIndicatorVisibility="Collapsed"
                                 AutoGenerateColumns="False" Cursor="Hand" Grid.Row="0" RowHeight="20"
                                 IsReadOnly="True" AllowDrop="False" DragElementAction="None" MaxHeight="160" Width="600" Margin="0"
                                 SelectedItem="{Binding FormaContactoSeleccionada, Mode=TwoWay}" ShowGroupPanel="False"
                                 CanUserSelect="{Binding SeleccaoActiva}" ShowColumnFooters="False" ShowInsertRow="False">
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding DesignacaoProp}" Header="Designação" Width="0.85*"/>
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding SitProp, Converter={StaticResource SitConverter}}" Header="Estado" Width="0.15*"/>
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>

            <telerik:RadDataForm Header="Detalhes Formas de Contacto" x:Name="frmFormasContacto" Grid.Row="1"
                             CommitButtonContent="Gravar"
                             CancelButtonContent="Cancelar"
                             CommandButtonsVisibility="{Binding VisibilidadeBotoes}" Margin="0"
                             AutoGenerateFields="False" ItemsSource="{Binding OCFormasContacto, Mode=TwoWay}"
                             CurrentItem="{Binding SelectedItem, ElementName=grdFormasContacto, Mode=TwoWay}" Height="240" Width="600">

                <telerik:RadDataForm.ReadOnlyTemplate>
                    <StaticResource ResourceKey="ApenasVisualizar"/>
                </telerik:RadDataForm.ReadOnlyTemplate>

                <swi:Interaction.Triggers>
                    <swi:EventTrigger EventName="ValidatingItem">
                        <esi:CallDataMethod Method="DataFormasContacto_ValidatingItem" />
                    </swi:EventTrigger>
                    <swi:EventTrigger EventName="AddingNewItem">
                        <esi:CallDataMethod Method="DF_AddingNewItem" />
                    </swi:EventTrigger>
                    <swi:EventTrigger EventName="BeginningEdit">
                        <esi:CallDataMethod Method="DF_BeginningEdit" />
                    </swi:EventTrigger>
                    <swi:EventTrigger EventName="DeletingItem">
                        <esi:CallDataMethod Method="DF_DeletingItem" />
                    </swi:EventTrigger>
                    <swi:EventTrigger EventName="DeletedItem">
                        <esi:CallDataMethod Method="DF_DeletedItem" />
                    </swi:EventTrigger>
                    <swi:EventTrigger EventName="EditEnding">
                        <esi:CallDataMethod Method="DF_EditEnding" />
                    </swi:EventTrigger>
                    <swi:EventTrigger EventName="EditEnded">
                        <esi:CallDataMethod Method="DF_EditEnded" />
                    </swi:EventTrigger>

                    <swi:EventTrigger EventName="LayoutUpdated">
                        <esi:CallDataMethod Method="frmTooltipster" />
                    </swi:EventTrigger>
                </swi:Interaction.Triggers>
            </telerik:RadDataForm>
        </Grid>
        <CheckBox x:Name="chkVisualizarInactivos" IsChecked="{Binding VisualizarInactivos, Mode=TwoWay}" IsEnabled="{Binding SeleccaoActiva}" Content="{Binding LabelVisualizarInactivos}" Margin="300,-46,0,0" Height="15" Cursor="Hand" telerik:StyleManager.Theme="{Binding Tema}"/>
    </Grid>
</UserControl>

[Vanya Pavlova]

Hello Carlos,

 

The Telerik themes are designed to work mainly with our RadControls and some native WPF/Silverlight controls. Our theming mechanism cannot cover the full control list included either in Silverlight or in WPF.
Below is the full control list of native WPF/Silverlight controls supported by the Telerik theming mechanism:

-System.Windows.Button
-System.Windows.CheckBox
-System.Windows.ListBox
-System.Windows.RadioButton
-System.Windows.ScrollViewer
-System.Windows.PasswordBox
-System.Windows.RepeatButton
-System.Windows.TextBox


For all ot these controls you may specify the theme as you may for any Telerik control:

<TextBox telerik:StyleManager.Theme="Expression_Dark" ......  />

In this way the TextBox will pick the corresponding style in Expression_Dark theme.

Greetings,
Vanya Pavlova
the Telerik team

[Carlos]

We do not want to hard code those controls. And we can get to work those Microsoft native  textboxes and checkboxes.. with binding.

We just can't do that inside a datatemplate because the datacontext is refering to an object instead of the root of objects of our VM class.

I'm pretty sure that you guys can help me out on these one. You have done it with much more harder questions.

[Ivan Ivanov]

Hi Carlos,

You may determine the DataContext and introduce a theme property in the respective class. However, this would be in contradiction with MVVM. Please, refer to the attached project and let me know if this solution meets your requirements. 

Best wishes,
Ivan Ivanov
the Telerik team

[Carlos]

Thanks for your answer Ivan.

Your solution is a nice one but it wasn't the thing I was requiring. I marked as "answered" because I've already done what I wanted. In a day or so (when I have more time) I'll post my code so others that have the same doubt can take profit of it.

Thanks
Carlos Sampaio