XFEToolBox

<UserControl x:Class="XFEToolBox.WpfCore.Controls.TutorialOverlay"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:controls="clr-namespace:XFEToolBox.WpfCore.Controls"
             Background="{x:Null}" Focusable="True" IsTabStop="True"
             SnapsToDevicePixels="True" UseLayoutRounding="True"
             PreviewKeyDown="TutorialOverlay_PreviewKeyDown">
    <Grid x:Name="OverlayRoot" Background="{x:Null}" ClipToBounds="True">
        <Canvas x:Name="OverlayCanvas" Background="{x:Null}">
            <!-- 偶奇填充产生真正的透明高亮孔，允许按步骤把操作传给下层控件。 -->
            <Path x:Name="DimPath" Fill="#B24A4A60" Focusable="False">
                <Path.Data>
                    <GeometryGroup FillRule="EvenOdd">
                        <RectangleGeometry x:Name="OuterGeometry"/>
                        <RectangleGeometry x:Name="SpotlightGeometry" RadiusX="14" RadiusY="14"/>
                    </GeometryGroup>
                </Path.Data>
            </Path>

            <!-- 不允许操作目标时，仅封住透明孔；周围区域由 DimPath 负责拦截。 -->
            <Border x:Name="TargetBlocker" Background="#01000000" Visibility="Collapsed"/>

            <Border x:Name="SpotlightBorder" IsHitTestVisible="False" Visibility="Collapsed"
                    BorderBrush="White" BorderThickness="2" CornerRadius="14">
                <Border.Effect>
                    <DropShadowEffect x:Name="SpotlightShadow" Color="#9898E7" BlurRadius="24"
                                      ShadowDepth="0" Opacity="0.92"/>
                </Border.Effect>
            </Border>

            <Border x:Name="CalloutCard" Width="350" Padding="20,18,20,17"
                    Background="{DynamicResource ToolSurfaceBrush}"
                    BorderBrush="#BDBDEA" BorderThickness="1" CornerRadius="18"
                    RenderTransformOrigin="0.5,0.5">
                <Border.Effect>
                    <DropShadowEffect Color="#262638" BlurRadius="28" ShadowDepth="8" Opacity="0.30"/>
                </Border.Effect>
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform x:Name="CalloutScale" ScaleX="1" ScaleY="1"/>
                        <TranslateTransform x:Name="CalloutTranslate"/>
                    </TransformGroup>
                </Border.RenderTransform>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Border Padding="9,4" Background="{DynamicResource ToolAccentSoftBrush}" CornerRadius="9">
                            <StackPanel Orientation="Horizontal">
                                <Ellipse Width="7" Height="7" Margin="0,0,6,0" Fill="{DynamicResource MainColor}"/>
                                <TextBlock Text="使用教程" FontSize="10" FontWeight="SemiBold"
                                           Foreground="{DynamicResource MainColor}"/>
                            </StackPanel>
                        </Border>
                        <TextBlock x:Name="StepCounterText" Grid.Column="2" VerticalAlignment="Center"
                                   FontFamily="Cascadia Mono, Consolas" FontSize="10"
                                   Foreground="{DynamicResource ToolTextSecondaryBrush}"/>
                    </Grid>

                    <TextBlock x:Name="TitleText" Grid.Row="1" Margin="0,13,0,0"
                               FontSize="19" FontWeight="Bold"
                               Foreground="{DynamicResource ToolTextPrimaryBrush}"
                               TextWrapping="Wrap"/>

                    <TextBlock x:Name="DescriptionText" Grid.Row="2" Margin="0,7,0,0"
                               FontSize="11.5" LineHeight="20"
                               Foreground="{DynamicResource ToolTextSecondaryBrush}"
                               TextWrapping="Wrap"/>

                    <Border x:Name="HintPanel" Grid.Row="3" Margin="0,13,0,0" Padding="10,8"
                            Background="{DynamicResource ToolAccentSoftBrush}" CornerRadius="10">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="20"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Width="17" Height="17" CornerRadius="8.5" Background="{DynamicResource MainColor}">
                                <TextBlock Text="i" Foreground="White" FontSize="10" FontWeight="Bold"
                                           HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                            <TextBlock x:Name="HintText" Grid.Column="1" VerticalAlignment="Center"
                                       FontSize="10" LineHeight="16" Foreground="{DynamicResource ToolTextPrimaryBrush}"
                                       TextWrapping="Wrap"/>
                        </Grid>
                    </Border>

                    <Grid Grid.Row="4" Height="3" Margin="0,16,0,0" Background="{DynamicResource ToolDividerBrush}">
                        <Border x:Name="ProgressFill" Background="{DynamicResource MainColor}"
                                HorizontalAlignment="Stretch" RenderTransformOrigin="0,0.5" CornerRadius="2">
                            <Border.RenderTransform>
                                <ScaleTransform x:Name="ProgressScale" ScaleX="0"/>
                            </Border.RenderTransform>
                        </Border>
                    </Grid>

                    <Grid Grid.Row="5" Margin="0,15,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Button x:Name="SkipButton" Height="34" MinWidth="0" Padding="4,0"
                                HorizontalAlignment="Left" Background="Transparent" BorderBrush="Transparent"
                                Content="跳过教程" Click="SkipButton_Click"/>
                        <Button x:Name="PreviousButton" Grid.Column="1" Height="34" MinWidth="76" Margin="8,0,0,0"
                                Content="上一步" Click="PreviousButton_Click"/>
                        <Button x:Name="NextButton" Grid.Column="2" Height="34" MinWidth="86" Margin="8,0,0,0"
                                controls:ButtonAssist.IsPrimary="True" Content="下一步" Click="NextButton_Click"/>
                    </Grid>
                </Grid>
            </Border>
        </Canvas>
    </Grid>
</UserControl>