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

Problem when using Expression_DarkTheme

5 Answers 195 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Terje Johansen
Top achievements
Rank 1
Terje Johansen asked on 10 Apr 2012, 10:06 AM
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>

5 Answers, 1 is accepted

Sort by
0
Dani
Telerik team
answered on 10 Apr 2012, 11:03 AM
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 >>
0
Terje Johansen
Top achievements
Rank 1
answered on 10 Apr 2012, 02:51 PM
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:
0
Terje Johansen
Top achievements
Rank 1
answered on 10 Apr 2012, 03:07 PM

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)
0
Dani
Telerik team
answered on 12 Apr 2012, 01:26 PM
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 >>
0
Terje Johansen
Top achievements
Rank 1
answered on 12 Apr 2012, 01:34 PM
Hi Dani,
I will wait for the next LIB and check out the fix for this...

Thank you for all help!
Tags
Calendar
Asked by
Terje Johansen
Top achievements
Rank 1
Answers by
Dani
Telerik team
Terje Johansen
Top achievements
Rank 1
Share this question
or