So, what I am trying to do here is to change the appearance of my RadScheduleView GroupHeaderContentTemplate on the click of a CheckBox. This CheckBox is bound to the ShowPictures property in my viewmodel. There is also a GroupHeaderHeight property to set the max height of each grouping.
Properties are defined below:
private bool _ShowPictures;
public bool ShowPictures
{
get
{
return this._ShowPictures;
}
set
{
if (this._ShowPictures == value)
{
return;
}
this._ShowPictures = value;
this.RaisePropertyChanged(nameof(this.ShowPictures));
}
}
private int _GroupHeaderHeight;
public int GroupHeaderHeight
{
get
{
return this._GroupHeaderHeight;
}
set
{
if (this._GroupHeaderHeight == value)
{
return;
}
this._GroupHeaderHeight = value;
this.RaisePropertyChanged(nameof(this.GroupHeaderHeight));
}
}
CheckBoxs code:
<CheckBox Name="cbShowPictures" Content="Show Pictures" Grid.Column="9"
IsChecked="{Binding ShowPictures,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" />
My RadScheduleViews code:
<UserControl.Resources>
<converters:DatabindingDebugConverter x:Key="DatabindingDebugConverter"/>
<BooleanToVisibilityConverter x:Key="BoolToVis"/>
<telerik:RadScheduleView x:Name="MainSchedule"
Grid.Row="0"
Margin="2"
TimeMarkersSource="{Binding TimeMarkers}"
CategoriesSource="{Binding Categories}"
MinAppointmentHeight="25"
NavigationHeaderVisibility="Visible"
AppointmentsSource="{Binding WorkOrderTasks,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
AppointmentCreated="MainSchedule_AppointmentCreated"
ResourceTypesSource="{Binding ResourceTypes}"
AppointmentDeleted="MainSchedule_AppointmentDeleted"
AppointmentEdited="MainSchedule_AppointmentEdited"
CurrentDate="{Binding FilterStart,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectedAppointment="{Binding SelectedWorkOrderTask, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
FirstVisibleTime="8:00:00"
ShowAppointmentDeleteButton="False"
ToolTipTemplate="{StaticResource AppointmentToolTipTemplate}">
<telerik:RadScheduleView.ViewDefinitions>
<telerik:TimelineViewDefinition MinTimeRulerExtent="1"
MaxTimeRulerExtent="Infinity"
MinorTickLength="1h"
DayStartTime="{Binding DailyStartTime, Mode=TwoWay}"
DayEndTime="{Binding DailyEndTime, Mode=TwoWay}"
VisibleDays="{Binding VisibleDays, Mode=TwoWay}"
StretchGroupHeaders="True"
StretchAppointments="True"/>
<telerik:DayViewDefinition DayStartTime="{Binding DailyStartTime, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
DayEndTime="{Binding DailyEndTime, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
VisibleDays="{Binding VisibleDays, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
StretchGroupHeaders="False"
MinTimeRulerExtent="1"
MaxTimeRulerExtent="Infinity"
MinorTickLength="1h" />
<telerik:WeekViewDefinition DayStartTime="{Binding DailyStartTime, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
DayEndTime="{Binding DailyEndTime, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
VisibleDays="{Binding VisibleDays, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
StretchGroupHeaders="False"
MinTimeRulerExtent="1"
MaxTimeRulerExtent="Infinity"
MinorTickLength="1h"/>
<telerik:MonthViewDefinition DayStartTime="{Binding DailyStartTime, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
DayEndTime="{Binding DailyEndTime, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
VisibleDays="{Binding VisibleDays, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
StretchGroupHeaders="False"
MinTimeRulerExtent="1"
MaxTimeRulerExtent="Infinity"/>
<telerik:CustomViewDefinition DayStartTime="{Binding DailyStartTime, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
DayEndTime="{Binding DailyEndTime, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
VisibleDays="{Binding VisibleDays, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
StretchGroupHeaders="False"
MinTimeRulerExtent="1"
MaxTimeRulerExtent="Infinity"
MinorTickLength="1h"/>
</telerik:RadScheduleView.ViewDefinitions>
<telerik:RadScheduleView.ActiveViewDefinition>
<telerik:TimelineViewDefinition MinTimeRulerExtent="1"
MaxTimeRulerExtent="Infinity"
MinorTickLength="1h"
DayStartTime="{Binding DailyStartTime, Mode=TwoWay}"
DayEndTime="{Binding DailyEndTime, Mode=TwoWay}"
VisibleDays="{Binding VisibleDays, Mode=TwoWay}"
StretchGroupHeaders="False"
StretchAppointments="False"/>
</telerik:RadScheduleView.ActiveViewDefinition>
<telerik:RadScheduleView.AppointmentItemContentTemplate>
<DataTemplate>
<StackPanel Margin="4 2" MinHeight="20" >
<TextBlock Text="{Binding Subject}" FontWeight="Bold" />
<TextBlock Text="{Binding Appointment.Body}" TextWrapping="Wrap" />
<TextBlock Text="Time Range" Foreground="{StaticResource StrongBrush}"/>
<StackPanel Orientation="Horizontal" Margin="4 0">
<TextBlock Text="{Binding Path=Start, StringFormat='MMM dd, yyyy HH:MM'}"
FontWeight="SemiBold" Foreground="{StaticResource AccentBrush}" />
<TextBlock Text=" - " Foreground="{StaticResource AccentBrush}" />
<TextBlock Text="{Binding Path=End, StringFormat='MMM dd, yyyy HH:MM'}"
FontWeight="SemiBold" Foreground="{StaticResource AccentBrush}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</telerik:RadScheduleView.AppointmentItemContentTemplate>
<telerik:RadScheduleView.GroupDescriptionsSource>
<telerik:GroupDescriptionCollection>
<schedule:ResourceGroupDescription ResourceType="Equipment" />
</telerik:GroupDescriptionCollection>
</telerik:RadScheduleView.GroupDescriptionsSource>
<telerik:RadScheduleView.GroupHeaderContentTemplate>
<DataTemplate>
<Border Background="{Binding Name.Brush}" Width="140" Height="{Binding GroupHeaderHeight, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="1 1 1 0">
<StackPanel Margin="10 10 10 10">
<Image Margin="5 0 10 0" Height="60" Width="60" Visibility="{Binding ShowPictures, Converter= {StaticResource BoolToVis}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
HorizontalAlignment="Left" Stretch="UniformToFill" Source="{Binding Name.Photo}" />
<TextBlock Text="{Binding FormattedName}" TextWrapping="Wrap" Margin="8 0" VerticalAlignment="Center" />
</StackPanel>
</Border>
</DataTemplate>
</telerik:RadScheduleView.GroupHeaderContentTemplate>
<telerik:RadScheduleView.TimeRulerItemStyleSelector>
<local:GroupItemStyleSelector>
<local:GroupItemStyleSelector.GroupItemStyle>
<Style TargetType="telerik:TimeRulerGroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:TimeRulerGroupItem">
<Border BorderBrush="{StaticResource BasicBrush}" BorderThickness="1 1 0 0">
<ContentPresenter Margin="4 2" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</local:GroupItemStyleSelector.GroupItemStyle>
</local:GroupItemStyleSelector>
</telerik:RadScheduleView.TimeRulerItemStyleSelector>
</telerik:RadScheduleView>
I initialize ShowPictures to true and GroupHeaderHeight to 60 in my viewmodels constructor. Getter and setters are called but no changes happen visually. The goal here is when show pictures is enabled I show the image in the group header template and increase the height, while disabled I do not show the image and lessen the height.
Please, any advice on how I could improve or errors I'm making with this could will be appreciated.
If any code is missing, I will add if asked.
