The article describes how to perform WPF Chart zooming within the scroll viewer using the mouse wheel. To enable zooming through the mouse wheel, set the EnableMouseWheelZooming property of ChartZoomPanBehavior to true. The default behavior is that when the chart is placed inside the scroll viewer, it scrolls up or down instead of zooming in or out. By limiting the scrolling action to the scroll viewer, we can zoom in or out of the chart without any unintended interactions.The scrolling action inside the scroll viewer has been restricted according to the following code samples: [C#] public class ScrollViewerExt: ScrollViewer { protected override void OnMouseWheel(MouseWheelEventArgs e) { // To restrict scroll action on chart if (e.Source is SfChart) return; base.OnMouseWheel(e); } } [XAML] <local:ScrollViewerExt VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Hidden" > <StackPanel> <chart:SfChart x:Name="chart"> . . . <chart:SfChart.Behaviors > <chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" /> </chart:SfChart.Behaviors> . . . </chart:SfChart> <chart:SfChart x:Name="chart1"> . . . <chart:SfChart.Behaviors > <chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" /> </chart:SfChart.Behaviors> . . . </chart:SfChart> <chart:SfChart x:Name="chart2"> . . . <chart:SfChart.Behaviors > <chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" /> </chart:SfChart.Behaviors> . . . </chart:SfChart> </StackPanel> </local:ScrollViewerExt> Download the complete sample on GitHub. Refer also to: How to improve performance while zooming by using scrollbar in WPF Chart (SfChart)? How to display the visible range of labels while zooming in WPF Chart (SfChart)? How to reset zooming in WPF Chart (SfChart)? Conclusion I hope you enjoyed learning about how to zoom in and out of a WPF Chart in the scroll viewer. You can refer to our WPF Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to present and manipulate data. For current customers, you can check out our WPF components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WPF Chart and other WPF components. If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
SfChat does not have any direct support for showing the scrollbar in view. However, it can be achieved by setting the value as true to IsScollBarVisible property of ChatListView in SfChat. XAML Define the behavior for the SfChat. <sfChat:SfChat x:Name="sfChat" Messages="{Binding Messages}" CurrentUser="{Binding CurrentUser}" ShowIncomingMessageAvatar="True" ShowOutgoingMessageAvatar="True"> <sfChat:SfChat.Behaviors> <local:SfchatBehaviors/> </sfChat:SfChat.Behaviors> </sfChat:SfChat> C# Set the IsScrollBarVisible property value to true in the ChatListView Loaded event. public class SfchatBehaviors : Behavior<SfChat> { private SfChat sfChat = null; private SfListView ChatListView = null; protected override void OnAttachedTo(SfChat bindable) { base.OnAttachedTo(bindable); sfChat = bindable; if (sfChat != null) { ChatListView = (sfChat.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("ChatListView")).GetValue(sfChat) as SfListView); if (ChatListView != null) { ChatListView.IsScrollBarVisible = true; } } } protected override void OnDetachingFrom(SfChat bindable) { base.OnAttachedTo(bindable); ChatListView = null; sfChat = null; } } View sample on GitHub Take a moment to pursue the documentation, where you can find more about SfChat with code examples
SfCartesianChart has support to lazily load and display data. You can load a certain amount of data initially to the chart and then load more data lazily. When horizontal scrolling reaches the start or end of the chart, the loadMoreIndicatorBuilder is called. Using this, you can return any widget to be shown on the chart while loading more data. For more information, refer to this help document. The following steps explain how to add data points dynamically to the chart while dragging the chart towards the end. Step 1: Declare the series controller, data source, zoom pan behavior, global key, and other required variables as shown in the following code sample. ChartSeriesController? seriesController; late List<ChartSampleData> chartData late List<ChartSampleData> chartData late bool isLoadMoreView, isNeedToUpdateView, isDataUpdated; double? oldAxisVisibleMin, oldAxisVisibleMax; late ZoomPanBehavior _zoomPanBehavior; late GlobalKey<State> globalKey; Step 2: Define the _initializeVaraible method, which will be executed in the initState. Here, we have defined the initial data, Boolean variables, and zoom pan behavior of the chart. void _initializeVariables() { // Initial data source of the chart chartData = <ChartSampleData>[ ChartSampleData(xValue: 0, y: 326), ChartSampleData(xValue: 1, y: 416), ChartSampleData(xValue: 2, y: 290), ChartSampleData(xValue: 3, y: 70), ChartSampleData(xValue: 4, y: 500), ChartSampleData(xValue: 5, y: 416), ChartSampleData(xValue: 6, y: 290), ChartSampleData(xValue: 7, y: 120), ChartSampleData(xValue: 8, y: 500), ]; isLoadMoreView = false; isNeedToUpdateView = false; isDataUpdated = true; // Key which uses to access the chart state. globalKey = GlobalKey<State>(); // Enabling panning in the chart. _zoomPanBehavior = ZoomPanBehavior( enablePanning: true, ); } Step 3: In the onActualRangeChanged callback, set the visibleMinimum and visibleMaximum values with the old visible minimum and maximum values respectively to display the data with the old viewport even after the new data loaded to the chart until we swipe it manually. onActualRangeChanged: (ActualRangeChangedArgs args) { if (args.orientation == AxisOrientation.horizontal) { // Assigning the old visible min and max after loads the data. if (isLoadMoreView) { args.visibleMin = oldAxisVisibleMin; args.visibleMax = oldAxisVisibleMax; } // Asigning current visible min and max to old visible min and max. oldAxisVisibleMin = args.visibleMin; oldAxisVisibleMax = args.visibleMax; } isLoadMoreView = false; }, Step 4: Assign the buildloadMoreIndicatorView method to the loadMoreIndicatorBuilder in the chart. SfCartesianChart( loadMoreIndicatorBuilder: (BuildContext context, ChartSwipeDirection direction) => buildloadMoreIndicatorView (context, direction), ) Step 5: Define the buildloadMoreIndicatorView method as shown in the following code sample. Widget buildloadMoreIndicatorView( BuildContext context, ChartSwipeDirection direction) { // To know whether reaches the end of the chart if (direction == ChartSwipeDirection.end) { isNeedToUpdateView = true; globalKey = GlobalKey<State>(); return StatefulBuilder( key: globalKey, builder: (BuildContext context, StateSetter stateSetter) { Widget widget; // To add new data after reached the end and returns loading indicator until chart gets rendered if (isNeedToUpdateView) { // Assigning loading widget above the chart to display widget = getProgressIndicator(); // Redrawing the chart _updateView(); isDataUpdated = true; } else { widget = Container(); } return widget; }); } else { return SizedBox.fromSize(size: Size.zero); } } In this method, you can return the stateful builder with the CircularProgressIndicator until the data gets loaded and update the loaded data to the chart. Step 6: Define the _updateView method, which redraws the chart with refreshed data by calling the chart state and _updateData method, which updates the new data to the chart. //Adding new data to the chart. void _updateData() { for (int i = 0; i < 4; i++) { chartData.add(ChartSampleData( xValue: chartData[chartData.length - 1].xValue + 1, y: getRandomInt(0, 600))); } isLoadMoreView = true; seriesController?.updateDataSource(addedDataIndexes: getIndexes(4)); } // Redrawing the chart with updated data by calling the chart state. Future<void> _updateView() async { await Future<void>.delayed(const Duration(seconds: 1), () { isNeedToUpdateView = false; if (isDataUpdated) { _updateData(); isDataUpdated = false; } if (globalKey.currentState != null) { (globalKey.currentState as dynamic).setState(() {}); } }); } Thus, the infinite scrolling is achieved by dynamically adding the data while dragging the chart towards the end using the SfCartesianchart widget. View the Github Sample here. ConclusionI hope you enjoyed learning about how to lazily load more data to the chart.You can refer to our Flutter Cartesian Chart feature tour page to learn about its other groundbreaking feature representations,documentation and how to quickly get started for configuration specifications. You can also explore our Flutter Cartesian Chart example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
WPF TreeView (SfTreeView), doesn’t have any direct property to change the width of the vertical scrollbar. However, you can change it by increasing the width of the ScrollViewer in the SfTreeView template by creating Style with TargetType as SfTreeView. <Window.Resources> <DataTemplate x:Key="endExpanderTemplate"> <Grid x:Name="grid" Width="{TemplateBinding Width}" Background="Transparent" > <Path x:Name="PART_CollapseCellPath" Width="6.061" Height="8.706" Data="M5.6040074,0 L6.2710001,0.74499984 1.5000009,5.0119996 6.2529947,9.2629985 5.5860021,10.007999 0,5.0119996 z" Stretch="Uniform" Fill="#6D6D6D" /> <Path x:Name="PART_ExpanderCellPath" Width="8.706" Height="6.061" Data="M0.74499548,0 L5.0119957,4.7700001 9.2630047,0.017000169 10.008001,0.68400005 5.0119957,6.2700001 0,0.66699985 z" Stretch="Uniform" Fill="#6D6D6D"/> </Grid> <DataTemplate.Triggers> <DataTrigger Binding="{Binding IsExpanded}" Value="True"> <Setter Property="Visibility" TargetName="PART_ExpanderCellPath" Value="Visible"/> <Setter Property="Visibility" TargetName="PART_CollapseCellPath" Value="Collapsed"/> </DataTrigger> <DataTrigger Binding="{Binding IsExpanded}" Value="False"> <Setter Property="Visibility" TargetName="PART_ExpanderCellPath" Value="Collapsed"/> <Setter Property="Visibility" TargetName="PART_CollapseCellPath" Value="Visible"/> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> <Style TargetType="syncfusion:SfTreeView" x:Key="SfTreeViewStyle_ScrollBarWidth"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="syncfusion:SfTreeView"> <Grid Background="{TemplateBinding Background}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"> <ScrollViewer x:Name="PART_ScrollViewer" Background="Transparent" CanContentScroll="True" IsTabStop="False" FlowDirection="{TemplateBinding FlowDirection}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" PanningMode="{TemplateBinding ScrollViewer.PanningMode}" PanningRatio="{TemplateBinding ScrollViewer.PanningRatio}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"> <syncfusion:TreeNodeContainer x:Name="PART_TreeNodeContainer" HorizontalAlignment="Left" Background="Transparent"/> <ScrollViewer.Resources> <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">50</sys:Double> </ScrollViewer.Resources> </ScrollViewer> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="ExpanderPosition" Value="End"> <Setter Property="ExpanderTemplate" Value="{StaticResource endExpanderTemplate}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> Take a moment to peruse the documentation, where you can find about styling in SfTreeView, with code examples. You can download the example from GitHub Conclusion I hope you enjoyed learning about how to change the width of the vertical scrollbar in WPF TreeView (SfTreeView).You can refer to our WPF TreeView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-trac, or feedback portal. We are always happy to assist you!
WPF DataGrid (SfDataGrid) does not provide the direct support to disable the Scrollbar at FilterPopup in CheckboxFilterControl. You can disable the Scrollbar at FilterPopup by overriding the CheckboxFilterControl Template and change the HorizontalScrollBarVisibility and VerticalScrollBarVisibility property as Hidden or Disabled in ScrollViewer of PART_ItemsControl Template in SfDataGrid. <Style TargetType="syncfusion:CheckboxFilterControl"> <Setter Property="ItemTemplate" Value="{StaticResource CheckboxFilterControlItemTemplate}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="syncfusion:CheckboxFilterControl"> <Grid Height="{TemplateBinding Height}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="30" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Border Grid.Column="0" Width="19" Height="19" Margin="4,39,4,4" VerticalAlignment="Top" BorderBrush="#FFB2B2B2" BorderThickness="1,1,1,1" Visibility="{Binding FilteredFrom, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type syncfusion:GridFilterControl}}, Converter={StaticResource filteredFromCheckVisibilityConverter}}"> <Path x:Name="PART_FilteredFromCheck1" Width="15" Height="15" Data="M 12.4227,0.00012207C 12.4867,0.126587 12.5333,0.274536 12.6787,0.321411C 9.49199,3.24792 6.704,6.57336 4.69865,10.6827C 4.04399,11.08 3.47066,11.5573 2.83199,11.9706C 2.09467,10.2198 1.692,8.13196 3.8147e-006,7.33606C 0.500004,6.79871 1.31733,6.05994 1.93067,6.2428C 2.85999,6.51868 3.14,7.9054 3.60399,8.81604C 5.80133,5.5387 8.53734,2.19202 12.4227,0.00012207 Z " Fill="Gray" Stretch="Uniform" Visibility="{Binding FilteredFrom, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type syncfusion:GridFilterControl}}, Converter={StaticResource filteredFromCheckVisibilityConverter}}"> <Path.RenderTransform> <TransformGroup> <TransformGroup.Children> <RotateTransform Angle="0" /> <ScaleTransform ScaleX="1" ScaleY="1" /> </TransformGroup.Children> </TransformGroup> </Path.RenderTransform> </Path> </Border> <Grid Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid Margin="0,8,4,2" Background="{TemplateBinding Background}" Visibility="{TemplateBinding SearchOptionVisibility}"> <TextBox x:Name="PART_SearchTextBox" Height="25" HorizontalAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Center" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" BorderBrush="#FF727272" BorderThickness="1" /> <TextBlock Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" IsHitTestVisible="False" Opacity="0.7" Text="{Binding Source={x:Static Member=syncfusion:GridResourceWrapper.Search}}" Visibility="{TemplateBinding SearchTextBlockVisibility}" /> <Border Width="18" Height="18" Margin="0,0,5,0" HorizontalAlignment="Right" Visibility="{Binding Text, ElementName=PART_SearchTextBox, ConverterParameter=searchIcon, Converter={StaticResource textBlockVisibilityConverter}}"> <Path Data="F1M-185.925,-2026.96L-203.062,-2048.74C-197.485,-2056.51 -197.433,-2067.31 -203.64,-2075.2 -211.167,-2084.76 -225.019,-2086.42 -234.588,-2078.89 -244.154,-2071.36 -245.808,-2057.51 -238.282,-2047.94 -231.986,-2039.95 -221.274,-2037.5 -212.337,-2041.31L-195.262,-2019.61 -185.925,-2026.96z M-231.201,-2053.51C-235.653,-2059.17 -234.674,-2067.36 -229.02,-2071.81 -223.36,-2076.26 -215.169,-2075.29 -210.721,-2069.63 -206.269,-2063.97 -207.245,-2055.78 -212.902,-2051.33 -218.559,-2046.88 -226.752,-2047.86 -231.201,-2053.51z" Fill="Gray" RenderTransformOrigin="0.5,0.5" Stretch="Uniform"> <Path.RenderTransform> <TransformGroup> <RotateTransform Angle="0" /> <ScaleTransform ScaleX="1" ScaleY="1" /> </TransformGroup> </Path.RenderTransform> </Path> </Border> <Button x:Name="PART_DeleteButton" Width="25" Height="25" HorizontalAlignment="Right" VerticalAlignment="Stretch" Style="{StaticResource deleteBtnStyle}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Visibility="{Binding Text, ElementName=PART_SearchTextBox, ConverterParameter=deletebtn, Converter={StaticResource textBlockVisibilityConverter}}" /> </Grid> <Border Grid.Row="1" Margin="0,4,4,4" BorderBrush="#FFC0C0C0" BorderThickness="1"> <Grid> <TextBlock Margin="0,25,0,0" HorizontalAlignment="Center" VerticalAlignment="Top" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Text="{Binding Source={x:Static Member=syncfusion:GridResourceWrapper.NoItems}}" Visibility="{Binding HasItemsSource, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource ResourceKey=reverseVisibilityConverter}}" /> <Grid Visibility="{Binding HasItemsSource, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource ResourceKey=boolToVisiblityConverter}}"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid Grid.Row="1"> <Grid.Resources> <Storyboard x:Key="LaoadingAnimation" RepeatBehavior="Forever"> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> <EasingDoubleKeyFrame KeyTime="0" Value="0" /> <EasingDoubleKeyFrame KeyTime="0:0:5" Value="1170" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </Grid.Resources> <Path x:Name="Path" Width="26" Height="26" Data="M33.091251,58.314999C35.398258,58.314999 37.268002,60.186188 37.268002,62.490997 37.268002,64.797111 35.398258,66.667 33.091251,66.667 30.786645,66.667 28.917001,64.797111 28.917001,62.490997 28.917001,60.186188 30.786645,58.314999 33.091251,58.314999z M47.2943,55.271999C49.601437,55.271999 51.471003,57.141811 51.471003,59.447948 51.471003,61.752788 49.601437,63.624 47.2943,63.624 44.989765,63.624 43.119999,61.752788 43.119999,59.447948 43.119999,57.141811 44.989765,55.271999 47.2943,55.271999z M18.6666,54.257999C21.252921,54.257999 23.352,56.354423 23.352,58.94035 23.352,61.526379 21.252921,63.624 18.6666,63.624 16.08058,63.624 13.984001,61.526379 13.984001,58.94035 13.984001,56.354423 16.08058,54.257999 18.6666,54.257999z M57.4405,45.199001C59.3416,45.199001 60.891001,46.743435 60.891001,48.651199 60.891001,50.557564 59.3416,52.102001 57.4405,52.102001 55.534201,52.102001 53.99,50.557564 53.99,48.651199 53.99,46.743435 55.534201,45.199001 57.4405,45.199001z M8.3045502,43.967003C10.890694,43.967003 12.987,46.064644 12.987,48.6507 12.987,51.236656 10.890694,53.333 8.3045502,53.333 5.7185383,53.333 3.6219997,51.236656 3.6219997,48.6507 3.6219997,46.064644 5.7185383,43.967003 8.3045502,43.967003z M61.643499,30.851999C63.544542,30.851999 65.093996,32.396133 65.093996,34.30365 65.093996,36.209869 63.544542,37.754002 61.643499,37.754002 59.737253,37.754002 58.193001,36.209869 58.193001,34.30365 58.193001,32.396133 59.737253,30.851999 61.643499,30.851999z M4.6824703,29.619999C7.268652,29.619999 9.3649998,31.717722 9.3649998,34.30365 9.3649998,36.88958 7.268652,38.986 4.6824703,38.986 2.0965385,38.986 0,36.88958 0,34.30365 0,31.717722 2.0965385,29.619999 4.6824703,29.619999z M57.440451,16.938999C59.101923,16.938999 60.455999,18.287865 60.455999,19.9543 60.455999,21.620834 59.101923,22.971001 57.440451,22.971001 55.773779,22.971001 54.425001,21.620834 54.425001,19.9543 54.425001,18.287865 55.773779,16.938999 57.440451,16.938999z M8.3045502,15.272C10.890694,15.272 12.987,17.368345 12.987,19.9543 12.987,22.540255 10.890694,24.637999 8.3045502,24.637999 5.7185383,24.637999 3.6219997,22.540255 3.6219997,19.9543 3.6219997,17.368345 5.7185383,15.272 8.3045502,15.272z M47.294703,7.0829992C48.875502,7.0829996 50.167002,8.3696136 50.167002,9.9543542 50.167002,11.540385 48.875502,12.827 47.294703,12.827 45.711302,12.827 44.425001,11.540385 44.425001,9.9543542 44.425001,8.3696136 45.711302,7.0829996 47.294703,7.0829992z M18.666401,4.0399989C21.61159,4.0399999 23.997,6.4307284 23.997001,9.3748798 23.997,12.319001 21.61159,14.710999 18.666401,14.710999 15.72391,14.710999 13.336,12.319001 13.335999,9.3748798 13.336,6.4307284 15.72391,4.0399999 18.666401,4.0399989z M33.091201,0C36.294464,-7.5211233E-08 38.891,2.59503 38.891,5.7968797 38.891,8.9987201 36.294464,11.595 33.091201,11.595 29.890533,11.595 27.294,8.9987201 27.294001,5.7968797 27.294,2.59503 29.890533,-7.5211233E-08 33.091201,0z" Fill="Gray" RenderTransformOrigin="0.5,0.5" Stretch="Uniform" Visibility="{Binding IsItemSourceLoaded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}, ConverterParameter={StaticResource LaoadingAnimation}, Converter={StaticResource ResourceKey=loadingVisiblityConverter}}"> <Path.RenderTransform> <TransformGroup> <ScaleTransform /> <SkewTransform /> <RotateTransform /> <TranslateTransform /> </TransformGroup> </Path.RenderTransform> </Path> <ItemsControl x:Name="PART_ItemsControl" Height="{TemplateBinding Height}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ItemTemplate="{TemplateBinding ItemTemplate}" ItemsSource="{TemplateBinding ItemsSource}" KeyboardNavigation.TabNavigation="Continue" Visibility="{Binding IsItemSourceLoaded, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource ResourceKey=boolToVisiblityConverter}}"> <ItemsControl.Template> <ControlTemplate TargetType="{x:Type ItemsControl}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}"> <Grid> <ScrollViewer HorizontalAlignment="Stretch" CanContentScroll="True" HorizontalScrollBarVisibility="Hidden" Padding="2" SnapsToDevicePixels="true" VerticalScrollBarVisibility="Disabled"> <ItemsPresenter x:Name="PART_ItemsPresenter" Margin="{Binding ActualHeight, ElementName=PART_CheckBox, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource heightToMarginConverter}}" ClipToBounds="True" Focusable="False" /> </ScrollViewer> <TextBlock Margin="{Binding ElementName=PART_ItemsPresenter, Path=Margin}" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="{TemplateBinding Foreground}" Text="{Binding Source={x:Static Member=syncfusion:GridResourceWrapper.NoMatches}}" Visibility="{Binding ItemsSource, RelativeSource={RelativeSource TemplatedParent}, ConverterParameter=NoMatchText, Converter={StaticResource ResourceKey=listItemsVisiblityConverter}}" /> </Grid> </Border> </ControlTemplate> </ItemsControl.Template> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel HorizontalAlignment="Stretch" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> </Grid> <Border Grid.Row="1" Margin="0,0,20,0" VerticalAlignment="Top" Background="{TemplateBinding Background}" Visibility="{Binding ItemsSource, ElementName=PART_ItemsControl, ConverterParameter=ItemsControl, Converter={StaticResource ResourceKey=listItemsVisiblityConverter}}"> <CheckBox x:Name="PART_CheckBox" Margin="10,10,4,4" HorizontalAlignment="Stretch" VerticalAlignment="Center" Content="{Binding Source={x:Static Member=syncfusion:GridResourceWrapper.SelectAll}}" Focusable="False" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" IsThreeState="True" Visibility="{Binding Visibility, ElementName=PART_ItemsControl}" /> </Border> </Grid> </Grid> </Border> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> Take a moment to peruse the WPF DataGrid - Filtering documentation, where you can find about Filtering with code examples. Please refer this link to know about the essential features of WPF DataGrid. View Sample in GitHub.
The WPF DataGrid (SfDataGrid) cannot maintain the scrollbar position when ItemsSource changed. But you can achieve this by get and set the scrollbar position using SfDataGrid.ItemsSourceChanged event. this.dataGrid.ItemsSourceChanged += DataGrid_ItemsSourceChanged; private void DataGrid_ItemsSourceChanged(object sender, GridItemsSourceChangedEventArgs e) { if (columnName.Count > 0) { foreach (var col in columnName) { this.dataGrid.GroupColumnDescriptions.Add(new GroupColumnDescription() { ColumnName = col }); } foreach (Group group in dataGrid.View.Groups) { var isExpandGroup = group; var key = expandedGroups.FirstOrDefault(colu => colu.Key.ToString() == isExpandGroup.Key.ToString()); do { if (key != null) dataGrid.ExpandGroup(isExpandGroup); if (isExpandGroup.Groups != null) { isExpandGroup = isExpandGroup.Groups[0]; key = expandedGroups.FirstOrDefault(col => col.Groups[0].Key.ToString() == group.Groups[0].Key.ToString()); } else isExpandGroup = null; } while (isExpandGroup != null); } } VisualContainer container = this.dataGrid.GetVisualContainer(); container.ScrollRows.ScrollBar.Value = this.Scrollbarvalue; container.InvalidateMeasureInfo(); } private void Button_Click_1(object sender, RoutedEventArgs e) { var groups = dataGrid.View.Groups; foreach (Group group in groups) { if (group.IsExpanded) expandedGroups.Add(group); } foreach (GroupColumnDescription groupColumnDescriptions in dataGrid.GroupColumnDescriptions) columnName.Add(groupColumnDescriptions.ColumnName); VisualContainer container = this.dataGrid.GetVisualContainer(); double scrollValue = container.ScrollRows.ScrollBar.Value; this.Scrollbarvalue = scrollValue; //change Items source this.dataGrid.ItemsSource = viewModel.Ordersnew; } View Sample in GitHub.
This article describes how to enable zoom functionality in the SfChart3D control using a ScrollBar. The Maximum, Minimum properties, and the LabelCreated event of the NumericalAxis3D are essential for implementing zooming. Follow these steps to achieve the desired functionality. Step 1: Create ScrollBars and Register Event Create ScrollBars to obtain the position and factor needed for zooming, and register the ValueChanged event. <!-- ZoomFactor --> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <TextBlock Text="X-Axis ZoomFactor :" VerticalAlignment="Center"/> <ScrollBar Height="15" Grid.Column="1" Orientation="Horizontal" Margin="35,5,10,5" x:Name="zoomFactor" Minimum="0" Maximum="1" Value="1" ValueChanged="zoomFactor_ValueChanged"/> </Grid> <!-- ZoomPosition --> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <TextBlock Text="X-Axis ZoomPosition :" VerticalAlignment="Center"/> <ScrollBar Height="15" Grid.Column="1" Orientation="Horizontal" x:Name="zoomPosition" Margin="35,5,10,5" Minimum="0" Maximum="1" ValueChanged="zoomPosition_ValueChanged"/> </Grid> Step 2: Update Axis Properties Update the Maximum and Minimum properties of the PrimaryAxis based on ScrollBar values. //Calculating the Maximum and Minimum properties of Axis. private void UpdateRange() { if (zoomPosition != null && zoomFactor != null) { double start = minimum + zoomPosition.Value * maximum; double end = start + zoomFactor.Value * maximum; if (end > maximum) { start = start - (end - maximum); end = maximum; } if (start < minimum) start = minimum; xAxis.Minimum = start; xAxis.Maximum = end; } } Step 3: Update LabelContent PropertyUpdate the LabelContent property based on the value of the Position property in the LabelCreated event. <chart:SfChart3D.PrimaryAxis> <chart:NumericalAxis3D Interval="1" EnableAutoIntervalOnZooming="False" LabelCreated="xAxis_LabelCreated" LabelRotationAngle="-90" x:Name="xAxis"/> </chart:SfChart3D.PrimaryAxis> // Update LabelContent property of Position of AxisLabel private void xAxis_LabelCreated(object sender, LabelCreatedEventArgs e) { if (e.AxisLabel.Position - (int)e.AxisLabel.Position < 0.5) { int position = (int)Math.Floor(e.AxisLabel.Position); if (position < months.Count() && position >= 0) e.AxisLabel.LabelContent = months[position].ToString(); else e.AxisLabel.LabelContent = ""; } else { int position = (int)Math.Ceiling(e.AxisLabel.Position); if (position < months.Count() && position >= 0) e.AxisLabel.LabelContent = months[position].ToString(); else e.AxisLabel.LabelContent = ""; } } For a detailed view, explore the sample on GitHub. Refer to this KB article, for applying default zoom and pan position in SfChart. See also How to display the axis labels in a particular format How to define ticker labels of custom axis How to display the visible range of labels while zoomingConclusionI hope you enjoyed learning how to apply zooming in 3D Charts using scrollbar.You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Enable vertical scroll bar By default, when the WinForms GridListControl cell type is enabled in the GridGroupingControl and Metro theme is applied to the grid, the scrollbars will not present for the GridListControl. To enable the scrollbars, use the GridOfficeScrollBars property and set the Office2007ScrollBars property of GridDropDownGridListControlCellRenderer class to true. C# //To enable scrollbars for GridListControl GridDropDownGridListControlCellRenderer renderer = (GridDropDownGridListControlCellRenderer)this.gridGroupingControl1.TableControl.CellRenderers["GridListControl"]; renderer.ListControlPart.Grid.Office2007ScrollBars = true; renderer.ListControlPart.Grid.GridOfficeScrollBars = Syncfusion.Windows.Forms.OfficeScrollBars.Metro; VB 'To enable scrollbars for GridListControl Dim renderer As GridDropDownGridListControlCellRenderer = CType(Me.gridGroupingControl1.TableControl.CellRenderers("GridListControl"), GridDropDownGridListControlCellRenderer) renderer.ListControlPart.Grid.Office2007ScrollBars = True renderer.ListControlPart.Grid.GridOfficeScrollBars = Syncfusion.Windows.Forms.OfficeScrollBars.Metro Samples: CS: Scrollbars for GridListControl_CSVB: Scrollbars for GridListControl_VBReference link: https://help.syncfusion.com/windowsforms/classic/gridgroupingcontrol/scrollingConclusionI hope you enjoyed learning about how to enable the vertical scroll bar for GridListControl cell type in WinForms GridGroupingControl.You can refer to our WinForms GridControl feature tour page to learn about its other groundbreaking feature representations. You can also explore our WinForms GridControl documentation to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Disable the scroll bars The scroll bars in SfDataGrid can be disabled by setting the width and height of the vertical and horizontal scroll bars to zero respectively. C# this.sfDataGrid.TableControl.VerticalScroll.ScrollBar.Width = 0; this.sfDataGrid.TableControl.HorizontalScroll.ScrollBar.Height = 0; VB Me.sfDataGrid.TableControl.VerticalScroll.ScrollBar.Width = 0 Me.sfDataGrid.TableControl.HorizontalScroll.ScrollBar.Height = 0 Samples: C#: DisableScrolBars_CS VB: DisableSrollBars_VB ConclusionI hope you enjoyed learning about how to disable the scrollbars in the SfDataGrid WinForms. You can refer to our WinForms DataGrid feature tour page to know about its other groundbreaking feature representations documentationand how to quickly get started for configuration specifications. You can also explore our WinForms DataGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In tree grid, with virtualization enabled mode the actionComplete client-side event will be triggered on scroll action with requestType event argument as scroll. In this event, we can get the current scroll top position of the tree grid content using the scroller object. please refer the following code example for this. //app.component.html <ej-treegrid #TreeGridControl id="TreeGridContainer" //… enableVirtualization = "true" (actionComplete) = "actionComplete($event)" > </ej-treegrid> //app.component.ts actionComplete(args) { if (args.requestType == "scroll") { var treeObj = this.treeGrid.widget; var scrollTop = treeObj.getScrollElement().ejScroller("scrollTop"); this.scrollValue = scrollTop; } } The below screenshot shows the output of above code example. Sample to get the current scroll top of the tree grid content is available here.
In jQuery TreeGrid, we can able to move the scrollbar to selected row while selecting any row (at load time using selectedRowIndex property or changing the row selection on button click action) by using the rowSelected client-side event and updateScrollBar method. The below code example explains about how to select the row using setModel and how to move the scrollbar to selected row. <div id="TreeGridContainer" style="height:400px;width:100%"></div> <button id="click" onclick="clickme()" style="margin-top:10px;">Move ScrollBar</button> <script type="text/javascript"> $(function () { $("#TreeGridContainer").ejTreeGrid({ // rowSelected: function (args) { this. updateScrollBar(); }, dataSource: projectData, }) }); function clickme() { var treeObj = $("#TreeGridContainer").data("ejTreeGrid"); treeObj.setModel({ "selectedRowIndex": 30 }); } </script> A Sample to move the scrollbar to a selected row is available in the following link, Sample
User can add the ScrollBar to the Carousel Items. It can be achieved by adding the ScrollViewer control inside the ItemTemplate of Carousel control. The following code demonstrates the same. XAML <Window.DataContext> <local:ViewModel/> </Window.DataContext> <!-- Carousel control --> <syncfusion:Carousel Height="300" x:Name="carousel" ItemsSource="{Binding Collection}"> <!-- Set Height For Carousel Items --> <syncfusion:Carousel.ItemContainerStyle> <Style TargetType="syncfusion:CarouselItem"> <Setter Property="Height" Value="140" /> </Style> </syncfusion:Carousel.ItemContainerStyle> <!-- For Adding ScrollBar to Carousel Items --> <syncfusion:Carousel.ItemTemplate> <DataTemplate> <Grid > <!-- Add ScrollBar --> <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" > <Border x:Name="border" > <Grid Width="150" Height="300"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBox TextWrapping="Wrap" Grid.Row="0" Background="Green" Foreground="White" Text="The Carousel is a circular conveyor used on which objects are displayed and rotated. The Carousel control provides a 3D interface for displaying objects with interactive navigation, Data Binding Path, Items Per Page, Scaling and Skewing."/> <Image Source="/Images1/dodsworth.png" Grid.Row="1" /> </Grid> </Border> </ScrollViewer> </Grid> </DataTemplate> </syncfusion:Carousel.ItemTemplate> C# public class Model { } public ObservableCollection<Model> Collection { get; set; } public ViewModel() { Collection = new ObservableCollection<Model>(); Collection.Add(new Model() ); Collection.Add(new Model() ); Collection.Add(new Model() ); Collection.Add(new Model() ); Collection.Add(new Model() ); } Screenshot Sample: CarouselSample
Adding scrollbars in MetroForm By default, WinForms MetroForm don’t have any scroll bar. But we can add scroll bar in MetroForm by the help of Panel. Here we have used the ScrollersFrame in Panel to show the scroll bar and apply the metro style. The following code demonstrates the same. C# //Initialize ScrollersFrame ScrollersFrame frame = new ScrollersFrame(); //Enable ScrollBar to the container frame.AttachedTo = this.panel1; //Set ScrollersFrame Visual Style frame.VisualStyle = ScrollBarCustomDrawStyles.Metro; //Enable AutoScroll property this.panel1.AutoScroll = true; VB 'Initialize ScrollersFrame Dim frame As New ScrollersFrame() 'Enable ScrollBar to the container frame.AttachedTo = Me.panel1 'Set ScrollersFrame Visual Style frame.VisualStyle = ScrollBarCustomDrawStyles.Metro 'Enable AutoScroll property Me.panel1.AutoScroll = True Screenshot Samples: C#: MetroForm_AutoScroll VB: MetroForm_AutoScroll Conclusion I hope you enjoyed learning how to to add scrollbars in WinForms MetroForm. Refer to our WinForms MetroForm’s feature tour page for its other groundbreaking feature representations. You can also explore our WinForms MetroForm documentation to understand how to present and manipulate data. For current customers, check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our WinForms MetroForm and other WinForms components. Please let us know in the following comment section if you have any queries or require clarifications. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
In order to customize the appearance of the arrow buttons in MetroScrollBars , use the properties like ArrowNormalBorderColor, ArrowPushedBorderColor, ArrowNormal,etc., of MetroColorTable and set it to the GridControl.MetroColorTable property. Code Snippet C# //Metro colors MetroColorTable style = GridsScrollbarsStyle(); //Enable metro scroll bars gridControl1.MetroScrollBars = true; //Setting Metro colors for MetroScrollBar gridControl1.MetroColorTable = style; private MetroColorTable GridsScrollbarsStyle() { var scrollStyle = new MetroColorTable { ScrollerBackground = Color.FromArgb(2,182,161), // Arrow background ArrowNormalBackGround = Color.WhiteSmoke, //To set the arrow border ArrowNormalBorderColor = Color.Red, ArrowPushedBorderColor = Color.FromArgb(171, 171, 171), ArrowCheckedBorderColor = Color.FromArgb(171, 171, 171), ArrowPushedBackGround = Color.FromArgb(34, 34, 34), ArrowPushed = Color.FromArgb(104, 104, 104), ArrowNormal = Color.Green, ArrowChecked = Color.FromArgb(80, 80, 80), ArrowInActive = Color.FromArgb(104, 104, 104), }; return scrollStyle; } VB 'Metro colors Dim style As MetroColorTable = GridsScrollbarsStyle() 'Enable metro scroll bars gridControl1.MetroScrollBars = True 'Setting Metro colors for MetroScrollBar gridControl1.MetroColorTable = style Private Function GridsScrollbarsStyle() As MetroColorTable Dim scrollStyle = New MetroColorTable With { .ScrollerBackground = Color.FromArgb(2, 182, 161), .ArrowNormalBackGround = Color.WhiteSmoke, .ArrowNormalBorderColor = Color.Red, .ArrowPushedBorderColor = Color.FromArgb(171, 171, 171), .ArrowCheckedBorderColor = Color.FromArgb(171, 171, 171), .ArrowPushedBackGround = Color.FromArgb(34, 34, 34), .ArrowPushed = Color.FromArgb(104, 104, 104), .ArrowNormal = Color.Green, .ArrowChecked = Color.FromArgb(80, 80, 80), .ArrowInActive = Color.FromArgb(104, 104, 104), } Return scrollStyle End Function Screenshot Sample Link: C#: Customizing BorderColors_CS VB: Customizing BorderColors_VB
Scrolling To customize the size of scrollbars in the grid, use the InnerScrollBar.Width and InnerScrollBar.Height properties of ScrollBarWrapper class. C# public Form1() { this.gridGroupingControl1.TableControl.HScroll = true; this.gridGroupingControl1.ableControl.VScroll = true; if (gridGroupingControl1.TableControl.HScrollBar.InnerScrollBar != null && this.gridGroupingControl1.TableControl.VScrollBar.InnerScrollBar != null) { this.gridGroupingControl1.TableControl.VScrollBar.InnerScrollBar.Width = 50; this.gridGroupingControl1.TableControl.HScrollBar.InnerScrollBar.Height = 50; } } VB Public Sub New() Me.gridGroupingControl1.TableControl.HScroll = True Me.gridGroupingControl1.TableControl.VScroll = True If gridGroupingControl1.TableControl.HScrollBar.InnerScrollBar IsNot Nothing AndAlso Me.gridGroupingControl1.TableControl.VScrollBar.InnerScrollBar IsNot Nothing Then Me.gridGroupingControl1.TableControl.VScrollBar.InnerScrollBar.Width = 50 Me.gridGroupingControl1.TableControl.HScrollBar.InnerScrollBar.Height = 50 End If End Sub To customize the size of scrollbars at runtime, use the TableControl.ControlAdded event. In that event, the VScollBar and HScrollBar controls can be get by using the e.Control property. CS //Event Subscription this.gridGroupingControl1.TableControl.ControlAdded += TableControl_ControlAdded; //Event customization private void TableControl_ControlAdded(object sender, ControlEventArgs e) { HScrollBarCustomDraw hscrollBar = e.Control as HScrollBarCustomDraw; VScrollBarCustomDraw vScollBar = e.Control as VScrollBarCustomDraw; if (hscrollBar != null) { hscrollBar.Height = 50; } if (vScollBar != null) { vScollBar.Width = 50; } } VB 'Event Subscription AddHandler Me.gridGroupingControl1.TableControl.ControlAdded, AddressOf TableControl_ControlAdded 'Event customization Private Sub TableControl_ControlAdded(ByVal sender As Object, ByVal e As ControlEventArgs) Dim hscrollBar As HScrollBarCustomDraw = TryCast(e.Control, HScrollBarCustomDraw) Dim vScollBar As VScrollBarCustomDraw = TryCast(e.Control, VScrollBarCustomDraw) If hscrollBar IsNot Nothing Then hscrollBar.Height = 50 End If If vScollBar IsNot Nothing Then vScollBar.Width = 50 End If End Sub Screenshot Samples: C#: Customizing Scrollbar Size_CS VB: Customizing Scrollbar Size_VB Reference link: https://help.syncfusion.com/windowsforms/classic/gridgroupingcontrol/scrolling
This article demonstrates about enabling scroll bars to view all items in TileViewControl. VerticalScrollBarVisibility and HorizontalScrollBarVisibility To enable scroll bar for TileViewItems, set either auto or Visible for VerticalScrollBarVisibility and HorizontalScrollBarVisibility properties of TileViewControl. OnMinimizedWidth and OnMinimizedHeight Set height and width for TileViewItems in minimized state to view all the minimized items using scroll bar. XAML The following screenshot illustrates the output of the above code example:
In order to highlight the particular cell position in vertical scrollbar, the Paint event can be used. The position should be calculated as per the below code, Code Snippet C# // Highlight the current cell position. this.scrollersFrame1.VerticalScroller.Paint += VerticalScroller_Paint; void VerticalScroller_Paint(object sender, PaintEventArgs e) { height = this.gridControl1.DefaultRowHeight * rowIndex; y = height < view ? 0 : (height / view); y = y * (view / part); y = y + (height % view)/part; DrawRect(e.ClipRectangle); } //Draw the rectangle on vertical scroll bar. private void DrawRect(Rectangle rect) { renderer.rect = new Rectangle(rect.X, y, rect.Width, 3); } VB ‘Highlight the current cell position. AddHandler Me.scrollersFrame1.VerticalScroller.Paint, AddressOf VerticalScroller_Paint Private Sub VerticalScroller_Paint(ByVal sender As Object, ByVal e As PaintEventArgs) height_Renamed = Me.gridControl1.DefaultRowHeight * rowIndex y = If(height_Renamed < view, 0, (height_Renamed / view)) y = y * (view \ part) y = y + (height_Renamed Mod view)/part DrawRect(e.ClipRectangle) End Sub ‘Draw the rectangle on vertical scroll bar. Private Sub DrawRect(ByVal rect As Rectangle) renderer.rect = New Rectangle(rect.X, y, rect.Width, 3) End Sub Screenshot Sample Links C#: Current Row_Position_CS VB: Current Row_Position_VB
Enable metro style scrollbar In TabbedMDIManager, Metro style scroll bar can be added by following below steps. Need to enable “AutoScroll” property in child Form. Need to load ScrollersFrame and attach it child form by using its property named “AttachedTo”. Need to set its Visual style as “Metro”. C# //To attach TabbedMDIManager in form this.tabbedMDIManager1.AttachedTo = this; //To enable the Scrollbar in the form this.AutoScroll = true; //To add the ScrollerFrame in form this.scrollersFrame1.AttachedTo = this; //To specify the visual style of the ScrollerFrame. this.scrollersFrame1.VisualStyle = Syncfusion.Windows.Forms.ScrollBarCustomDrawStyles.Metro; VB 'To attach TabbedMDIManager in form Me.tabbedMDIManager1.AttachedTo = Me 'To enable the Scrollbar in the form Me.AutoScroll = True 'To add the ScrollerFrame in form Me.scrollersFrame1.AttachedTo = Me 'To specify the visual style of the ScrollerFrame. Me.scrollersFrame1.VisualStyle = Syncfusion.Windows.Forms.ScrollBarCustomDrawStyles.Metro Screenshot Figure 1. Multiple lines used in List item. Samples: C#: TabbedMDI_ScrollBar_C# VB: TabbedMDI_ScrollBar_VB
Scrolling the Diagram using Page Down/Up keys and Arrow keys Syncfusion® Diagram supports scrolling the diagram with the help of keyboard interaction. To achieve this functionality override the ProcessCmdKey method and change the Diagram.View’s “Origin”, as well as “ScrollVirtualBounds.Location” values while pressing the page Up/Down keys. The below code shows how to scroll diagram while pressing page Up/Down keys. [C#] PointF origin = diagram1.View.Origin; PointF virtualTopLeft = diagram1.View.ScrollVirtualBounds.Location; if (keyData == Keys.PageDown) { origin.Y += 10; virtualTopLeft.Y -= 10; } if (keyData == Keys.PageUp) { //down origin.Y -= 10; } [VB] Dim origin As PointF = diagram1.View.Origin Dim virtualTopLeft As PointF = diagram1.View.ScrollVirtualBounds.Location If keyData = Keys.PageDown Then origin.Y += 10 virtualTopLeft.Y -= 10 End If If keyData = Keys.PageUp Then 'down origin.Y -= 10 End If
We can scroll the scroller to the selected row by using rowSelected client side event of the JavaScript Grid. Example: Grid rendering code: JS: Please refer the below snippet for enable “rowSelected” client side event of the grid. <script type="text/javascript">$(function () { $("#Grid").ejGrid({ dataSource: window.gridData,allowScrolling: true, scrollSettings: { height: 500,width:720 }, columns: [ { field: "OrderID", headerText: "Order ID", width: 75, textAlign: ej.TextAlign.Right }, { field: "CustomerID", headerText: "Customer ID", width: 80 }, { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right }, { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right }, { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right }, { field: "ShipCity", headerText: "Ship City", width: 110 } ], rowSelected: “rowSelected” }); });</script> MVC: @(Html.EJ().Grid<EditableOrder>("Scrolling") .Datasource((IEnumerable<object>)ViewBag.datasource) .AllowScrolling() .ScrollSettings(scroll => { scroll.Height(500).Width(720); }) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true). TextAlign(TextAlign.Right). Width(75).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75). Add(); col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right) .Width(75) .Format("{0:C}"). Add(); col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right). Width(80).Format("{0:MM/dd/yyyy}").Add(); col.Field("ShipCity").HeaderText("Ship City").Width(110).Add(); }) .ClientSideEvents(eve=>{eve.RowSelected("rowSelected");}) ) ASP.NET: <ej:Grid ID="OrdersGrid" runat="server" AllowScrolling="True" AllowSorting="True"> <ScrollSettings height="500" width="720"></ScrollSettings> <columns> <ej:column field="OrderID" headertext="Order ID" isprimarykey="True" textalign="Right" width="75" /> <ej:column field="CustomerID" headertext="Customer ID" width="80" /> <ej:column field="EmployeeID" headertext="Employee ID" textalign="Right" width="75" /> <ej:column field="Freight" headertext="Freight" textalign="Right" width="75" format="{0:C}" /> <ej:column field="OrderDate" headertext="Order Date" textalign="Right" width="80" format="{0:MM/dd/yyyy}" /> <ej:column field="ShipCity" headertext="Ship City" width="110" /> </columns> <ClientSideEvents RowSelected="rowSelected"></ClientSideEvents> </ej:Grid> rowSelected event script code: //Move the scroller while selecting the row using rowSelected event function rowSelected(args) { //Get the single row height var rowHeight = this.getRowHeight(); //Get the selected row index var selectedRowIndex = args.model.selectedRowIndex; //Set the ejScroller "y" axis position this.getScrollObject().scrollY(rowHeight * selectedRowIndex); } Result: Figure: Moving scroller to selected row.Conclusion I hope you enjoyed learning about how to move the scrollbar to selected row in JavaScript Grid.You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Customize the scrollbar To add a custom scrollbar, you need to set the GridScrollBarMode as shared. In order to adjust the size of thumb you need to use MetroThumbSize of scrollersFrame. C# //Form Load //to apply custom scrollbar this.gridGroupingControl1.TableControl.HScrollBehavior = GridScrollbarMode.Shared; this.scrollersFrame1.AttachedTo = this.gridGroupingControl1.TableControl; this.scrollersFrame1.VisualStyle = ScrollBarCustomDrawStyles.Metro; //to adjust the thumb size of scrollbar this.scrollersFrame1.MetroThumbSize = new Size(5, this.scrollersFrame1.MetroThumbSize.Height); VB 'to apply custom scrollbar Me.gridGroupingControl1.TableControl.HScrollBehavior = GridScrollbarMode.Shared Me.scrollersFrame1.AttachedTo = Me.gridGroupingControl1.TableControl Me.scrollersFrame1.VisualStyle = ScrollBarCustomDrawStyles.Metro 'to adjust the thumb size of scrollbar Me.scrollersFrame1.MetroThumbSize = New Size(5, Me.scrollersFrame1.MetroThumbSize.Height) Screenshot: Before customizing the thumb size After customizing the thumb size. Note: If you are using ScrollerFrame, then you need to use AttachedTo() and the maximum width of thumb is limited to the up to the size of scroller bounds. Instead of using ScrollerFrame, if you want to use any other scrollbars, you can refer this article. Samples: C#: CustomScrollBar VB: CustomScrollBar
Scrollbar thumbtrack position By default, the scrollbar’s ThumbTrack position is set based on the column position and row position. But the ThumbTrack is not set to correct position when grid’s RowHeaders and ColumnHeaders are disabled with the RowHeaders and ColumnHeaders property. The following screenshot illustrates the exact issue. Solution The vertical scrollbar’s and horizontal scrollbar’s ThumbTrack can be tracked to correct scroll position by enabling the UseOldHiddenScrollLogic static property of the GridControlBase. This property is set before the InitializeComponent() or grid initializing code. C# //The following property is enabled above the grid initialization code or InitializeComponent() GridControlBase.UseOldHiddenScrollLogic = true; InitializeComponent(); VB 'The following property is enabled above the grid initialization code or InitializeComponent() GridControlBase.UseOldHiddenScrollLogic = true InitializeComponent Note:This is applicable for the GridDataBoundGrid control also. Screenshot Samples: C#: ScrollBar_ThumTrack_Position_CS VB: ScrollBar_ThumTrack_Position_VBConclusionI hope you enjoyed learning about how to resolve scrolling position issue in WinForms GridControl or GridDataBoundGrid.You can refer to our WinForms Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WinForms Grid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Scrollbar thumbtrack position By default, the scrollbar’s ThumbTrack position is set based on the column position and row position. But the ThumbTrack is not set to correct position when grid’s RowHeaders and ColumnHeaders are disabled with the RowHeaders and ColumnHeaders property. The following screenshot illustrates the exact issue. Solution The vertical scrollbar’s and horizontal scrollbar’s ThumbTrack can be tracked to correct scroll position by enabling the UseOldHiddenScrollLogic static property of the GridControlBase. This property is set before the InitializeComponent() or grid initializing code. C# //The following property is enabled above the grid initialization code or InitializeComponent() GridControlBase.UseOldHiddenScrollLogic = true; InitializeComponent(); VB 'The following property is enabled above the grid initialization code or InitializeComponent() GridControlBase.UseOldHiddenScrollLogic = true InitializeComponent Note:This is applicable for the GridDataBoundGrid control also. Screenshot Samples: C#: ScrollBar_ThumTrack_Position_CS VB: ScrollBar_ThumTrack_Position_VB
Description: This article describes how to add multiple legend items inside the scrollbar in WPF Chart (SfChart). Legend items represent the label values of chart series. When a large number of series are added to the chart, some legend items may be hidden from view. To address this, SfChart allows the legend to be placed inside a scrollbar, enabling users to scroll and view all items. Solution: If you want to add multiple legend items inside any container such as scroll viewer, you need to define the control template for the legends in WPF Chart (SfChart). [XAML] <!—Adding ScrollViewer for Legend items--> <chart:SfChart x:Name="sfchart" Margin="10" > <chart:SfChart.Legend> <chart:ChartLegend DockPosition="Top"> <chart:ChartLegend.Template> <ControlTemplate> <ScrollViewer Margin="30" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"> <ItemsPresenter> </ItemsPresenter> </ScrollViewer> </ControlTemplate> </chart:ChartLegend.Template> </chart:ChartLegend> </chart:SfChart.Legend> </chart:SfChart> Output ConclusionI hope you enjoyed learning how to add multiple legend items in scroll viewer of WPF Chart (SfChart).You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
This article explains how the WPF Chart (SfChart) supports displaying the visible range of axis labels while zooming with the scrollbar. You can enable the labels by setting the ThumbLabelVisibility property to Visible.XAML <!--ThumbLabelVisibility property is used to show the Visible range of Label while zooming --> <Syncfusion:SfChart.PrimaryAxis> <Syncfusion:CategoryAxis Header="April 1st week in 2014" EnableTouchMode="True" ThumbLabelVisibility="Visible" EnableScrollBar="True" FontSize="18" LabelTemplate="{StaticResource labelTemplate}" Foreground="Black"/> </Syncfusion:SfChart.PrimaryAxis> <Syncfusion:SfChart.SecondaryAxis> <Syncfusion:NumericalAxis FontSize="18" EnableTouchMode="True" ThumbLabelVisibility="Visible" EnableScrollBar="True" LabelTemplate="{StaticResource labelTemplate}" Header="Share Details"/> </Syncfusion:SfChart.SecondaryAxis> Output: ConclusionI hope you enjoyed learning about how to display the visible range of axis labels while zooming in WPF Chart(SfChart).You can refer to our WPF Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to present and manipulate data.For current customers, you can check out our WPF components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our WPF Chart and other WPF components.If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
