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

Problem when using Expression_DarkTheme

5 Answers 328 Views

Calendar

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

Terje Johansen asked on 10 Apr 2012, 10:06 AM

RadCalendar---DayTemplateSelector-1.png

RadCalendar---DayTemplateSelector-2.png

RadCalendar---DayTemplateSelector-1-Expression-Dark.png

RadCalendar---DayTemplateSelector-2-Expression-Dark.png

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>

<Border Name="mask" Background="{DynamicResource HighlightDayColor}" CornerRadius="7"/>

<StackPanel>

<StackPanel.OpacityMask>

<VisualBrush Visual="{Binding ElementName=mask}"/>

</StackPanel.OpacityMask>

<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

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 >>

answered on 10 Apr 2012, 02:51 PM

Calendar-Theme-issue.png

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:

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)

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 >>