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:

回答1:

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.

来源：https://stackoverflow.com/questions/37925635/template-10get-the-splash-screen-like-the-course-in-mva

标签

xaml

win-universal-app

uwp

template10