Styling Calendar

4 posts, 0 answers
  1. Mariusz
    Mariusz avatar
    26 posts
    Member since:
    Jul 2011

    Posted 21 Feb 2012 Link to this post

    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.
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 21 Feb 2012 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Mariusz
    Mariusz avatar
    26 posts
    Member since:
    Jul 2011

    Posted 21 Feb 2012 Link to this post

    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>
  5. Dani
    Admin
    Dani avatar
    848 posts

    Posted 22 Feb 2012 Link to this post

    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 >>
Back to Top