├── .idea
    └── .idea.HeaderedScrollViewer
    │   └── .idea
    │       ├── avalonia.xml
    │       ├── encodings.xml
    │       └── indexLayout.xml
├── HeaderedScrollViewer.sln
├── HeaderedScrollViewer
    ├── App.axaml
    ├── App.axaml.cs
    ├── Assets
    │   └── avalonia-logo.ico
    ├── HeaderedScrollViewer.csproj
    ├── Program.cs
    ├── ViewLocator.cs
    ├── ViewModels
    │   ├── MainWindowViewModel.cs
    │   └── ViewModelBase.cs
    └── Views
    │   ├── HeaderedScrollViewer.cs
    │   ├── MainWindow.axaml
    │   └── MainWindow.axaml.cs
└── README.md


/.idea/.idea.HeaderedScrollViewer/.idea/avalonia.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project version="4">
 3 |   <component name="AvaloniaProject">
 4 |     <option name="projectPerEditor">
 5 |       <map>
 6 |         <entry key="HeaderedScrollViewer/Views/MainWindow.axaml" value="HeaderedScrollViewer/HeaderedScrollViewer.csproj" />
 7 |       </map>
 8 |     </option>
 9 |   </component>
10 | </project>


--------------------------------------------------------------------------------
/.idea/.idea.HeaderedScrollViewer/.idea/encodings.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
4 | </project>


--------------------------------------------------------------------------------
/.idea/.idea.HeaderedScrollViewer/.idea/indexLayout.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="UserContentModel">
4 |     <attachedFolders />
5 |     <explicitIncludes />
6 |     <explicitExcludes />
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/HeaderedScrollViewer.sln:
--------------------------------------------------------------------------------
 1 | 
 2 | Microsoft Visual Studio Solution File, Format Version 12.00
 3 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "HeaderedScrollViewer", "HeaderedScrollViewer\HeaderedScrollViewer.csproj", "{18DEEDE7-69FF-4C14-8A8E-62F321410B88}"
 4 | EndProject
 5 | Global
 6 | 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 7 | 		Debug|Any CPU = Debug|Any CPU
 8 | 		Release|Any CPU = Release|Any CPU
 9 | 	EndGlobalSection
10 | 	GlobalSection(ProjectConfigurationPlatforms) = postSolution
11 | 		{18DEEDE7-69FF-4C14-8A8E-62F321410B88}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
12 | 		{18DEEDE7-69FF-4C14-8A8E-62F321410B88}.Debug|Any CPU.Build.0 = Debug|Any CPU
13 | 		{18DEEDE7-69FF-4C14-8A8E-62F321410B88}.Release|Any CPU.ActiveCfg = Release|Any CPU
14 | 		{18DEEDE7-69FF-4C14-8A8E-62F321410B88}.Release|Any CPU.Build.0 = Release|Any CPU
15 | 	EndGlobalSection
16 | EndGlobal
17 | 


--------------------------------------------------------------------------------
/HeaderedScrollViewer/App.axaml:
--------------------------------------------------------------------------------
 1 | <Application xmlns="https://github.com/avaloniaui"
 2 |              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 3 |              xmlns:local="using:HeaderedScrollViewer"
 4 |              x:Class="HeaderedScrollViewer.App">
 5 |     <Application.DataTemplates>
 6 |         <local:ViewLocator/>
 7 |     </Application.DataTemplates>
 8 | 
 9 |     <Application.Styles>
10 |         <FluentTheme Mode="Light"/>
11 |     </Application.Styles>
12 | </Application>
13 | 


--------------------------------------------------------------------------------
/HeaderedScrollViewer/App.axaml.cs:
--------------------------------------------------------------------------------
 1 | using Avalonia;
 2 | using Avalonia.Controls.ApplicationLifetimes;
 3 | using Avalonia.Markup.Xaml;
 4 | using HeaderedScrollViewer.ViewModels;
 5 | using HeaderedScrollViewer.Views;
 6 | 
 7 | namespace HeaderedScrollViewer
 8 | {
 9 |     public partial class App : Application
10 |     {
11 |         public override void Initialize()
12 |         {
13 |             AvaloniaXamlLoader.Load(this);
14 |         }
15 | 
16 |         public override void OnFrameworkInitializationCompleted()
17 |         {
18 |             if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
19 |             {
20 |                 desktop.MainWindow = new MainWindow
21 |                 {
22 |                     DataContext = new MainWindowViewModel(),
23 |                 };
24 |             }
25 | 
26 |             base.OnFrameworkInitializationCompleted();
27 |         }
28 |     }
29 | }


