Custom Checkbox

[Marcin]

Hi! I am testind yours RadTreeView Control and i have a big problem. I want to use TriState tree and i have my global checkbox style.
Global style for checkbox is:

<RadialGradientBrush x:Key="HoverBrush">
       <RadialGradientBrush.RelativeTransform>
           <TransformGroup>
               <ScaleTransform CenterX="0.5"
                       CenterY="0.3"
                       ScaleX="1.804"
                       ScaleY="0.743" />
               <SkewTransform CenterX="0.5"
                      CenterY="0.5" />
               <RotateTransform CenterX="0.5"
                        CenterY="0.5" />
               <TranslateTransform Y="0.47999998927116394" />
           </TransformGroup>
       </RadialGradientBrush.RelativeTransform>
       <GradientStop Color="#FFFCE312"
                 Offset="0.209" />
       <GradientStop Color="#00FFFF00"
                 Offset="1" />
       <GradientStop Color="#FFFFFFFF"
                 Offset="0" />
   </RadialGradientBrush>
   <LinearGradientBrush x:Key="CheckIconBrush"
                      EndPoint="0.5,1"
                      StartPoint="0.5,0">
       <GradientStop Color="White" />
       <GradientStop Color="White"
                 Offset="1" />
   </LinearGradientBrush>
   <Style TargetType="{x:Type CheckBox}">
       <Setter Property="SnapsToDevicePixels" Value="true"/>
       <Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}"/>
       <Setter Property="Background" Value="{DynamicResource ElementBackground}"/>
       <Setter Property="BorderBrush" Value="{DynamicResource ElementBorder}"/>
       <Setter Property="Template" Value="{DynamicResource CheckBoxTemplate}" />
       <Setter Property="Foreground" Value="{DynamicResource TextBrush}"/>
       <Style.Triggers>
           <Trigger Property="IsEnabled" Value="False">
               <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
           </Trigger>
       </Style.Triggers>
   </Style>
   <ControlTemplate x:Key="CheckBoxTemplate" TargetType="{x:Type CheckBox}">
       <ControlTemplate.Resources>
           <Storyboard x:Key="CheckedFalse">
               <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
                   <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/>
               </DoubleAnimationUsingKeyFrames>
           </Storyboard>
           <Storyboard x:Key="CheckedTrue">
               <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
                   <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
               </DoubleAnimationUsingKeyFrames>
           </Storyboard>
           <Storyboard x:Key="ThreeStateOn">
               <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="IndeterminateIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
                   <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
               </DoubleAnimationUsingKeyFrames>
           </Storyboard>
           <Storyboard x:Key="ThreeStateOff">
               <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="IndeterminateIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
                   <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
               </DoubleAnimationUsingKeyFrames>
           </Storyboard>
           <Storyboard x:Key="HoverOn">
               <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="(UIElement.Opacity)">
                   <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
               </DoubleAnimationUsingKeyFrames>
           </Storyboard>
           <Storyboard x:Key="HoverOff">
               <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="(UIElement.Opacity)">
                   <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
               </DoubleAnimationUsingKeyFrames>
           </Storyboard>
           <Storyboard x:Key="PressedOn">
               <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Background" Storyboard.TargetProperty="(UIElement.Opacity)">
                   <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.6"/>
               </DoubleAnimationUsingKeyFrames>
           </Storyboard>
           <Storyboard x:Key="PressedOff">
               <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Background" Storyboard.TargetProperty="(UIElement.Opacity)">
                   <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
               </DoubleAnimationUsingKeyFrames>
           </Storyboard>
       </ControlTemplate.Resources>
       <BulletDecorator Background="Transparent">
           <BulletDecorator.Bullet>
               <Grid Width="16" Height="16">
                   <Rectangle Height="14" Margin="0" x:Name="Background" Width="14" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" RadiusX="1" RadiusY="1"/>
                   <Rectangle Height="12" x:Name="BackgroundOverlay" Width="12" Opacity="0" Fill="{DynamicResource ElementBackgroundWhenMouseOver}" Stroke="{x:Null}" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
                   <Path x:Name="CheckIcon" Opacity="0" Stretch="Fill" Data="M102.03442,598.79645 L105.22962,597.78918 L106.95686,599.19977 C106.95686,599.19977 113.77958,590.53656 113.77958,590.53656 C113.77958,590.53656 107.40649,603.79431 107.40649,603.79431 z" Fill="#FF000000"
                   Height="10"
                   Width="10"
                   Stroke="{StaticResource CheckIconBrush}"
                   StrokeThickness="0"/>
                   <Rectangle Margin="0,0,0,0" Height="4" VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="IndeterminateIcon" Width="8" Opacity="0" Fill="{DynamicResource ElementBorder}"  RadiusX="1" RadiusY="1"/>
                   <Rectangle Height="14" x:Name="DisabledVisualElement" Width="14" Opacity="0" Fill="{StaticResource DisabledBackgroundBrush}" RadiusX="1" RadiusY="1"/>
                   <Rectangle Height="16" x:Name="ContentFocusVisualElement" Width="16" IsHitTestVisible="false" Opacity="0" Stroke="{StaticResource HoverBrush}" StrokeThickness="1" RadiusX="2" RadiusY="2"/>
               </Grid>
           </BulletDecorator.Bullet>
           <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
       </BulletDecorator>
       <ControlTemplate.Triggers>
           <MultiTrigger>
               <MultiTrigger.Conditions>
                   <Condition Property="IsChecked" Value="True" />
                   <Condition Property="IsThreeState" Value="True" />
               </MultiTrigger.Conditions>
               <MultiTrigger.EnterActions>
                   <BeginStoryboard x:Name="ThreeStateOn_BeginStoryboard" Storyboard="{StaticResource CheckedFalse}" />
               </MultiTrigger.EnterActions>
               <MultiTrigger.ExitActions>
                   <BeginStoryboard x:Name="ThreeStateOff_BeginStoryboard" Storyboard="{StaticResource CheckedTrue}" />
               </MultiTrigger.ExitActions>
           </MultiTrigger>
           <MultiTrigger>
               <MultiTrigger.Conditions>
                   <Condition Property="IsChecked" Value="{x:Null}" />
                   <Condition Property="IsThreeState" Value="True" />
               </MultiTrigger.Conditions>
               <MultiTrigger.EnterActions>
                   <BeginStoryboard x:Name="ThreeStateOn1_BeginStoryboard" Storyboard="{StaticResource ThreeStateOn}" />
               </MultiTrigger.EnterActions>
               <MultiTrigger.ExitActions>
                   <BeginStoryboard x:Name="ThreeStateOff1_BeginStoryboard" Storyboard="{StaticResource ThreeStateOff}" />
               </MultiTrigger.ExitActions>

               <Setter Property="Visibility" TargetName="CheckIcon" Value="Hidden"/>
           </MultiTrigger>
           <Trigger Property="IsChecked" Value="True">
               <Trigger.ExitActions>
                   <BeginStoryboard Storyboard="{StaticResource CheckedFalse}" x:Name="CheckedTrue_BeginStoryboard"/>
               </Trigger.ExitActions>
               <Trigger.EnterActions>
                   <BeginStoryboard x:Name="CheckedTrue_BeginStoryboard1" Storyboard="{StaticResource CheckedTrue}"/>
               </Trigger.EnterActions>
           </Trigger>
           <Trigger Property="IsMouseOver" Value="true">
               <Trigger.EnterActions>
                   <BeginStoryboard Storyboard="{StaticResource HoverOn}"/>
               </Trigger.EnterActions>
               <Trigger.ExitActions>
                   <BeginStoryboard Storyboard="{StaticResource HoverOff}"/>
               </Trigger.ExitActions>
           </Trigger>
           <Trigger Property="IsPressed" Value="true">
               <Trigger.EnterActions>
                   <BeginStoryboard Storyboard="{StaticResource PressedOn}"/>
               </Trigger.EnterActions>
               <Trigger.ExitActions>
                   <BeginStoryboard Storyboard="{StaticResource PressedOff}"/>
               </Trigger.ExitActions>
           </Trigger>
           <Trigger Property="IsEnabled" Value="false">
               <Setter Property="Fill" TargetName="Background" Value="{DynamicResource DisabledBackgroundBrush}"/>
               <Setter Property="Stroke" TargetName="Background" Value="{DynamicResource DisabledBorderBrush}"/>
           </Trigger>
       </ControlTemplate.Triggers>
   </ControlTemplate>

