GroupBar and GroupViewItem items

[Yazan Diranieh]

Is it posible for a GroupViewItem to display a CheckBox? If not what is the alternative in addition to placing CheckBox elements with a StackPanel? I'd like to combine GroupViewItem items and CheckBox(es)

Thanks

[Fathima Shalini P]

Hi Yazan,

Thank you for your interest in Syncfusion Products.

Currently it is not possible to add checkbox into Groupview as a GroupViewItem. But we can add Panel or XPTaskBar instead of GroupView and can add controls in it. Please find the simple sample that illustrates this in the following link:

http://websamples.syncfusion.com/samples/Tools.Windows/F73418/main.htm

Please let me know if any concerns.

Regards,
Fathima

[Yazan Diranieh]

Thank you.

However I'm also looking for ability to add both, i.e., user GroupViewItem items and panels with check boxes under the same GroupView.

If not possible, can I use ControlTemplate to change the visual tree of GroupViewItem? For example, GroupViewItem seems to be based on TextImageControl. Can I use Style and ControlTemplate to base GroupViewItem on CheckBox instead? A sample would be great.

Thanks

[Administrator]

Hi Yazan,

Thanks for the interest in Syncfusion WPF.

We can create a custom GroupViewItem with an additional attached property and include a CheckBox. Please refer the following code snippet that shows how we can create a template to include a CheckBox in GroupViewItem.

<ResourceDictionary>
...
...
 <ControlTemplate x:Key="GroupViewItemTemplateKey" TargetType="{x:Type local:CustomGroupViewItem}">
            <Border Name="MainGrid"
				Background="{TemplateBinding Background}"
				ClipToBounds="True"
				SnapsToDevicePixels="True"
                  BorderThickness="1"
				Cursor="{Binding Path=GroupViewItemCursor, RelativeSource={RelativeSource AncestorType={x:Type sync:GroupView}}}">
                <DockPanel Name="ContentHost"
					   Width="{Binding Path=InternalContentLength, RelativeSource={RelativeSource AncestorType={x:Type sync:GroupView}}}"
					   HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type sync:GroupView}}}">
                    <Border Name="ImageHost"
						DockPanel.Dock="Left"
						Width="Auto"
						Height="Auto"
						HorizontalAlignment="Left"
						Background="Transparent">
                    </Border>
                    <Border Name="TextHost"
						DockPanel.Dock="Top"
						Padding="3,2,3,2"
						HorizontalAlignment="{Binding Path=TextAlignment, RelativeSource={RelativeSource AncestorType={x:Type sync:GroupView}}}">
                        <StackPanel>
                               <TextBlock Name="Text" Visibility="Collapsed"
								   TextTrimming="CharacterEllipsis"
								   Text="{Binding Path=Text, RelativeSource={RelativeSource AncestorType={x:Type local:CustomGroupViewItem}}}"/>
                                <TextBox Name="TextEditor"
								 Visibility="Collapsed" Text="{Binding Path=Text, RelativeSource={RelativeSource AncestorType={x:Type local:CustomGroupViewItem}}}"
								 Background="{TemplateBinding Background}"/>
                                <ContentPresenter ContentSource="ContentObject"/>
                            </StackPanel>
                    </Border>
                </DockPanel>
            </Border>
            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=IsShowText, RelativeSource={RelativeSource AncestorType={x:Type sync:GroupView}}}" Value="False">
                    <Setter TargetName="TextHost" Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition SourceName="MainGrid" Property="IsMouseOver" Value="True"/>
                        <Condition Property="IsSelected" Value="False"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Background">
                        <Setter.Value>
                            <SolidColorBrush Color="{Binding Path=MouseHoverColor, RelativeSource={RelativeSource AncestorType={x:Type local:CustomGroupViewItem}}}"/>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="MainGrid" Property="BorderBrush" Value="Blue"/>
                </MultiTrigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <SolidColorBrush Color="{Binding Path=MouseDownColor, RelativeSource={RelativeSource AncestorType={x:Type local:CustomGroupViewItem}}}"/>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="MainGrid" Property="BorderBrush" Value="Gray"/>
                </Trigger>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <SolidColorBrush Color="{Binding Path=SelectedItemColor, RelativeSource={RelativeSource AncestorType={x:Type local:CustomGroupViewItem}}}"/>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="MainGrid" Property="BorderBrush" Value="Blue"/>
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition SourceName="MainGrid" Property="IsMouseOver" Value="True"/>
                        <Condition Property="IsSelected" Value="True"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Background">
                        <Setter.Value>
                            <SolidColorBrush Color="{Binding Path=SelectedItemMouseHoverColor, RelativeSource={RelativeSource AncestorType={x:Type local:CustomGroupViewItem}}}"/>
                        </Setter.Value>
                    </Setter>
                    <Setter TargetName="MainGrid" Property="BorderBrush" Value="Gray"/>
                </MultiTrigger>
                <Trigger Property="IsDragging" Value="True">
                    <Setter Property="Background" Value="Gray"/>
                    <Setter TargetName="MainGrid" Property="BorderBrush" Value="Gray"/>
                </Trigger>
                <DataTrigger Binding="{Binding Path=(sync:GroupView.IsListViewMode), RelativeSource={RelativeSource AncestorType={x:Type sync:GroupView}}}"
						 Value="False">
                    <Setter TargetName="ContentHost" Property="Width" Value="{Binding Path=Width}" />
                </DataTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
...
...
</ResourceDictionary>
...
...
           <sync:GroupBar>
...
...
               <local:CustomGroupViewItem Template="{StaticResource GroupViewItemTemplateKey}" ToolTip="CheckBox">
                                    <local:CustomGroupViewItem.ContentObject>
                                        <CheckBox Content="Test CheckBox" />
                                    </local:CustomGroupViewItem.ContentObject>
                                </local:CustomGroupViewItem>
...
...
               </sync:GroupBar>

Please refer the sample in the below link that illustrates the above.

http://websamples.syncfusion.com/samples/WPF/73418_/main.htm

Please let me know if this is not what you needed.

Regards,
Asem.