Search code examples
xamlwin-universal-appuwptemplate10

Template 10:Get the splash screen like the course in MVA

I just completed the course on template 10 in mva. Now I am working on this app and would like it to have the splash screen like this(of course the logo can be changed). Where should I get started to code(any tutorial)? Or if there's a sample code available.

Screenshots: enter image description here

enter image description here

enter image description here

Solution

  • I think it uses an extended splash screen. The extended splash screen in UWP is the same as it in a Windows 8.1 app. You can start with How to extend the splash screen (XAML), there is a 8.1 sample in this document, and you can also refer to the official UWP Splash screen sample.

    And from your picture, there is a circular ProgressBar, to create such a PrgressBar, there are several methods, for example here you can refer to [UWP] - Circular Progress Bar.

    Update:

    It's quite easy, downloaded your posted project in the comment, there is a usercontrol named "RoundProgressControl", in this usercontrol, you can put a Image inside it like this:

    <Grid x:Name="TheGrid" Width="28" Height="28" Margin="0,0,0,0" Background="Transparent">
    <Path x:Name="ThePath" Fill="Transparent" Stroke="#ff999999" StrokeThickness="4" StrokeDashCap="Flat">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure StartPoint="12,24" x:Name="ThePathFigure">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <ArcSegment x:Name="TheSegment" Size="12,12" IsLargeArc="False" SweepDirection="Clockwise" Point="12,24" />
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Image Source="Assets/E1.png" Width="30" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>

    I put a image source named "E1.png" in the Assets folder of the project, you can replace it with your own image. You can also modify the size of the Image by setting the Width and Height property.