The RadToggleSwitchButton has properties for content when the button is checked(CheckedContent) and unchecked(UncheckedContent), but when three state is enabled and the value is set to null, the content is empty. How do I set the content when the RadToggleSwitchButton is in three state mode and the state is set to null?
1 Answer, 1 is accepted
0
Hello Johnathan,
The RadToggleSwitchButton element does not provide properties for setting the content of the control when the IsChecked property is null, similar to the CheckedContent and UncheckedContent.
With this in mind, this requirement can still be achieved by modifying the default control template to include an additional ContentPresenter for when the IsChecked property is null. Its visibility can be controlled via the ControlTemplate.Triggers.
The following code snippets show this suggestion's implementation:
<ControlTemplate x:Key="CustomToggleSwitchButtonTemplate" TargetType="telerik:RadToggleSwitchButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TrackWidth}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="UncheckedContent"
Grid.Column="2"
Margin="{TemplateBinding Padding}"
TextBlock.Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding UncheckedContent}"
ContentTemplate="{TemplateBinding UncheckedContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
RecognizesAccessKey="True"/>
<Grid Grid.Column="1" SnapsToDevicePixels="True" Height="{TemplateBinding TrackHeight}">
<Border x:Name="TrackBackground" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2" Opacity="0">
<Rectangle x:Name="TrackInnerBackground" Fill="{TemplateBinding Background}" Stroke="{StaticResource ToggleSwitchButton_TrackInnerBorder}" StrokeThickness="1"/>
</Border>
<Border x:Name="UncheckedTrackBackground" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2">
<Rectangle x:Name="UncheckedTrackInnerBackground"
Fill="{StaticResource ToggleSwitchButton_TrackBackground_Unchecked}"
Stroke="{StaticResource ToggleSwitchButton_TrackInnerBorder}"
StrokeThickness="1"/>
</Border>
<Border x:Name="PART_Thumb"
Width="{TemplateBinding ThumbWidth}"
Height="{TemplateBinding ThumbHeight}"
HorizontalAlignment="Left"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="1"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Border.RenderTransform>
<Grid>
<Rectangle x:Name="ThumbInnerRectangle" Fill="{StaticResource ControlBackground_Checked}" Stroke="{StaticResource ControlInnerBorder_Checked}" StrokeThickness="1"/>
<Path Stroke="{TemplateBinding Foreground}" Data="M0.5,0 L0.5,9 M2.5,0 L2.5,9 M4.5,0 L4.5,9" Width="6" Height="9"/>
</Grid>
</Border>
</Grid>
<ContentPresenter x:Name="CheckedContent"
Grid.Column="2"
Margin="{TemplateBinding Padding}"
TextBlock.Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding CheckedContent}"
ContentTemplate="{TemplateBinding CheckedContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"/>
<ContentPresenter x:Name="IndeterminateContent"
Grid.Column="2"
Margin="{TemplateBinding Padding}"
TextBlock.Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="PART_Thumb" Property="BorderBrush" Value="{StaticResource ControlOuterBorder_Normal}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Fill" Value="{StaticResource ControlBackground_Normal}"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="TrackBackground" Property="Opacity" Value="1"/>
<Setter TargetName="UncheckedTrackBackground" Property="Opacity" Value="0"/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter TargetName="PART_Thumb" Property="BorderBrush" Value="{StaticResource ControlOuterBorder_Normal}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Fill" Value="{StaticResource ControlBackground_Normal}"/>
<Setter TargetName="TrackBackground" Property="Opacity" Value="0"/>
<Setter TargetName="UncheckedTrackBackground" Property="Opacity" Value="1"/>
<Setter TargetName="IndeterminateContent" Property="Visibility" Value="Visible"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsKeyboardFocused" Value="True"/>
<Condition Property="IsEnabled" Value="True"/>
</MultiTrigger.Conditions>
<Setter TargetName="PART_Thumb" Property="BorderBrush" Value="{StaticResource ToggleSwitchButton_ThumbBorder_Focused}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Fill" Value="{StaticResource ControlBackground_Normal}"/>
</MultiTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Thumb" Property="BorderBrush" Value="{StaticResource ControlOuterBorder_MouseOver}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Fill" Value="{StaticResource ControlBackground_MouseOver}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="PART_Thumb" Property="BorderBrush" Value="{StaticResource ControlOuterBorder_Pressed}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Fill" Value="{StaticResource ControlBackground_Pressed}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="UncheckedContent" Property="Opacity" Value="0.3"/>
<Setter TargetName="CheckedContent" Property="Opacity" Value="0.3"/>
<Setter TargetName="PART_Thumb" Property="Opacity" Value="0.3"/>
<Setter TargetName="PART_Thumb" Property="BorderBrush" Value="{StaticResource ToggleSwitchButton_TrackBorder_Disabled}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Stroke" Value="{StaticResource ToggleSwitchButton_ThumbBackground_Disabled}"/>
<Setter TargetName="ThumbInnerRectangle" Property="Fill" Value="{StaticResource ToggleSwitchButton_ThumbBackground_Disabled}"/>
<Setter TargetName="TrackBackground" Property="BorderBrush" Value="{StaticResource ToggleSwitchButton_TrackBorder_Disabled}"/>
<Setter TargetName="TrackInnerBackground" Property="Stroke" Value="{StaticResource ToggleSwitchButton_ThumbBackground_Disabled}"/>
<Setter TargetName="TrackInnerBackground" Property="Fill" Value="{StaticResource ToggleSwitchButton_TrackBackground_Unchecked}"/>
<Setter TargetName="UncheckedTrackBackground" Property="BorderBrush" Value="{StaticResource ToggleSwitchButton_TrackBorder_Disabled}"/>
<Setter TargetName="UncheckedTrackInnerBackground" Property="Stroke" Value="{StaticResource ToggleSwitchButton_ThumbBackground_Disabled}"/>
<Setter TargetName="UncheckedTrackInnerBackground" Property="Fill" Value="{StaticResource ToggleSwitchButton_TrackBackground_Unchecked}"/>
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Value="True"/>
<Condition Value="True">
<Condition.Binding>
<MultiBinding Converter="{StaticResource MultiBindingBooleanOrConverter}" Mode="OneWay">
<Binding Path="ContentPosition" RelativeSource="{RelativeSource Self}" Mode="OneWay" Converter="{StaticResource EnumToBooleanConverter}" ConverterParameter="Left"/>
<Binding Path="ContentPosition" RelativeSource="{RelativeSource Self}" Mode="OneWay" Converter="{StaticResource EnumToBooleanConverter}" ConverterParameter="Right"/>
</MultiBinding>
</Condition.Binding>
</Condition>
</MultiDataTrigger.Conditions>
<Setter TargetName="UncheckedContent" Property="Visibility" Value="Hidden"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Value="False"/>
<Condition Value="True">
<Condition.Binding>
<MultiBinding Converter="{StaticResource MultiBindingBooleanOrConverter}" Mode="OneWay">
<Binding Path="ContentPosition" RelativeSource="{RelativeSource Self}" Mode="OneWay" Converter="{StaticResource EnumToBooleanConverter}" ConverterParameter="Left"/>
<Binding Path="ContentPosition" RelativeSource="{RelativeSource Self}" Mode="OneWay" Converter="{StaticResource EnumToBooleanConverter}" ConverterParameter="Right"/>
</MultiBinding>
</Condition.Binding>
</Condition>
</MultiDataTrigger.Conditions>
<Setter TargetName="CheckedContent" Property="Visibility" Value="Hidden"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" Value="{x:Null}"/>
<Condition Value="True">
<Condition.Binding>
<MultiBinding Converter="{StaticResource MultiBindingBooleanOrConverter}" Mode="OneWay">
<Binding Path="ContentPosition" RelativeSource="{RelativeSource Self}" Mode="OneWay" Converter="{StaticResource EnumToBooleanConverter}" ConverterParameter="Left"/>
<Binding Path="ContentPosition" RelativeSource="{RelativeSource Self}" Mode="OneWay" Converter="{StaticResource EnumToBooleanConverter}" ConverterParameter="Right"/>
</MultiBinding>
</Condition.Binding>
</Condition>
</MultiDataTrigger.Conditions>
<Setter TargetName="CheckedContent" Property="Visibility" Value="Hidden"/>
<Setter TargetName="UncheckedContent" Property="Visibility" Value="Hidden"/>
</MultiDataTrigger>
<Trigger Property="ContentPosition" Value="Left">
<Setter TargetName="CheckedContent" Property="Grid.Column" Value="0"/>
<Setter TargetName="UncheckedContent" Property="Grid.Column" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Right"/>
</Trigger>
<Trigger Property="ContentPosition" Value="Both">
<Setter TargetName="UncheckedContent" Property="Grid.Column" Value="0"/>
<Setter TargetName="CheckedContent" Property="Grid.Column" Value="2"/>
<Setter TargetName="CheckedContent" Property="HorizontalAlignment" Value="Right"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<telerik:RadToggleSwitchButton IsThreeState="True"
Width="200">
<telerik:RadToggleSwitchButton.Style>
<Style TargetType="telerik:RadToggleSwitchButton">
<Setter Property="CheckedContent" Value="Checked"/>
<Setter Property="UncheckedContent" Value="Unchecked"/>
<Setter Property="Template" Value="{StaticResource CustomToggleSwitchButtonTemplate}"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Content" Value="Indeterminate"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="Red"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</telerik:RadToggleSwitchButton.Style>
</telerik:RadToggleSwitchButton>
The following GIF shows the produced result:
I have attached a sample project for you to test.
Regards,
Stenly
Progress Telerik
A brand new ThemeBuilder course was just added to the Virtual Classroom. The training course was designed to help you get started with ThemeBuilder for styling Telerik and Kendo UI components for your applications. You can check it out at https://learn.telerik.com