How to use styles with themes?

3 posts, 1 answers
  1. Shrikant
    Shrikant avatar
    38 posts
    Member since:
    Jul 2011

    Posted 09 Apr 2012 Link to this post

    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

     

     

     

     

     

     

  2. Shrikant
    Shrikant avatar
    38 posts
    Member since:
    Jul 2011

    Posted 12 Apr 2012 Link to this post

    Can any one from telerik help me here???
  3. DevCraft banner
  4. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 12 Apr 2012 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top