Remove Border around RadScheduleView

[Henry]

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

[Nasko]

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

 

 

[Henry]

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.

[Nasko]

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

 

 

[Henry]

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

[Nasko]

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

 

 

[Henry]

That is Awesome!!!!

5 stars *****

Thanks,
HH