How to use styles with themes?

[Shrikant]

Hi Telerik Team,

I have Implemented customized style of EditAppointmentDialogStyle for RadScheduleView.
Also I am changing Themes for my application , but the problem comes when I change the Theme, the style for appointment dialog get reset to Default for RadScheduleView.
below Code I am using

for Changing the app Themes :

<telerik:RadComboBox Name="Themes" Margin="7" Grid.Column="1" SelectedIndex="0"
                                         VerticalAlignment="Center" HorizontalAlignment="Left" >
                        <telerik:MetroTheme />
                        <telerik:Office_BlackTheme />
                        <telerik:Office_BlueTheme />
                        <telerik:Office_SilverTheme />
                        <telerik:SummerTheme />
                        <telerik:VistaTheme />
                        <telerik:Windows7Theme />
                        <telerik:TransparentTheme />
                        <telerik:Expression_DarkTheme />
                    </telerik:RadComboBox>

EditAppointmentTemplate :

<ControlTemplate x:Key="EditAppointmentTemplate" TargetType="telerik:SchedulerDialog">
          <Grid x:Name="grid">
              <Grid.RowDefinitions>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="*"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
              </Grid.RowDefinitions>

              <telerik:RadToolBar x:Name="AppointmentToolbar" GripVisibility="Collapsed" Margin="-1 -1 -1 3" Grid.Row="0" >
                  <TextBlock x:Name="ShowAs" Foreground="{StaticResource RadScheduleForeground}" Margin="1 0 1 1" telerik:LocalizationManager.ResourceKey="ShowAs"
                             VerticalAlignment="Center"/>
                  <telerik:RadComboBox x:Name="PART_Categories" ClearSelectionButtonContent="{Binding ClearSelectionButtonContent}" ClearSelectionButtonVisibility="Visible"
                                       EmptyText="{Binding CategoriesEmptyText}" ItemTemplate="{StaticResource CategoryComboBoxItemContentTemplate}"
                                       ItemsSource="{Binding Categories}" IsEnabled="{Binding IsReadOnly, Converter={StaticResource InvertedBooleanConverter}}"
                                       Margin="2 1" SelectionBoxTemplate="{StaticResource CategoryComboBoxItemContentTemplate}"
                                       SelectedItem="{Binding Occurrence.Appointment.Category, Mode=TwoWay}" Width="120"/>
              </telerik:RadToolBar>

              <Border x:Name="AppointmentCategory" Background="{Binding SelectedItem.CategoryBrush, ElementName=PART_Categories}" CornerRadius="3" Height="20" Margin="6 6" Grid.Row="1" Visibility="{Binding SelectedItem, Converter={StaticResource NullToVisibilityConverter}, ElementName=PART_Categories}">
                  <TextBlock Margin="6 0" Text="{Binding SelectedItem.DisplayName, ElementName=PART_Categories}" VerticalAlignment="Center"/>
              </Border>

              <Grid x:Name="Details" Margin="6" Grid.Row="2">
                  <Grid.Resources>
                      <telerik:InputMode x:Key="RadDateTimePickerInputModeDatePicker">DatePicker</telerik:InputMode>
                  </Grid.Resources>
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="120"/>
                      <ColumnDefinition Width="*"/>
                      <ColumnDefinition Width="*"/>
                  </Grid.ColumnDefinitions>
                  <Grid.RowDefinitions>
                      <RowDefinition Height="Auto"/>
                      <RowDefinition Height="*"/>
                      <RowDefinition Height="Auto"/>
                      <RowDefinition Height="Auto"/>
                  </Grid.RowDefinitions>
                  <TextBlock Grid.Column="0" Margin="6" Grid.Row="0" telerik:LocalizationManager.ResourceKey="Subject"/>
                  <TextBox Grid.ColumnSpan="2" Grid.Column="1" IsReadOnly="{Binding IsReadOnly}" Margin="3" Grid.Row="0" Text="{Binding Occurrence.Appointment.Subject, Mode=TwoWay}" />
                  <TextBlock Grid.Column="0" Margin="6" Grid.Row="1" telerik:LocalizationManager.ResourceKey="Body"/>
                  <TextBox Grid.ColumnSpan="2" Grid.Column="1" Height="70" IsReadOnly="{Binding IsReadOnly}" Margin="3" Grid.Row="1" TextWrapping="Wrap"
                           Text="{Binding Occurrence.Appointment.Body, Mode=TwoWay}" VerticalScrollBarVisibility="Visible" VerticalAlignment="Stretch"
                           VerticalContentAlignment="Stretch"/>

                  <TextBlock Grid.Column="0" Margin="6" Grid.Row="2" telerik:LocalizationManager.ResourceKey="StartTime"/>
                  <telerik:RadDateTimePicker Culture="{Binding DefaultCulture, Source={StaticResource LocalizationManager}}" Grid.Column="1" IsReadOnly="{Binding IsReadOnly}"
                                             IsEnabled="{Binding IsNotRecurrent}" Margin="3" Grid.Row="2" SelectedValue="{Binding ActualStart, Mode=TwoWay}"
                                             >
                      <telerik:RadDateTimePicker.InputMode>
                          <Binding Converter="{StaticResource BoolToInputModeConverter}" Path="IsAllDayEvent">
                              <Binding.ConverterParameter>
                                  <telerik:InputMode>DatePicker</telerik:InputMode>
                              </Binding.ConverterParameter>
                          </Binding>
                      </telerik:RadDateTimePicker.InputMode>
                  </telerik:RadDateTimePicker>
                  <TextBlock Grid.Column="0" Margin="6" Grid.Row="3" telerik:LocalizationManager.ResourceKey="EndTime" VerticalAlignment="Center"/>
                  <telerik:RadDateTimePicker Culture="{Binding DefaultCulture, Source={StaticResource LocalizationManager}}" Grid.Column="1"
                                             IsReadOnly="{Binding IsReadOnly}" IsEnabled="{Binding IsNotRecurrent}" Margin="3" Grid.Row="3"
                                             SelectedValue="{Binding ActualEnd, Mode=TwoWay}" >
                      <telerik:RadDateTimePicker.InputMode>
                          <Binding Converter="{StaticResource BoolToInputModeConverter}" Path="IsAllDayEvent">
                              <Binding.ConverterParameter>
                                  <telerik:InputMode>DatePicker</telerik:InputMode>
                              </Binding.ConverterParameter>
                          </Binding>
                      </telerik:RadDateTimePicker.InputMode>
                  </telerik:RadDateTimePicker>

              </Grid>
              <Grid Margin="3" Grid.Row="3" Visibility="{Binding ResourceTypesVisibility}">
                  <telerik:ItemsControl x:Name="PART_Resources" BorderBrush="{x:Null}" BorderThickness="0" HorizontalContentAlignment="Stretch" IsTabStop="false"
                                        ItemsSource="{Binding ResourceTypes}" ItemTemplateSelector="{StaticResource ResourcesEditorItemTemplateSelector}"
                                        IsEnabled="{Binding IsReadOnly, Converter={StaticResource InvertedBooleanConverter}}" Margin="3"
                                        Visibility="{Binding ResourceTypesVisibility}" VerticalContentAlignment="Stretch"/>
                  <TextBlock HorizontalAlignment="Center" Margin="3" Text="You can only change the resources by opening the series"
                             Visibility="{Binding ResourceTypesVisibility, Converter={StaticResource InvertedVisibilityConverter}}"/>
              </Grid>

              <CheckBox Content="Is done?" Grid.Column="2" HorizontalAlignment="Stretch" Grid.Row="3" VerticalAlignment="Center" Margin="15,0,0,0"
                        IsChecked="{Binding Occurrence.Appointment.IsDone, FallbackValue=False, Mode=TwoWay}"/>

              <StackPanel HorizontalAlignment="Right" Margin="13 6" Orientation="Horizontal" Grid.Row="5">
                  <!--Here set our new view model to the StackPanel and through the CommandParameter of the button get the view model and Cancel/Confirm it.-->
                  <StackPanel.DataContext>
                      <local:MyDialogViewModel />
                  </StackPanel.DataContext>
                  <telerik:RadButton Command="{Binding ConfirmCommand}" CommandParameter="{Binding ElementName=grid}" Margin="2" MinWidth="84" telerik:LocalizationManager.ResourceKey="Ok" telerik:RadWindow.ResponseButton="Accept" >
                      <ToolTipService.ToolTip>
                          <TextBlock telerik:LocalizationManager.ResourceKey="SaveAndClose" />
                      </ToolTipService.ToolTip>
                  </telerik:RadButton>
                  <telerik:RadButton Command="{Binding CancelCommand}" CommandParameter="{Binding ElementName=grid}" Margin="2" MinWidth="84" telerik:LocalizationManager.ResourceKey="Cancel" telerik:RadWindow.ResponseButton="Cancel" />
              </StackPanel>
          </Grid>
      </ControlTemplate>

