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

Theming on DataForm Template microsoft controls

4 Answers 96 Views
DataForm
This is a migrated thread and some comments may be shown as answers.
Carlos
Top achievements
Rank 2
Carlos asked on 01 Jun 2011, 07:32 PM
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:vm="clr-namespace:SGA.ViewModels"
    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"
    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>

4 Answers, 1 is accepted

Sort by
0
Vanya Pavlova
Telerik team
answered on 01 Jun 2011, 07:41 PM
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
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
0
Carlos
Top achievements
Rank 2
answered on 01 Jun 2011, 10:02 PM
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.
0
Accepted
Ivan Ivanov
Telerik team
answered on 07 Jun 2011, 11:59 AM
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
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
0
Carlos
Top achievements
Rank 2
answered on 13 Jun 2011, 03:59 PM
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
Tags
DataForm
Asked by
Carlos
Top achievements
Rank 2
Answers by
Vanya Pavlova
Telerik team
Carlos
Top achievements
Rank 2
Ivan Ivanov
Telerik team
Share this question
or