--------------------------------------------------------------------------------
/HeaderedScrollViewer/Assets/avalonia-logo.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stripe2933/HeaderedScrollViewer/6ec483d72771e8f689d73dc11596c1a361f367b1/HeaderedScrollViewer/Assets/avalonia-logo.ico


--------------------------------------------------------------------------------
/HeaderedScrollViewer/HeaderedScrollViewer.csproj:
--------------------------------------------------------------------------------
 1 | <Project Sdk="Microsoft.NET.Sdk">
 2 |     <PropertyGroup>
 3 |         <OutputType>WinExe</OutputType>
 4 |         <TargetFramework>net6.0</TargetFramework>
 5 |         <Nullable>enable</Nullable>
 6 |         <!--Avalonia doesen't support TrimMode=link currently,but we are working on that https://github.com/AvaloniaUI/Avalonia/issues/6892 -->
 7 |         <TrimMode>copyused</TrimMode>
 8 |         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
 9 |     </PropertyGroup>
10 |     <ItemGroup>
11 |         <Folder Include="Models\" />
12 |         <AvaloniaResource Include="Assets\**" />
13 |         <None Remove=".gitignore" />
14 |     </ItemGroup>
15 |     <ItemGroup>
16 |         <!--This helps with theme dll-s trimming.
17 |         If you will publish your application in self-contained mode with p:PublishTrimmed=true and it will use Fluent theme Default theme will be trimmed from the output and vice versa.
18 |         https://github.com/AvaloniaUI/Avalonia/issues/5593 -->
19 |         <TrimmableAssembly Include="Avalonia.Themes.Fluent" />
20 |         <TrimmableAssembly Include="Avalonia.Themes.Default" />
21 |     </ItemGroup>
22 |     <ItemGroup>
23 |         <PackageReference Include="Avalonia" Version="0.10.14" />
24 |         <PackageReference Include="Avalonia.Desktop" Version="0.10.14" />
25 |         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
26 |         <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="0.10.14" />
27 |         <PackageReference Include="Avalonia.ReactiveUI" Version="0.10.14" />
28 |         <PackageReference Include="XamlNameReferenceGenerator" Version="1.3.4" />
29 |     </ItemGroup>
30 | </Project>
31 | 


--------------------------------------------------------------------------------
/HeaderedScrollViewer/Program.cs:
--------------------------------------------------------------------------------
 1 | using Avalonia;
 2 | using Avalonia.ReactiveUI;
 3 | using System;
 4 | 
 5 | namespace HeaderedScrollViewer
 6 | {
 7 |     class Program
 8 |     {
 9 |         // Initialization code. Don't use any Avalonia, third-party APIs or any
10 |         // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
11 |         // yet and stuff might break.
12 |         [STAThread]
13 |         public static void Main(string[] args) => BuildAvaloniaApp()
14 |             .StartWithClassicDesktopLifetime(args);
15 | 
16 |         // Avalonia configuration, don't remove; also used by visual designer.
17 |         public static AppBuilder BuildAvaloniaApp()
18 |             => AppBuilder.Configure<App>()
19 |                 .UsePlatformDetect()
20 |                 .LogToTrace()
21 |                 .UseReactiveUI();
22 |     }
23 | }


--------------------------------------------------------------------------------
/HeaderedScrollViewer/ViewLocator.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using Avalonia.Controls;
 3 | using Avalonia.Controls.Templates;
 4 | using HeaderedScrollViewer.ViewModels;
 5 | 
 6 | namespace HeaderedScrollViewer
 7 | {
 8 |     public class ViewLocator : IDataTemplate
 9 |     {
10 |         public IControl Build(object data)
11 |         {
12 |             var name = data.GetType().FullName!.Replace("ViewModel", "View");
13 |             var type = Type.GetType(name);
14 | 
15 |             if (type != null)
16 |             {
17 |                 return (Control)Activator.CreateInstance(type)!;
18 |             }
19 | 
20 |             return new TextBlock { Text = "Not Found: " + name };
21 |         }
22 | 
23 |         public bool Match(object data)
24 |         {
25 |             return data is ViewModelBase;
26 |         }
27 |     }
28 | }


