Problem when using Expression_DarkTheme

6 posts, 0 answers
  1. Terje Johansen
    Terje Johansen avatar
    28 posts
    Member since:
    Mar 2010

    Posted 10 Apr 2012 Link to this post

    Hi,

    I have made a DayTemplateSelector - allowing me to style the calendar (highlighting different dates with colors..).
    This works fine with all the different themes except the "Expression_Dark" theme (the dates are not highlighted with my color)
    See attached images...(with and without "Expression_Dark" theme)
    1. Any ideas why this theme is different from the others?

    2. How can I decrease the height/width on the areas that show day/weeknumber?
    They take up way too much space...(I have marked the areas with green color on image: RadCalendar - DayTemplateSelector 2.png)

    <Controls:RadCalendar x:Name="TommedatoKalender" 
                                              Rows="3" Columns="4"
                                              SelectionMode="Extended"                                                  
                                              ViewsHeaderVisibility="Visible"
                                              DisplayDate="{Binding DisplayDate}">                                        
      
                                            <Controls:RadCalendar.DayTemplateSelector>
                                                <selector:KalenderDagSelector>
                                                    <selector:KalenderDagSelector.DefaultTemplate>
                                                        <DataTemplate>
                                                            <TextBlock Text="{Binding Text}" Height="18" Width="18" TextAlignment="Center"/>
                                                        </DataTemplate>
                                                        </selector:KalenderDagSelector.DefaultTemplate>
      
                                                       <selector:KalenderDagSelector.TommeDagTemplate>
                                                        <DataTemplate>
                                                            <Border BorderThickness="1" 
                                                            BorderBrush="{DynamicResource HighlightDayColor}" 
                                                            CornerRadius="12" 
                                                             HorizontalAlignment="Center" VerticalAlignment="Center"      Background="{DynamicResource HighlightDayColor}">
                                                                <Grid>
                                                                    <!-- Rounded mask (stretches to fill Grid) -->
                                                                    <Border Name="mask" Background="{DynamicResource HighlightDayColor}" CornerRadius="7"/>
                                                                    <!-- Main content container -->
                                                                    <StackPanel>
                                                                        <!-- Use a VisualBrush of 'mask' as the opacity mask -->
                                                                        <StackPanel.OpacityMask>
                                                                            <VisualBrush Visual="{Binding ElementName=mask}"/>
                                                                        </StackPanel.OpacityMask>
                                                                        <!-- Content -->
                                                                        <TextBlock Text="{Binding Text}" Background="{DynamicResource HighlightDayColor}" Height="18" Width="18" TextAlignment="Center" />
                                                                    </StackPanel>
                                                                </Grid>
                                                            </Border>
                                                        </DataTemplate>
                                                    </selector:KalenderDagSelector.TommeDagTemplate>
      
                                                </selector:KalenderDagSelector>
                                            </Controls:RadCalendar.DayTemplateSelector>
      
                                        </Controls:RadCalendar>
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 10 Apr 2012 Link to this post

    Hi Terje,

    Thanks for pointing out this Expression Blend issue.  Try editing the CalendarButtonStyle and adding the following two template bindings to the ContentControl inside the CalendarButtonControlTemplate:
    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
    ContentStringFormat="{TemplateBinding ContentStringFormat}"

    We will consider implementing this for the nearest LIB release.

    For resizing the areas in question, you need the MonthViewStyle, i.e. the CalendarViewStyle as Blend generates it. This style holds the layout you wish to modify. Notice that the rows and columns holding the week day names and week numbers occupy 1/6 and 1/7 of the whole RadCalendar layout respectively:
    <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="7*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
           <RowDefinition Height="*"/>
           <RowDefinition Height="6*"/>
    </Grid.RowDefinitions>

    The first column and the first row are the spots where you should change width / height.

    I hope this helps.

    All the best,
    Dani
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Terje Johansen
    Terje Johansen avatar
    28 posts
    Member since:
    Mar 2010

    Posted 10 Apr 2012 Link to this post

    Hi Dani,

    Thanks for quick reply!
    I was able to resize the day/weeknumber areas - thanks.

    But the solution for the calendar/theme problem didn't work to well...
    Adding the two template bindings made the calendar look completely different !
    It's no longer using Expression Dark theme... 
    See attached image:
  5. Terje Johansen
    Terje Johansen avatar
    28 posts
    Member since:
    Mar 2010

    Posted 10 Apr 2012 Link to this post

    This was inside the style:

    <Controls3:StyleManager.Theme>
                                                    <Controls3:Office_BlackTheme/>
                                                </Controls3:StyleManager.Theme>

    No wonder it look different... when I remove this from the style the calendar is using Expression Dark theme, but none of the colors I have added (using DayTemplateSelector) is visible....so I'm back at where I started!
    Why is this theme different from the others? It works fine with all the other themes...? 

    PS! Tried to replace <Controls3:Office_BlackTheme/> in the style with Expression Dark but it doesn't seem to matter which theme you enter...it still looks like the image I sent you (Calendar-Theme issue.png)
  6. Dani
    Admin
    Dani avatar
    848 posts

    Posted 12 Apr 2012 Link to this post

    Hello Terje,

    Normally Expression Blend will always generate the default Office Black stye for you. Whenever you wish to make changes upon a theme other than the default, you will need to manually extract those styles from your local RadControls installation folder.

    Since 2012 Q1 SP1 our clients receive a Themes folder with styles by assembly name. So what you will need is the Telerik.Windows.Controls.Input.xaml file from the ExpressionDark theme folder. It contains the RadCalendarStyle and all referenced resources.

    As a side note, I would like to stress that this issue was fixed and the fix will be available in the next LIB. So I think it is best if you wait for the next LIB  and avoid including hard-coded customization xaml in your project.

    I hope this will be helpful.

    All the best,
    Dani
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  7. Terje Johansen
    Terje Johansen avatar
    28 posts
    Member since:
    Mar 2010

    Posted 12 Apr 2012 Link to this post

    Hi Dani,
    I will wait for the next LIB and check out the fix for this...

    Thank you for all help!
Back to Top
UI for WPF is Visual Studio 2017 Ready