WPF 新手指引弹窗

新手指引弹窗介绍

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

代码实现

新建"新手指引"窗体
cs 复制代码
<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>
主窗体使用"新手指引"弹窗
cs 复制代码
        public MainWindow()
        {
            InitializeComponent();
        }

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

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

相关推荐
somethingGoWay8 小时前
wpf .netcore 导出docx文件
wpf·.netcore
somethingGoWay10 小时前
wpf .netcore 导出pdf文件
pdf·wpf·.netcore
self_myth1 天前
[特殊字符] 深入理解操作系统核心特性:从并发到分布式,从单核到多核的全面解析
windows·macos·wpf·harmonyos
c#上位机1 天前
wpf之TextBlock
c#·wpf
玉面小君3 天前
从 WPF 到 Avalonia 的迁移系列实战篇6:ControlTheme 和 Style区别
c#·wpf·avalonia
c#上位机3 天前
wpf之Border
c#·wpf
SunflowerCoder3 天前
WPF迁移avalonia之图像处理(一)
图像处理·wpf·avalonia
周杰伦fans3 天前
WPF中的DataContext以及常见的绑定方式
wpf
没有bug.的程序员4 天前
Redis 数据结构全面解析:从底层编码到实战应用
java·数据结构·redis·wpf
somethingGoWay4 天前
wpf 自定义输入ip地址的文本框
wpf