WPF锚点页面，点击跳转到指定区域
xaml页面代码
bash
<!--职业史、既往史、生育史、家族史、症状问卷 ，汇总页面，没得Tab -->
<UserControl x:Class="Module.PEIS.ZhiYeBingTiJian.View.PersonHistoryGater"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Module.PEIS.ZhiYeBingTiJian.View"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid x:Name="MyGrid" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<!-- 锚点导航栏 -->
<Border Grid.Row="0" Name="daohangLanMu" Background="#f0f0f0" BorderBrush="#cccccc" BorderThickness="0,0,1,0">
<StackPanel Margin="10" Orientation="Horizontal">
<TextBlock Text="页面导航" FontWeight="Bold" FontSize="16" Margin="0,0,0,15"/>
<Button Content="顶部" Click="ScrollToTop_Click" Margin="0,0,0,5" Padding="5"/>
<Button Content="第一部分" Click="ScrollToSection1_Click" Margin="0,0,0,5" Padding="5"/>
<Button Content="第二部分" Click="ScrollToSection2_Click" Margin="0,0,0,5" Padding="5"/>
<Button Content="第三部分" Click="ScrollToSection3_Click" Margin="0,0,0,5" Padding="5"/>
<Button Content="底部" Click="ScrollToBottom_Click" Margin="0,0,0,5" Padding="5"/>
</StackPanel>
</Border>
<!-- 内容区域 -->
<Grid Grid.Row="1" Background="Aqua" Name="myBorderContent" >
<ScrollViewer x:Name="MainScrollViewer" VerticalScrollBarVisibility="Auto" VerticalAlignment="Top" >
<StackPanel Margin="20" >
<!-- 顶部锚点 -->
<TextBlock x:Name="TopAnchor" Text="页面顶部" FontSize="24" FontWeight="Bold" Margin="0,0,0,20"/>
<TextBlock Text="欢迎使用WPF锚点页面示例" FontSize="16" Margin="0,0,0,30" TextWrapping="Wrap"/>
<!-- 第一部分 -->
<Border x:Name="Section1" Background="#e3f2fd" Padding="15" Margin="0,0,0,20" CornerRadius="5">
<StackPanel>
<TextBlock Text="第一部分" FontSize="20" FontWeight="Bold" Margin="0,0,0,10"/>
<TextBlock Text="这是第一部分的内容。WPF提供了强大的布局和图形功能，可以创建丰富的用户界面。"
TextWrapping="Wrap" Margin="0,0,0,10"/>
<TextBlock Text="使用锚点功能可以方便地在长页面中导航到特定部分。"
TextWrapping="Wrap" Height="1800" />
</StackPanel>
</Border>
<!-- 第二部分 -->
<Border x:Name="Section2" Background="#f3e5f5" Padding="15" Margin="0,0,0,20" CornerRadius="5">
<StackPanel>
<TextBlock Text="第二部分" FontSize="20" FontWeight="Bold" Margin="0,0,0,10"/>
<TextBlock Text="这是第二部分的内容。WPF支持数据绑定、样式、模板等高级功能。"
TextWrapping="Wrap" Margin="0,0,0,10"/>
<TextBlock Text="通过使用ScrollViewer和动画，我们可以实现平滑的滚动效果。"
TextWrapping="Wrap" Height="800" />
</StackPanel>
</Border>
<!-- 第三部分 -->
<Border x:Name="Section3" Background="#e8f5e9" Padding="15" Margin="0,0,0,20" CornerRadius="5">
<StackPanel>
<TextBlock Text="第三部分" FontSize="20" FontWeight="Bold" Margin="0,0,0,10"/>
<TextBlock Text="这是第三部分的内容。WPF还支持3D图形、动画和多媒体功能。"
TextWrapping="Wrap" Margin="0,0,0,10"/>
<TextBlock Text="锚点功能对于创建长文档或帮助页面特别有用。"
TextWrapping="Wrap" Height="800"/>
</StackPanel>
</Border>
<!-- 底部锚点 -->
<TextBlock x:Name="BottomAnchor" Text="页面底部" FontSize="24" FontWeight="Bold" Margin="0,20,0,0"/>
<TextBlock Text="感谢您使用本示例程序！" FontSize="16" Margin="0,10,0,0"/>
</StackPanel>
</ScrollViewer>
</Grid>
<Border Grid.Row="2" Height="1" Background="Transparent" />
</Grid>
</UserControl>
csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Module.PEIS.ZhiYeBingTiJian.View
{
/// <summary>
/// 职业史、既往史、生育史、家族史、症状问卷。
/// 汇总页面，
/// PersonHistoryGater.xaml 的交互逻辑
/// </summary>
/// <remarks>
/// 创建时间：2025-12-24 18:32:36，王浩力
/// </remarks>
public partial class PersonHistoryGater : UserControl
{
public PersonHistoryGater()
{
InitializeComponent();
this.Loaded += (s, e) => {
//var ggg = this.MyGrid.ActualHeight;
//var gggxx = MainScrollViewer.ViewportHeight;
//var nnn = myBorderContent.ActualHeight;
//myBorderContent.MaxHeight = SystemParameters.WorkArea.Height- daohangLanMu.ActualHeight-200;
// MainScrollViewer.MaxHeight = SystemParameters.WorkArea.Height- daohangLanMu.ActualHeight-358;
/*
// 主屏幕工作区高度（DIP）
double workHeightDip = SystemParameters.WorkArea.Height;
*/
};
}
// 滚动到顶部
private void ScrollToTop_Click(object sender, RoutedEventArgs e)
{
ScrollToElement(TopAnchor);
}
// 滚动到第一部分
private void ScrollToSection1_Click(object sender, RoutedEventArgs e)
{
ScrollToElement(Section1);
}
// 滚动到第二部分
private void ScrollToSection2_Click(object sender, RoutedEventArgs e)
{
ScrollToElement(Section2);
}
// 滚动到第三部分
private void ScrollToSection3_Click(object sender, RoutedEventArgs e)
{
ScrollToElement(Section3);
}
// 滚动到底部
private void ScrollToBottom_Click(object sender, RoutedEventArgs e)
{
ScrollToElement(BottomAnchor);
}
// 通用滚动方法
private void ScrollToElement(FrameworkElement element)
{
//element.BringIntoView();
//return;
//element.VerticalOffset
//var window = Window.GetWindow(element);
GeneralTransform transform = element.TransformToAncestor(myBorderContent);
//第三部分不准
// 计算元素相对于ScrollViewer的位置
//GeneralTransform transform = element.TransformToAncestor(MainScrollViewer);
Point position = transform.Transform(new Point(0, 0));
////考虑当前滚动条位置
//var offset = MainScrollViewer.VerticalOffset;
//double newPosition = position.Y - offset;
double newPosition = MainScrollViewer.VerticalOffset+ position.Y ;
// 平滑滚动到目标位置（直接设置Offset是瞬时滚动，如需平滑可加动画）
MainScrollViewer.ScrollToVerticalOffset(newPosition);
//MainScrollViewer.ScrollToVerticalOffset(position.Y);
//// 创建动画
//DoubleAnimation animation = new DoubleAnimation
//{
// From = MainScrollViewer.VerticalOffset,
// To = position.Y,
// Duration = new Duration(TimeSpan.FromSeconds(0.5)),
// EasingFunction = new CubicEase { EasingMode = EasingMode.EaseOut }
//};
// 开始动画
//MainScrollViewer.BeginAnimation(ScrollViewer.VerticalOffsetProperty, animation);
}
}
}