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

Theming on DataForm Template microsoft controls

4 Answers 122 Views

DataForm

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

This question is locked. New answers and comments are not allowed.

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="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*"/>

</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*"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<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

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

Accepted

answered on 07 Jun 2011, 11:59 AM

RadGridView-SL4-AR-125.zip

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