--------------------------------------------------------------------------------
/HeaderedScrollViewer/ViewModels/MainWindowViewModel.cs:
--------------------------------------------------------------------------------
1 | using ReactiveUI;
2 | 
3 | namespace HeaderedScrollViewer.ViewModels
4 | {
5 |     public class MainWindowViewModel : ViewModelBase
6 |     {
7 |         
8 |     }
9 | }


--------------------------------------------------------------------------------
/HeaderedScrollViewer/ViewModels/ViewModelBase.cs:
--------------------------------------------------------------------------------
1 | using ReactiveUI;
2 | 
3 | namespace HeaderedScrollViewer.ViewModels
4 | {
5 |     public class ViewModelBase : ReactiveObject
6 |     {
7 |     }
8 | }


--------------------------------------------------------------------------------
/HeaderedScrollViewer/Views/HeaderedScrollViewer.cs:
--------------------------------------------------------------------------------
  1 | using System;
  2 | using System.Collections.Generic;
  3 | using System.Linq;
  4 | using Avalonia;
  5 | using Avalonia.Controls;
  6 | 
  7 | namespace HeaderedScrollViewer.Views;
  8 | 
  9 | public class HeaderedScrollViewer : AvaloniaObject
 10 | {
 11 |     #region Fields
 12 | 
 13 |     private static List<TextBlock>? _headerTexts;
 14 | 
 15 |     #endregion
 16 | 
 17 |     #region Avalonia Properties
 18 |     
 19 |     /// <summary>
 20 |     /// The classname to mark the TextBlock as header text.
 21 |     /// </summary>
 22 |     public static readonly AttachedProperty<string> TargetHeaderProperty =
 23 |         AvaloniaProperty.RegisterAttached<Views.HeaderedScrollViewer, ScrollViewer, string>("TargetHeader");
 24 |     public static void SetTargetHeader(AvaloniaObject element, string value) => 
 25 |         element.SetValue(TargetHeaderProperty, value);
 26 |     public static string GetTargetHeader(AvaloniaObject element) => 
 27 |         element.GetValue(TargetHeaderProperty);
 28 | 
 29 |     /// <summary>
 30 |     /// Current header text; null if no current header text
 31 |     /// </summary>
 32 |     public static readonly AttachedProperty<string?> CurrentHeaderTextProperty =
 33 |         AvaloniaProperty.RegisterAttached<Views.HeaderedScrollViewer, ScrollViewer, string?>("CurrentHeaderText");
 34 |     public static void SetCurrentHeaderText(AvaloniaObject element, string? value) => 
 35 |         element.SetValue(CurrentHeaderTextProperty, value);
 36 |     public static string? GetCurrentHeaderText(AvaloniaObject element) => 
 37 |         element.GetValue(CurrentHeaderTextProperty);
 38 |     
 39 |     #endregion
 40 | 
 41 |     static HeaderedScrollViewer()
 42 |     {
 43 |         TargetHeaderProperty.Changed.Subscribe(x =>
 44 |             HandleTargetHeaderChanged(x.Sender, x.NewValue.GetValueOrDefault() ?? string.Empty));
 45 |     }
 46 |     
 47 |     /// <summary>
 48 |     /// Get TextBlocks which are marked as header text.
 49 |     /// </summary>
 50 |     /// <param name="scrollViewer">A ScrollViewer that has StackPanel for its contents and the StackPanel has headers inside.</param>
 51 |     /// <param name="targetHeader">Classname for header text mark.</param>
 52 |     /// <returns>A lists of Header TextBlock. If nothing found or scrollViewer does not have StackPanel for its content, return null.</returns>
 53 |     private static IEnumerable<TextBlock>? GetHeaderTextBlocks(ScrollViewer scrollViewer, string targetHeader)
 54 |     {
 55 |         if (scrollViewer.Content is StackPanel stackPanel)
 56 |         {
 57 |             return stackPanel.Children
 58 |                 .Where(p => p is TextBlock textBlock && textBlock.Classes.Contains(targetHeader))
 59 |                 .Cast<TextBlock>();
 60 |         }
 61 | 
 62 |         return null;
 63 |     }
 64 | 
 65 |     
 66 |     private static void HandleTargetHeaderChanged(IAvaloniaObject element, string value)
 67 |     {
 68 |         if (element is ScrollViewer scrollViewer)
 69 |         {
 70 |             if (!string.IsNullOrEmpty(value))
 71 |             {
 72 |                 // Add non-null value
 73 |                 scrollViewer.AddHandler(ScrollViewer.ScrollChangedEvent, Handler);
 74 |             }
 75 |             else
 76 |             {
 77 |                 // remove prev value
 78 |                 scrollViewer.RemoveHandler(ScrollViewer.ScrollChangedEvent, Handler);
 79 |             }
 80 |         }
 81 | 
 82 |         // Executed when the ScrollViewer scroll changed.
 83 |         void Handler(object? s, ScrollChangedEventArgs e)
 84 |         {
 85 |             // Get header TextBlocks in scrollViewer if _headerTexts is null
 86 |             if (_headerTexts == null)
 87 |             {
 88 |                 var textEnumerables = GetHeaderTextBlocks(scrollViewer, value);
 89 |                 _headerTexts = textEnumerables != null ? new List<TextBlock>(textEnumerables) : null;
 90 |             }
 91 |             
 92 |             // Find the current header TextBlock which meets the condition.
 93 |             var currentHeaderTextBlock = _headerTexts?.LastOrDefault(p =>
 94 |             {
 95 |                 var transform = p.TransformToVisual(scrollViewer);
 96 |                 double y = new Point().Transform(transform ?? Matrix.Identity).Y;
 97 | 
 98 |                 return y <= -p.Bounds.Height;
 99 |             });
100 |             string? currentHeaderText = currentHeaderTextBlock?.Text;
101 |                     
102 |             SetCurrentHeaderText(scrollViewer, currentHeaderText);
103 |         }
104 |     }
105 | }


