GroupDropArea horizontal scroll

[Sandra Reunion]

Hi all,

I'm trying to change the GroupDropArea sty to add an Horizontal scroll but I don'tfound any solution.

When the items added in the GroupDropArea, if there are a lot of items don't appear an orizontal scroll and the items can't be visible.

Image:

How can I add an horizontal scrooll to view all itmes in GroupDropAre?

Tnx.

[Jai Ganesh S]

Hi Sandra, 

 

You can achieve your requirement to enable the ScrollViewer to show the all items in GropDropArea by edit the default style of the GroupDropArea like below, 

 

<Style TargetType="{x:Type syncfusion:GroupDropArea}"> 

        <Setter Property="Background" Value="White" /> 

        <Setter Property="Foreground" Value="Gray" /> 

        <Setter Property="BorderBrush" Value="Gray" /> 

        <Setter Property="BorderThickness" Value="1,1,1,0" /> 

        <Setter Property="Focusable" Value="False" /> 

        <Setter Property="IsTabStop" Value="False" /> 

 

        <Setter Property="ScrollViewer.Visibility" Value="Visible"/> 

        <Setter Property="Template"> 

            <Setter.Value> 

 

                <ControlTemplate TargetType="{x:Type syncfusion:GroupDropArea}"> 

                    <Border BorderBrush="{TemplateBinding BorderBrush}" 

                            BorderThickness="{TemplateBinding BorderThickness}" 

                            SnapsToDevicePixels="True"> 

                        ------ 

                        <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 Grid.Row="0" 

                                          Grid.Column="1" 

                                          Width="45" 

                                          Height="12" 

                                          Margin="2" 

                                          Background="Transparent" 

                                          IsChecked="{Binding Path=IsExpanded, 

                                                              RelativeSource={RelativeSource TemplatedParent}, 

                                                              Mode=TwoWay}" 

                                          IsTabStop="False" 

                                          IsThreeState="False"   

                                          SnapsToDevicePixels="True" 

                                          Style="{StaticResource ToggleButtonStyle}" /> 

 

                            <ScrollViewer x:Name="PART_ScrollViewer" 

                                          CanContentScroll="True"  

                                          FlowDirection="{TemplateBinding FlowDirection}" 

                                          VerticalScrollBarVisibility="Hidden" 

                                          IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" 

                                          IsTabStop="False"                                           

                                          PanningMode="{TemplateBinding ScrollViewer.PanningMode}" 

                                          PanningRatio="{TemplateBinding ScrollViewer.PanningRatio}" 

                                          > 

                               <ScrollViewer.Style> 

                                    <Style TargetType="{x:Type ScrollViewer}"> 

                                        <Style.Triggers> 

                                            <DataTrigger Binding="{Binding Path=IsExpanded,RelativeSource={RelativeSource TemplatedParent}}"  Value="False"> 

                                                <Setter Property="HorizontalScrollBarVisibility" Value="Hidden" /> 

                                            </DataTrigger> 

                                            <DataTrigger  Binding="{Binding Path=IsExpanded,RelativeSource={RelativeSource TemplatedParent}}"  Value="True"> 

                                                <Setter Property="HorizontalScrollBarVisibility" Value="Visible" /> 

                                            </DataTrigger> 

                                        </Style.Triggers> 

 

                                    </Style> 

                                </ScrollViewer.Style> 

 

                                <Border Name="PART_GroupDropAreaBorder" 

                                    Grid.Row="1" 

                                    Grid.Column="0" 

                                    Grid.ColumnSpan="1" 

                                    Height="0" 

                                    SnapsToDevicePixels="True"> 

 

 

---- 

 

                                </Border> 

                            </ScrollViewer> 

                        </Grid> 

                    </Border> 

                </ControlTemplate> 

 

            </Setter.Value> 

        </Setter> 

    </Style> 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGridDemo1620581470.zip 

 

Regards, 

Jai Ganesh S