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

Styling Calendar

3 Answers 68 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Mariusz
Top achievements
Rank 1
Mariusz asked on 21 Feb 2012, 07:56 AM
Hello,
I want to prepare calendar for touch screen, so I need bigger buttons. I have set bigger FontSize, and It looks good. But I have problem with small header, and buttons to change month.

3 Answers, 1 is accepted

Sort by
0
Dani
Telerik team
answered on 21 Feb 2012, 08:34 AM
Hello Mariusz,

To modify the header, you will need to edit the template of the RadCalendar control. Inside the template, you will find a Border named Navigation. Its height is dependant on the height of the containing elements (buttons), which are set a MinHeight of 22. Changing that min height or affecting their positioning in any way will also affect the height of the header.

I hope this information will be helpful.

Greetings,
Dani
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Mariusz
Top achievements
Rank 1
answered on 21 Feb 2012, 09:54 AM
Hi,
Thanks for help :)
It works.

I don't know if it is the best solution, but my code looks that way:
<Style x:Key="BigMoveLeftButtonStyle" TargetType="RepeatButton" BasedOn="{StaticResource MoveLeftButtonStyle}">
      <Setter Property="MinHeight" Value="60"></Setter>
      <Setter Property="MinWidth" Value="60"></Setter>
 
  </Style>
  <Style x:Key="BigMoveRightButtonStyle" TargetType="RepeatButton" BasedOn="{StaticResource MoveRightButtonStyle}">
      <Setter Property="MinHeight" Value="60"></Setter>
      <Setter Property="MinWidth" Value="60"></Setter>
  </Style>
  <Style x:Key="BigCalendarHeaderButton" TargetType="Button" BasedOn="{StaticResource CalendarHeaderButton}">
      <Setter Property="MinHeight" Value="60"></Setter>
  </Style>
 
  <!--telerikInput:RadCalendar-->
  <Style TargetType="telerikInput:RadCalendar"  x:Key="stlBigCalendar">
     
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="telerikInput:RadCalendar">
                  <Grid>
                      <Grid.RowDefinitions>
                          <RowDefinition Height="Auto" />
                          <RowDefinition Height="*" />
                      </Grid.RowDefinitions>
 
                      <Border x:Name="Background" Grid.RowSpan="2"
                              BorderThickness="{TemplateBinding BorderThickness}"
                              Background="{TemplateBinding Background}" />
 
                      <calendar:TransitionPanel x:Name="TransitionPanel" Grid.Row="1"
                              ClipToBounds="True"
                              Margin="{StaticResource CalendarTransitionPanelMargin}">
                          <primitives:RadUniformGrid x:Name="MonthViews" Margin="1 1 0 0"
                                  Rows="{TemplateBinding Rows}"
                                  Columns="{TemplateBinding Columns}" />
                          <primitives:RadUniformGrid x:Name="YearViews" Margin="1 1 0 0"
                                  Rows="{TemplateBinding Rows}"
                                  Columns="{TemplateBinding Columns}" Visibility="Collapsed" />
                          <primitives:RadUniformGrid x:Name="DecadeViews" Margin="1 1 0 0"
                                  Rows="{TemplateBinding Rows}"
                                  Columns="{TemplateBinding Columns}" Visibility="Collapsed" />
                          <primitives:RadUniformGrid x:Name="CenturyViews" Margin="1 1 0 0"
                                  Rows="{TemplateBinding Rows}"
                                  Columns="{TemplateBinding Columns}" Visibility="Collapsed" />
                      </calendar:TransitionPanel>
 
                      <Border x:Name="OuterBorder" Grid.RowSpan="2"
                              BorderThickness="{TemplateBinding BorderThickness}"
                              CornerRadius="{StaticResource CalendarOuterBorderCornerRadius}"
                              BorderBrush="{TemplateBinding BorderBrush}">
                          <Border x:Name="InnerBorder"
                                  BorderBrush="{StaticResource CalendarInnerBorder}"
                                  CornerRadius="{StaticResource CalendarInnerBorderCornerRadius}"
                                  BorderThickness="1" />
                      </Border>
 
                      <Border x:Name="Navigation" Margin="0 0 0 -1" Canvas.ZIndex="2"
                              Visibility="{TemplateBinding HeaderVisibility}"
                              BorderThickness="{StaticResource CalendarHeaderBorderThickness}"
                              CornerRadius="{StaticResource CalendarHeaderOuterCornerRadius}"
                              BorderBrush="{StaticResource HeaderOuterBorder}"
                              Background="{StaticResource HeaderBackground}">
                          <Border BorderThickness="{StaticResource CalendarHeaderBorderThickness}"
                                  BorderBrush="{StaticResource HeaderInnerBorder}"
                                  CornerRadius="{StaticResource CalendarHeaderInnerCornerRadius}"
                                  Padding="{TemplateBinding Padding}">
                              <Grid>
                                  <Grid.ColumnDefinitions>
                                      <ColumnDefinition Width="Auto" />
                                      <ColumnDefinition Width="*" />
                                      <ColumnDefinition Width="Auto" />
                                  </Grid.ColumnDefinitions>
 
                                  <RepeatButton x:Name="MoveLeft" Grid.Column="0"
                                          Style="{StaticResource BigMoveLeftButtonStyle}"  />
                                  <Button x:Name="Header" Grid.Column="1"
                                          Style="{StaticResource BigCalendarHeaderButton}" />
                                  <RepeatButton x:Name="MoveRight" Grid.Column="2"
                                          Style="{StaticResource BigMoveRightButtonStyle}"  />
 
                              </Grid>
                          </Border>
                      </Border>
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
 
  </Style>
0
Dani
Telerik team
answered on 22 Feb 2012, 11:20 AM
Hi Mariusz,

Yes, your solution is Okay.

But if you want to avoid maintaining the same number of MinHeight across three elements, you can remove that and let the buttons take up their default size, and then set a MinHeight only to their containing Border.

Alternatively, you could  set their vertical alignment to Stretch and again let the containing Border MinHeight determine their MinHeight.

Of course, for touch screen, the buttons better stay large in size.


Greetings,
Dani
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Tags
Calendar
Asked by
Mariusz
Top achievements
Rank 1
Answers by
Dani
Telerik team
Mariusz
Top achievements
Rank 1
Share this question
or