滾動條是項目當中經常用到的一個控件，大部分對外項目都有外觀的需求，因此需要自定義，文中主要是針對一段動態的狀態數據進行展示，并保證數據始終在最新一條，就是需要滾動條滾動到底部。

1，xaml中引入

 <ItemsControl Grid.Row="1" Grid.Column="0" ItemsSource="{Binding ProcessList}" ><ItemsControl.ItemTemplate><DataTemplate><!-- 綁定到數組的每個元素 --><TextBlock Text="{Binding }" Foreground="#fff" Margin="4"/></DataTemplate></ItemsControl.ItemTemplate><ItemsControl.Template><ControlTemplate TargetType="ItemsControl"><ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Auto"  Loaded="ScrollViewer_Loaded" ><ItemsPresenter/></ScrollViewer></ControlTemplate></ItemsControl.Template></ItemsControl>

也可以直接將ScrollViewer放在所用控件的最外層。

VerticalScrollBarVisibility="Auto" 設置為auto可實現超過區域高度自動展示滾動條。

2，具體樣式，放到資源中

 <Style TargetType="ScrollBar"><Setter Property="Width" Value="8"/><!--設置滾動條寬度--> <Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ScrollBar"><Grid Background="#212222 " Width="14" SnapsToDevicePixels="true" ><Grid.RowDefinitions><!--<RowDefinition Height="Auto"/>--><RowDefinition Height="*"/><!--<RowDefinition Height="Auto"/>--></Grid.RowDefinitions><!--減少按鈕--> <!--<RepeatButton Grid.Row="0" Command="ScrollBar.LineUpCommand" Content="^" Width="10" Height="10"/>--><!--軌道和滑塊--><Track Grid.Row="1" Name="PART_Track"  Width="14" IsDirectionReversed="True"><Track.Thumb><Thumb><Thumb.Template><ControlTemplate><Border CornerRadius="2"><Rectangle  Fill="#82E4E4" RadiusX="2" RadiusY="2" Width="6"/><!--<Thumb Width="6" Background="#82E4E4" BorderThickness="0" />--></Border><!--<Rectangle  Fill="#82E4E4" Width="8"/>--></ControlTemplate></Thumb.Template></Thumb></Track.Thumb><Track.DecreaseRepeatButton><RepeatButton Command="ScrollBar.PageUpCommand" Opacity="0"/></Track.DecreaseRepeatButton><Track.IncreaseRepeatButton><RepeatButton Command="ScrollBar.PageDownCommand" Opacity="0"/></Track.IncreaseRepeatButton></Track><!--增加按鈕--> <!--<RepeatButton Grid.Row="2" Command="ScrollBar.LineDownCommand" Content="v"  Width="10" Height="10"/>--></Grid></ControlTemplate></Setter.Value></Setter></Style>

設置樣式時候注意點：

IsDirectionReversed="True"? ?設置為true是保證滾動滑塊隨著鼠標向下滑動，為false的時候正好相反。

軌道的顏色寬度設置等，直接在Grid上面設置就好。

滑塊這里用了個Rectangle，可以設置填充色，圓角、寬度等

我這邊不需要上下按鈕我就注釋掉了。

3，滾動條始終保持在底部，在xaml.cs中實現

需要監聽 ProcessList 集合的變化，并在每次添加新項后滾動到 ScrollViewer 的底部。

 public partial class F0Procedure : Page{public F0ProcedureViewModel F0ProcedureViewModel {  get; set; }private ScrollViewer _scrollViewer;public F0Procedure(){InitializeComponent();F0ProcedureViewModel = new F0ProcedureViewModel();this.DataContext = F0ProcedureViewModel;((INotifyCollectionChanged)F0ProcedureViewModel.ProcessList).CollectionChanged += F0Procedure_CollectionChanged;}private void F0Procedure_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e){if (e.Action == NotifyCollectionChangedAction.Add && _scrollViewer != null){Application.Current.Dispatcher.Invoke(() =>{Console.WriteLine(ScrollViewer.ExtentHeightProperty);_scrollViewer.ScrollToVerticalOffset(_scrollViewer.ExtentHeight);});}}private void ScrollViewer_Loaded(object sender, RoutedEventArgs e){_scrollViewer = sender as ScrollViewer;}}

我這的ProcessList是委托回調更新的，

[ObservableProperty]
private int _progressValue;public void  UpdateExecutionProgress(string process)
{Application.Current.Dispatcher.BeginInvoke(new Action(() => ProcessList.Add(process)));
}

可以用?DispatcherTimer模擬，博客里也有講過，這邊都是引用的CommunityToolKit MVVM庫。

4，最終結果

用到哪，學到哪，今天又是滿滿收獲的一天。?