This is a migrated thread and some comments may be shown as answers.

Custom Checkbox

1 Answer 57 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Marcin
Top achievements
Rank 1
Marcin asked on 10 May 2011, 08:37 AM
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

1 Answer, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 12 May 2011, 05:51 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
TreeView
Asked by
Marcin
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Share this question
or