Category / Section
How to add controls like TextBox in GroupDropArea in WinRT DataGrid?
1 min read
In SfDataGrid, you can customize the GroupDropArea appearance like adding or replacing any control inside it by customizing its template.
By customizing the GroupDropArea template, a TextBox control is added inside the GroupDropArea. By using the GroupDropArea toggle button, you can expand and collapse the GroupDropArea as well as the TextBox.
Refer to the following code example.
XAML
<Page.Resources>
<ResourceDictionary>
<!--Merging the dictionary for resources that is required for customizing this template-->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:/Syncfusion.SfGrid.WinRT/Control/GroupDropArea/Themes/Generic.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="syncfusion:GroupDropArea">
<Setter Property="Background" Value="{StaticResource AppBarItemBackgroundThemeBrush}" />
<Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrush}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MaxHeight" Value="85" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="1,1,1,0" />
<Setter Property="Template">
<!--ControlTemplate for GroupDropArea-->
<Setter.Value>
<ControlTemplate TargetType="syncfusion:GroupDropArea">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<!--Animation for Expanded and collapsed Visual States-->
<VisualStateGroup x:Name="ExpansionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<!--Collapsed Visual State Transition-->
<VisualState x:Name="Collapsed">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="PART_GroupDropAreaBorder"
Storyboard.TargetProperty="(FrameworkElement.Margin)">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0,0,0,0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
Storyboard.TargetName="PART_GroupDropAreaBorder"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
Storyboard.TargetName="PART_TextBox"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!--Expanded Visual State Transition-->
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="PART_GroupDropAreaBorder"
Storyboard.TargetProperty="(FrameworkElement.Margin)">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0,0,0,20</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
Storyboard.TargetName="PART_GroupDropAreaBorder"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="40">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
Storyboard.TargetName="TextBox"
Storyboard.TargetProperty="(FrameworkElement.Height)">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="30">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition x:Name="rd0" Height="Auto" />
<RowDefinition x:Name="rd1" Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="cd0" Width="*" />
<ColumnDefinition x:Name="cd1" Width="Auto" />
</Grid.ColumnDefinitions>
<!--ToggleButton-->
<ToggleButton Grid.Row="0"
Grid.Column="1"
Width="45"
Height="20"
Margin="100,2,2,2"
Background="Transparent"
IsChecked="{Binding Path=IsExpanded,
RelativeSource={RelativeSource TemplatedParent},
Mode=TwoWay}"
IsThreeState="False"
Style="{StaticResource ToggleButtonStyle}" />
<Grid x:Name="TextBox" Grid.Row="1" Grid.Column="1" Margin="15,0,0,0">
<!--TextBox-->
<TextBox x:Name="PART_TextBox" Height="30" Width="120"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
BorderBrush="#FF727272"
BorderThickness="1"
Padding="12,4,0,0"
Style="{StaticResource searchTextBoxStyle}" />
</Grid>
<Border Name="PART_GroupDropAreaBorder"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="1"
Height="0">
<!--GroupDropAreaGrid and GroupDropArea Items Panel-->
<Grid x:Name="PART_GroupDropAreaGrid"
MaxHeight="40"
Margin="40,0,0,0">
<Grid HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Opacity="0.5"
Visibility="{TemplateBinding WatermarkTextVisibility}">
<Rectangle RadiusX="5"
RadiusY="5"
Stroke="{TemplateBinding Foreground}"
StrokeDashArray="5,5"
StrokeThickness="1" />
<TextBlock Margin="40,10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="18"
Foreground="{TemplateBinding Foreground}"
Text="{TemplateBinding GroupDropAreaText}" />
</Grid>
<StackPanel Name="PART_StackPanel"
MaxHeight="40"
Orientation="Horizontal">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition />
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Page.Resources>
The following screenshot displays the TextBox control without grouping in GroupDropArea.
The following screenshot displays the TextBox control with Grouping in GroupDropArea.
You can refer to the sample from the following location to customize the style for GroupDropArea.
Sample: CustomizeGroupDropArea_WRT
