WPF 新手指引弹窗

新手指引弹窗介绍

    我们在第一次使用某个软件时，通常会有一个“新手指引”教学引导。WPF实现“新手指引”非常方便，且非常有趣。接下来我们就开始制作一个简单的”新手指引”(代码简单易懂，便于移植)，引用到我们的项目中又可添加一些光彩。

代码实现

新建“新手指引”窗体

<Window x:Class="BeginerGuideDemo.GuideWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BeginerGuideDemo"
        mc:Ignorable="d"    WindowStyle="None" AllowsTransparency="True" Background="{x:Null}" 
        Title="新手指引" Height="900" Width="1440"  Loaded="Window_Loaded">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <!-- 无表头TabControl样式 -->
                    <Style x:Key="noTitleTabControlStyle" TargetType="{x:Type TabControl}">
                        <Setter Property="ItemContainerStyle">
                            <Setter.Value>
                                <Style TargetType="{x:Type TabItem}">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </Style>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="BorderThickness" Value="0"></Setter>
                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Border x:Name="backBorder" Background="#000000" Opacity="0.5" CornerRadius="6" Margin="10"/>
        <TabControl Name="tabControl" SelectionChanged="tabControl_SelectionChanged"  Style="{StaticResource noTitleTabControlStyle}" Background="Transparent" Margin="0">
            <TabItem>
                <Border x:Name="bdWelcome" Width="400" Height="274"  CornerRadius="6" >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="80"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="80"/>
                        </Grid.RowDefinitions>
                        <Image Grid.RowSpan="3"  Source="pack://application:,,,/Images/bg_guide_L.png"/>
                        <TextBlock  Text="跳过指引"  HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,15,5" FontSize="12" Cursor="Hand"
                                  MouseLeftButtonDown="SkipGuide_MouseLeftButtonDown" />
                        <TextBlock Grid.Row="1" FontSize="18" Text="欢迎使用宇宙教学系统" VerticalAlignment="Top" HorizontalAlignment="Center"/>
                        <RichTextBox  Grid.Row="1" HorizontalAlignment="Center"  VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" BorderThickness="0"   Background="Transparent">
                            <FlowDocument TextAlignment="Center" >
                                <Paragraph >
                                    <Run   FontSize="16" Text="让我们一起探究新的世界吧~"></Run>
                                </Paragraph>
                            </FlowDocument>
                        </RichTextBox>
                        <Button Grid.Row="2" Width="128" Height="40"  Content="点击继续" VerticalAlignment="Center" HorizontalAlignment="Center"
                      Click="btnNext_Click" />
                    </Grid>
                </Border>
            </TabItem>
            <TabItem>
                <Border x:Name="bdChangeBook" Width="400" Height="215" Margin="332,46,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" CornerRadius="6" >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="80"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="80"/>
                        </Grid.RowDefinitions>

                        <Image Grid.RowSpan="3"  Source="pack://application:,,,/Images/bg_guide_L.png"/>
                        <TextBlock  Text="跳过指引"  HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,60,5" FontSize="12" Cursor="Hand" 
                         MouseLeftButtonDown="SkipGuide_MouseLeftButtonDown" />
                        <RichTextBox  Grid.Row="1"  HorizontalAlignment="Center"  VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" BorderThickness="0"   Background="Transparent">
                            <FlowDocument TextAlignment="Center" >
                                <Paragraph >
                                    <Run   FontSize="16" Text="点击"></Run>
                                    <Run   FontSize="16" Text="更换教材"></Run>
                                    <Run   FontSize="16" Text="，可切换学段学科"></Run>
                                </Paragraph>
                            </FlowDocument>
                        </RichTextBox>
                        <Button Grid.Row="2" Width="128" Height="40"  Content="退出" VerticalAlignment="Center" HorizontalAlignment="Center"
                      Click="EndGuid_Click" />
                    </Grid>
                </Border>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

主窗体使用“新手指引”弹窗

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            new GuideWindow(txtbStudy).ShowDialog();
        }

实例链接：https://download.csdn.net/download/lvxingzhe3/88683465