Remove Border around RadScheduleView

7 posts, 1 answers
  1. Henry
    Henry avatar
    20 posts
    Member since:
    Aug 2013

    Posted 17 Dec 2014 Link to this post

    I am trying to find a way to Style the RadScheduleView to remove the border, however, not having too much luck.  Attached is a picture, and some pseudo code to share with anyone who as a better idea than I.

    Thanks,
    HH

    public class CustomTimeRulerItemStyleSelector : OrientedTimeRulerItemStyleSelector
    {
    public Style MinorTickLineStyle
    {
    get { return m_MinorTickLineStyle; }
    set { m_MinorTickLineStyle = value; }
    }
    private Style m_MinorTickLineStyle;
    public Style MajorTickLineStyle
    {
    get { return m_MajorTickLineStyle; }
    set { m_MajorTickLineStyle = value; }
    }
    private Style m_MajorTickLineStyle;
    public override Style SelectStyle(object item, DependencyObject container, ViewDefinitionBase activeViewDeifinition)
    {
    if (container is TimeRulerLine)
    {
    TickData tick = item as TickData;
    if (tick.Type == TickType.Major)
    {
    return MajorTickLineStyle;
    }
    return MinorTickLineStyle;
    }
    return base.SelectStyle(item, container, activeViewDeifinition);
    }
    }


    <UserControl
    x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.ScheduleView"
    xmlns:my="clr-namespace:SilverlightApplication1"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d" d:DesignWidth="640" Height="252" >

    <UserControl.Resources>
    <my:CustomTimeRulerItemStyleSelector x:Key="CustomTimeRulerItemStyleSelector">
    <my:CustomTimeRulerItemStyleSelector.MajorTickLineStyle>
    <Style TargetType="telerik:TimeRulerLine">
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="telerik:TimeRulerLine">
    <Border x:Name="LineVisual" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="0 1 0 0">
    <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="OrientationStates">
    <VisualState x:Name="Horizontal">
    <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LineVisual" Storyboard.TargetProperty="BorderThickness">
    <DiscreteObjectKeyFrame KeyTime="0:0:0">
    <DiscreteObjectKeyFrame.Value>
    <Thickness>0 0 0 0</Thickness>
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    </VisualState>
    <VisualState x:Name="Vertical" />
    </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    </Border>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    </my:CustomTimeRulerItemStyleSelector.MajorTickLineStyle>

    <my:CustomTimeRulerItemStyleSelector.MinorTickLineStyle>
    <Style TargetType="telerik:TimeRulerLine">
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="telerik:TimeRulerLine">
    <Border x:Name="LineVisual" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="0 1 0 0">
    <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="OrientationStates">
    <VisualState x:Name="Horizontal">
    <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LineVisual" Storyboard.TargetProperty="BorderThickness">
    <DiscreteObjectKeyFrame KeyTime="0:0:0">
    <DiscreteObjectKeyFrame.Value>
    <Thickness>0 0 0 0</Thickness>
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    </VisualState>
    <VisualState x:Name="Vertical" />
    </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    </Border>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    </my:CustomTimeRulerItemStyleSelector.MinorTickLineStyle>
    </my:CustomTimeRulerItemStyleSelector>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="#FF242121">

    <telerik:RadScheduleView SpecialSlotsSource="{Binding SpecialSlots}"
    TimeRulerItemStyleSelector="{StaticResource CustomTimeRulerItemStyleSelector}"
    CurrentDate="{Binding ElementName=RadTimeline1, Path=VisiblePeriodStart}"
    Height="145" Margin="54,57,64,0"
    MinAppointmentHeight="15" Name="theSchedule" NavigationHeaderVisibility="Collapsed"
    VerticalAlignment="Top" Background="{x:Null}"
    FontSize="10" VerticalScrollBarVisibility="Disabled" >
    <telerik:RadScheduleView.ActiveViewDefinition>
    <telerik:TimelineViewDefinition MaxTimeRulerExtent="Infinity"
    MinTimeRulerExtent="1" ShowTimeRuler="False"
    StretchAppointments="False" StretchGroupHeaders="True" />
    </telerik:RadScheduleView.ActiveViewDefinition>
    </telerik:RadScheduleView>
    </Grid>
    </UserControl>
  2. Nasko
    Admin
    Nasko avatar
    585 posts

    Posted 18 Dec 2014 Link to this post

    Hello Henry,

    In order to achieve the desired appearance, the "AppointmentsBorder" element located inside the default RadScheduleView ControlTemplate should be modified as needed. Please, give it a try and let us know if it worked for you.

    Hopes this helps.

    Regards,
    Nasko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. Henry
    Henry avatar
    20 posts
    Member since:
    Aug 2013

    Posted 18 Dec 2014 in reply to Nasko Link to this post

    Hi Nasko:
    I am trying to locate a simple example on how to perform this, however, I am not having much luck.  I am hoping that I do not have to include the entire Style XML file into my application.  If you can provide me a simple example, that would be great.



  5. Nasko
    Admin
    Nasko avatar
    585 posts

    Posted 19 Dec 2014 Link to this post

    Hello Henry,

    Based on the provided code snippet we have created a sample project that demonstrates the approach described in my previous response - please, check it. Note that the provided project uses Implicit Styles and xaml-less binaries should be referenced (usually they are located in the Binaries.NoXaml folder within the installation folder of the controls). 

    We hope this will help you.

    Regards,
    Nasko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Henry
    Henry avatar
    20 posts
    Member since:
    Aug 2013

    Posted 19 Dec 2014 in reply to Nasko Link to this post

    Hi Nasko --

    That works great, thanks!

    Is there anyway that I can overload that one line in the XAML file without having to load the entire XAML theme in the APP.XAML file.  IE: is there anyway to just use the below line of code in my App as an Overload to the AppointmentBorder?

            <Border x:Name="AppointmentsBorder" Grid.Row="1" Grid.Column="1" BorderBrush="Transparent" BorderThickness="0"/>

    If not, I can use as it, however, I like keeping my code as small as possible.

    Thanks,
    HH
  7. Answer
    Nasko
    Admin
    Nasko avatar
    585 posts

    Posted 19 Dec 2014 Link to this post

    Hello Henry,

    As another approach to achieve the desired you could handle the Loaded event of RadScheduleView and set the Opacity property of "AppointmentsBorder" to 0:
    private void radScheduleView1_Loaded(object sender, RoutedEventArgs e)
    {
        Dispatcher.BeginInvoke(new Action(() =>
        {
            Border border = this.radScheduleView1.ChildrenOfType<Border>().First(b => b.Name == "AppointmentsBorder");
            border.BorderBrush.Opacity = 0;
        }));
    }

    Hope this helps.

    Regards,
    Nasko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Henry
    Henry avatar
    20 posts
    Member since:
    Aug 2013

    Posted 19 Dec 2014 in reply to Nasko Link to this post

    That is Awesome!!!!

    5 stars *****

    Thanks,
    HH
Back to Top
DevCraft banner