RadScheduleView :

<Grid  Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Stretch">
           <schedule:RadScheduleView x:Name="scheduleview" telerik:StyleManager.Theme="{Binding SelectedValue, ElementName=Themes}"
                                ActiveViewDefinitionIndex="0" AppointmentsSource="{Binding}" CurrentDate="{Binding CurrentDate, Mode=TwoWay}"
                                FirstVisibleTime="8:00" Style="{StaticResource RadScheduleViewStyle}" >

               <schedule:RadScheduleView.ViewDefinitions>
                   <schedule:DayViewDefinition />
                   <schedule:WeekViewDefinition />
                   <schedule:MonthViewDefinition />
                   <schedule:TimelineViewDefinition />
               </schedule:RadScheduleView.ViewDefinitions>

               <schedule:RadScheduleView.TimeMarkersSource>
                   <schedule:DefaultTimeMarkerCollection />
               </schedule:RadScheduleView.TimeMarkersSource>

               <telerik:RadContextMenu.ContextMenu>
                   <telerik:RadContextMenu  IsOpen="{Binding IsContextMenuOpen,Mode=TwoWay}" >
                       <telerik:RadMenuItem Header="New Appointment..." CommandTarget="{Binding Menu.UIElement, RelativeSource={RelativeSource Self}}"
                           Command="schedule:RadScheduleViewCommands.CreateAppointment"  />
                       <telerik:RadMenuItem Header="Open..." CommandTarget="{Binding Menu.UIElement, RelativeSource={RelativeSource Self}}"
                           Command="schedule:RadScheduleViewCommands.EditAppointment" />
                       <telerik:RadMenuItem Header="Delete" CommandTarget="{Binding Menu.UIElement, RelativeSource={RelativeSource Self}}"
                           Command="schedule:RadScheduleViewCommands.DeleteAppointment" />

                       <telerik:RadMenuItem IsSeparator="True" />

                       <telerik:RadMenuItem Header="Next"
                           Command="{Binding NextDateCommand}"
                           CommandParameter="{Binding Menu.UIElement.ActiveViewDefinition.LargeChangeInterval, RelativeSource={RelativeSource Self} }" />
                       <telerik:RadMenuItem Header="Today"
                           Command="{Binding GotoTodayCommand}" />
                       <telerik:RadMenuItem Header="Previous"
                           Command="{Binding PrevDateCommand}"
                           CommandParameter="{Binding Menu.UIElement.ActiveViewDefinition.LargeChangeInterval, RelativeSource={RelativeSource Self} }" />

                       <telerik:RadMenuItem IsSeparator="True" />

                       <telerik:RadMenuItem Header="DayView" Command="schedule:RadScheduleViewCommands.SetDayViewMode"
                           CommandParameter="{Binding CurrentDate}"/>
                       <telerik:RadMenuItem Header="WeekView"
                           Command="schedule:RadScheduleViewCommands.SetWeekViewMode" />
                       <telerik:RadMenuItem Header="MonthView"
                           Command="schedule:RadScheduleViewCommands.SetMonthViewMode" />
                       <telerik:RadMenuItem Header="TimelineView"
                           Command="schedule:RadScheduleViewCommands.SetTimelineViewMode" />

                       <telerik:RadMenuItem IsSeparator="True" />

                       <telerik:RadMenuItem Header="Group By Category" IsCheckable="True"
                           IsChecked="{Binding IsGroupedByCategory, Mode=TwoWay}" />
                   </telerik:RadContextMenu>
               </telerik:RadContextMenu.ContextMenu>
           </schedule:RadScheduleView>
       </Grid>

So I just want to know, How can I use Styles with changing Themes at runtime?
Please help me to solve this,

Thanks

 

 

 

 

 

 

[Shrikant]

Can any one from telerik help me here???

[Dani]

Hello Shrikant,

Since 2012 Q1 SP1 significant changes have been made on our theming mechanism and improved support for implicit styles was introduced. You can learn more here.

Theoretically, for switching themes at runtime you can add or remove merged dictionaries to your application resources in the code behind. Use the structure and files explained in the article.

Greetings,
Dani
the Telerik team