Theming on DataForm Template microsoft controls

5 posts, 1 answers
  1. Carlos
    Carlos avatar
    50 posts
    Member since:
    Feb 2011

    Posted 01 Jun 2011 Link to this post

    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>
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 01 Jun 2011 Link to this post

    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
  3. DevCraft banner
  4. Carlos
    Carlos avatar
    50 posts
    Member since:
    Feb 2011

    Posted 01 Jun 2011 Link to this post

    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.
  5. Answer
    Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    1127 posts

    Posted 07 Jun 2011 Link to this post

    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
  6. Carlos
    Carlos avatar
    50 posts
    Member since:
    Feb 2011

    Posted 13 Jun 2011 Link to this post

    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
Back to Top
DevCraft banner