--------------------------------------------------------------------------------
/HeaderedScrollViewer/Views/MainWindow.axaml:
--------------------------------------------------------------------------------
 1 | <Window xmlns="https://github.com/avaloniaui"
 2 |         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 3 |         xmlns:vm="using:HeaderedScrollViewer.ViewModels"
 4 |         xmlns:local="using:HeaderedScrollViewer.Views"
 5 |         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 6 |         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 7 |         mc:Ignorable="d" Width="320" Height="400"
 8 |         x:Class="HeaderedScrollViewer.Views.MainWindow"
 9 |         x:CompileBindings="True"
10 |         x:DataType="vm:MainWindowViewModel"
11 |         Icon="/Assets/avalonia-logo.ico"
12 |         Title="HeaderedScrollViewer">
13 |     <Window.Styles>
14 |         <Style Selector="TextBlock.main-header">
15 |             <Setter Property="FontSize" Value="32"/>
16 |             <Setter Property="FontWeight" Value="Bold"/>
17 |         </Style>
18 |         <Style Selector="TextBlock.header">
19 |             <Setter Property="FontSize" Value="24"/>
20 |             <Setter Property="FontWeight" Value="DemiBold"/>
21 |         </Style>
22 |     </Window.Styles>
23 | 
24 |     <Design.DataContext>
25 |         <vm:MainWindowViewModel/>
26 |     </Design.DataContext>
27 | 
28 |     <DockPanel Margin="12">
29 |         <!-- Set Text binding's TargetNullValue as the first header text. -->
30 |         <TextBlock DockPanel.Dock="Top" 
31 |                    Classes="main-header"
32 |                    Text="{Binding #sv.(local:HeaderedScrollViewer.CurrentHeaderText), TargetNullValue='Header 1'}"
33 |                    Margin="0,0,0,8"/>
34 |         
35 |         <ScrollViewer x:Name="sv"
36 |                       HorizontalScrollBarVisibility="Disabled" 
37 |                       local:HeaderedScrollViewer.TargetHeader="header">
38 |             <StackPanel Orientation="Vertical" Spacing="12">
39 |                 <!-- No header text for first header; the CurrentHeaderText will be null at this position. -->
40 |                 <Button>Header 1 Item</Button>
41 |                 
42 |                 <TextBlock Classes="header">Header 2</TextBlock>
43 |                 <ComboBox SelectedIndex="0">
44 |                     <ComboBoxItem>Header 2 Item - 1</ComboBoxItem>
45 |                     <ComboBoxItem>Header 2 Item - 2</ComboBoxItem>
46 |                     <ComboBoxItem>Header 2 Item - 3</ComboBoxItem>
47 |                 </ComboBox>
48 |                 
49 |                 <TextBlock Classes="header">Header 3</TextBlock>
50 |                 <TextBox Watermark="Header 3 Item"/>
51 |                 
52 |                 <TextBlock Classes="header">Header 4</TextBlock>
53 |                 <StackPanel Orientation="Vertical" HorizontalAlignment="Left" Spacing="8">
54 |                     <Ellipse Fill="Red" Width="60" Height="60" HorizontalAlignment="Left"/>
55 |                     <Polygon Fill="Blue" Points="30,0 0,60 60,60" HorizontalAlignment="Left"/>
56 |                     <Rectangle Fill="Orange" Width="60" Height="120" HorizontalAlignment="Left"/>
57 |                 </StackPanel>
58 |             </StackPanel>
59 |         </ScrollViewer>
60 |     </DockPanel>
61 | </Window>
62 | 