The problem is that on default my checkboxes dont have IsThreeState property set to true. When i add simple RadTreeView i can see my style in checkboxes BUT indetermine state doesnt work. I can see onl;y checked or unchecked checkboxes If i hardcode property
<Setter Property="IsThreeState" Value="True">
All works fine but in this case i have problem with RadGridView because in filter i have tri state checkboxes.
Sample Rad tree:

<telerik:RadTreeView Grid.Row="1" SelectionMode="Single" IsLineEnabled="True"
                IsEditable="True" IsDragDropEnabled="True"
                ItemsOptionListType="CheckList" IsOptionElementsEnabled="True"
                IsRootLinesEnabled="True"  VerticalAlignment="Top" Margin="10"
                x:Name="TicketClassRadTreeView" IsTriStateMode="True" ContextMenu="{StaticResource ContextMenuTicketClass}"
                             >
            <telerik:RadTreeViewItem DropPosition="Inside" Header="Root" >
                <telerik:RadTreeViewItem DropPosition="Inside" Header="Oprogramowanie" >
                    <telerik:RadTreeViewItem DropPosition="Inside" Header="Obszar funkcjonalny"/>
                    <telerik:RadTreeViewItem DropPosition="Inside" Header="Obszar funkcjonalny1">
                        <telerik:RadTreeViewItem DropPosition="Inside" Header="Abc"/>
                    </telerik:RadTreeViewItem>
                </telerik:RadTreeViewItem>
                <telerik:RadTreeViewItem DropPosition="Inside" Header="Sprzęt" >
                </telerik:RadTreeViewItem>
            </telerik:RadTreeViewItem>
        </telerik:RadTreeView>

Thanks for help

[Petar Mladenov]

Hello Marcin,

You can try to re-factor your checking logic in the global style with using a triggers with Property:CheckState ( that have 3 possible ToggleState values(On/Off/Indeterminate)) instead of IsChecked. Please let us know if this is suitable for you.

All the best,
Petar Mladenov
the Telerik team