Custom Checkbox

2 posts, 0 answers
  1. Marcin
    Marcin avatar
    15 posts
    Member since:
    Apr 2011

    Posted 10 May 2011 Link to this post

    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
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 12 May 2011 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top