--------------------------------------------------------------------------------
/HeaderedScrollViewer/Views/MainWindow.axaml.cs:
--------------------------------------------------------------------------------
 1 | using Avalonia.Controls;
 2 | 
 3 | namespace HeaderedScrollViewer.Views
 4 | {
 5 |     public partial class MainWindow : Window
 6 |     {
 7 |         public MainWindow()
 8 |         {
 9 |             InitializeComponent();
10 |         }
11 |     }
12 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # HeaderedScrollViewer
  2 | 
  3 | ![A working screenshot](https://user-images.githubusercontent.com/63503910/179910832-e302c691-2809-4c33-ab40-90e490133da3.gif)
  4 | 
  5 | Avalonia Attached Property for showing current header in the ScrollViewer.
  6 | 
  7 | ## How to use
  8 | 
  9 | 1. Add the file `HeaderedScrollViewer.cs` file into your project.
 10 | 2. Make element hierarchy as:
 11 | - ScrollViewer
 12 |   - StackPanel (Orientation="Vertical")
 13 |     - // TextBlock (Classes="header") (*header 1) (the comment is intended)
 14 |     - Content for header 1
 15 |     - TextBlock (Classes="header") (*header 2)
 16 |     - Content for header 2
 17 |     - TextBlock (Classes="header") (*header 3)
 18 |     - Content for header 3
 19 |     
 20 | ```xaml
 21 | <ScrollViewer x:Name="sv"
 22 |               HorizontalScrollBarVisibility="Disabled" 
 23 |               >
 24 |     <StackPanel Orientation="Vertical" Spacing="12">
 25 |         <!-- No header text for first header; the CurrentHeaderText will be null at this position. -->
 26 |         <Button>Header 1 Item</Button>
 27 |         
 28 |         <TextBlock Classes="header">Header 2</TextBlock>
 29 |         <ComboBox SelectedIndex="0">
 30 |             <ComboBoxItem>Header 2 Item - 1</ComboBoxItem>
 31 |             <ComboBoxItem>Header 2 Item - 2</ComboBoxItem>
 32 |             <ComboBoxItem>Header 2 Item - 3</ComboBoxItem>
 33 |         </ComboBox>
 34 |         
 35 |         <TextBlock Classes="header">Header 3</TextBlock>
 36 |         <TextBox Watermark="Header 3 Item"/>
 37 |         
 38 |         <TextBlock Classes="header">Header 4</TextBlock>
 39 |         <StackPanel Orientation="Vertical" HorizontalAlignment="Left" Spacing="8">
 40 |             <Ellipse Fill="Red" Width="60" Height="60" HorizontalAlignment="Left"/>
 41 |             <Polygon Fill="Blue" Points="30,0 0,60 60,60" HorizontalAlignment="Left"/>
 42 |             <Rectangle Fill="Orange" Width="60" Height="120" HorizontalAlignment="Left"/>
 43 |         </StackPanel>
 44 |     </StackPanel>
 45 | </ScrollViewer>
 46 | ```
 47 | 
 48 | 3. Attach `HeaderedScrollViewer` to the ScrollViewer and set its TargetHeader as the classname that your marked your header TextBlock. I set the classname as `header`.
 49 | 
 50 | ```xaml
 51 | <ScrollViewer ... local:HeaderedScrollViewer.TargetHeader="header"> ...
 52 | ```
 53 | 
 54 | 4. Use `CurrentHeaderText` property in other controls, such as 
 55 | ```xaml
 56 | <TextBlock Text="{Binding #sv.(local:HeaderedScrollViewer.CurrentHeaderText), TargetNullValue='Header 1'}"/> <!-- set the TargetNullValue as the first header that intentionally deleted -->
 57 | ```
 58 | 
 59 | ## Example
 60 | 
 61 | The source code is in solution file.
 62 | 
 63 | `HeaderedScrollViewer.cs` (inside `View` folder)
 64 | 
 65 | `MainWindow.xaml` (inside `View` folder)
 66 | ```xaml
 67 | <Window xmlns="https://github.com/avaloniaui"
 68 |         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 69 |         xmlns:vm="using:HeaderedScrollViewer.ViewModels"
 70 |         xmlns:local="using:HeaderedScrollViewer.Views"
 71 |         Width="320" Height="400"
 72 |         x:Class="HeaderedScrollViewer.Views.MainWindow"
 73 |         x:CompileBindings="True"
 74 |         x:DataType="vm:MainWindowViewModel"
 75 |         Icon="/Assets/avalonia-logo.ico"
 76 |         Title="HeaderedScrollViewer">
 77 |     <Window.Styles>
 78 |         <Style Selector="TextBlock.main-header">
 79 |             <Setter Property="FontSize" Value="32"/>
 80 |             <Setter Property="FontWeight" Value="Bold"/>
 81 |         </Style>
 82 |         <Style Selector="TextBlock.header">
 83 |             <Setter Property="FontSize" Value="24"/>
 84 |             <Setter Property="FontWeight" Value="DemiBold"/>
 85 |         </Style>
 86 |     </Window.Styles>
 87 | 
 88 |     <Design.DataContext>
 89 |         <vm:MainWindowViewModel/>
 90 |     </Design.DataContext>
 91 | 
 92 |     <DockPanel Margin="12">
 93 |         <!-- Set Text binding's TargetNullValue as the first header text. -->
 94 |         <TextBlock DockPanel.Dock="Top" 
 95 |                    Classes="main-header"
 96 |                    Text="{Binding #sv.(local:HeaderedScrollViewer.CurrentHeaderText), TargetNullValue='Header 1'}"
 97 |                    Margin="0,0,0,8"/>
 98 |         
 99 |         <ScrollViewer x:Name="sv"
100 |                       HorizontalScrollBarVisibility="Disabled" 
101 |                       local:HeaderedScrollViewer.TargetHeader="header"
102 |             <StackPanel Orientation="Vertical" Spacing="12">
103 |                 <!-- No header text for first header; the CurrentHeaderText will be null at this position. -->
104 |                 <Button>Header 1 Item</Button>
105 |                 
106 |                 <TextBlock Classes="header">Header 2</TextBlock>
107 |                 <ComboBox SelectedIndex="0">
108 |                     <ComboBoxItem>Header 2 Item - 1</ComboBoxItem>
109 |                     <ComboBoxItem>Header 2 Item - 2</ComboBoxItem>
110 |                     <ComboBoxItem>Header 2 Item - 3</ComboBoxItem>
111 |                 </ComboBox>
112 |                 
113 |                 <TextBlock Classes="header">Header 3</TextBlock>
114 |                 <TextBox Watermark="Header 3 Item"/>
115 |                 
116 |                 <TextBlock Classes="header">Header 4</TextBlock>
117 |                 <StackPanel Orientation="Vertical" HorizontalAlignment="Left" Spacing="8">
118 |                     <Ellipse Fill="Red" Width="60" Height="60" HorizontalAlignment="Left"/>
119 |                     <Polygon Fill="Blue" Points="30,0 0,60 60,60" HorizontalAlignment="Left"/>
120 |                     <Rectangle Fill="Orange" Width="60" Height="120" HorizontalAlignment="Left"/>
121 |                 </StackPanel>
122 |             </StackPanel>
123 |         </ScrollViewer>
124 |     </DockPanel>
125 | </Window>
126 | 
127 | ```
128 | 
129 | The result is same as the above GIF file.
130 | 
131 | ### Usage Example
132 | 
133 | [Todo.Avalonia](https://github.com/stripe2933/Todo.Avalonia)
134 | ![Todo.Avalonia](https://user-images.githubusercontent.com/63503910/180939386-40ff8574-cfb2-4260-9821-e0ccfa9a700f.gif)
135 | 


--------------------------------------------------------------------------------