Hide the Delete button on small Appointments

[Lucie]

When Appointment is small then is visible only delete button. Is possible in this case hide delete button?
(I do not want to remove delete button for all Appointments!)

See attached picture

[Miroslav Nedyalkov]

Hi Jana,

You could change the ControlTemplate of the AppointmentItem and bind the Visibility property of the Close button to the ActualWidth of the root panel in the ControlTemplate using a ValueConverter which converts the width to Visibility.Visible when the value is bigger then a specified value and Visibility.Collapsed if not. For more information how to create a custom ValueConvertor please refer to this article and for more information about how to change the ControlTemplate of an AppointmentItem, please refer to this article.

Hope this helps.

All the best,
Miroslav Nedyalkov
the Telerik team

[Lucie]

I have changed binding for visibility of DeletButton  this way

Visibility

 

 

="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth, Converter={StaticResource Width2Visibility_Converter}, Mode=TwoWay}"

 

but input argument value from converter is for all Appointment 0.0
Is  there better way how test width?

Regards

[Miroslav Nedyalkov]

Hi Jana,

I'm sorry it is my mistake - the ActualWidth property doesn't fire property changed notification and the binding will never be evaluated. What I tried was to create a custom ContentControl with a custom property for the AvailableSize, in which to host the Close button. Here is to code of the custom control:

public class AvailableSizeAwareContentControl : ContentControl
{
    public static readonly DependencyProperty AvailableSizeProperty =
        DependencyProperty.Register("AvailableSize", typeof(Size), typeof(AvailableSizeAwareContentControl), null);

    public Size AvailableSize
    {
        get { return (Size)this.GetValue(AvailableSizeProperty); }
        set { this.SetValue(AvailableSizeProperty, value); }
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        this.AvailableSize = availableSize;

        return base.MeasureOverride(availableSize);
    }
}

And change the XAML as follows:

<local:AvailableSizeAwareContentControl x:Name="ButtonHost" VerticalContentAlignment="Stretch"
        HorizontalContentAlignment="Stretch">
    <telerik:RadButton x:Name="DeleteButton"
            Visibility="{Binding AvailableSize.Width, ElementName=ButtonHost, Converter={StaticResource DoubleToVisibilityConverer}, ConverterParameter=30}"
            ClickMode="Press"
            CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}"
            Command="local:RadScheduleViewCommands.DeleteAppointment"
            HorizontalAlignment="Right" Height="11" IsTabStop="False" Margin="5 5 6 5"
            Padding="0" telerik:StyleManager.Theme="{StaticResource Theme}"
            VerticalAlignment="Top" Width="11">
        <Path Data="M0,0 L5,5 M5,0 L0,5"
                Stroke="{StaticResource AppointmentItemDeleteIconStroke}" />
    </telerik:RadButton>
</local:AvailableSizeAwareContentControl>

This works but has a side effect - every time the container is measured the close button appears if the AppointmentItem is big enough. Unfortunately this work-around is the only one we have currently.

Hope this will help you to resolve the problem.

Regards,
Miroslav Nedyalkov
the Telerik team

[Lucie]

perfect solution, thank you very much

Regards