CODEWITHSUNDEEP
c#windows-phone-8.1
I love coding
I love coding

Reputation: 1191

Slide image with swipe handler in Windows Phone 8.1

I have created some images in Adobe PhotoShop to introduce the user to an application in WP 8.1 in C#. I want to display and intro Page, only if the user's settings is empty (it is a very simply but good boolean condition for my case).

So when the user open for the first time the application, the first image will be opened, if the user swipe to the left, the second one will appear, in case swipe to the right, nothing should happen, because the image -1 doesn't exist:

public int getPage (int newPage)
{
    if (0 <= newPage <= N_IMAGES) {
        return newPage;
    }
    if (newPage < 0) {
        return 0;
    } else {
        return N_IMAGES;
    }
}

My images are named: intro1.png, intro2.png, intro3.png and intro4.png. So to summary it: Open application, first intro, swipe left, second intro....

  1. How Can I make this intro in WP 8.1 ? So the intro is like a slide show, where the images changed on swipe left/right.

  2. For the last images, is possible to add over it, some button, not displayed, but clickable ?

Thank you in advance for your help.

UPDATE x2 (WORKS)

Hi, I finally let it works; the problem was due to the fact that the images, must be added in a particular way, and not just copy and past.

<Grid Name="introgrid">
    <FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">

        <FlipViewItem Name="first" Width="395">
            <FlipViewItem.Background>
                <ImageBrush ImageSource="Assets/intro1.png"/>
            </FlipViewItem.Background>

        </FlipViewItem>
        <FlipViewItem Name="second" Width="395">
            <FlipViewItem.Background>
                <ImageBrush ImageSource="Assets/intro2.png"/>
            </FlipViewItem.Background>
        </FlipViewItem>

        <FlipViewItem Name="third">
            <FlipViewItem.Background>
                <ImageBrush ImageSource="Assets/intro3.png"/>
            </FlipViewItem.Background>
        </FlipViewItem>
        <FlipViewItem Name="final" Width="395">
            <FlipViewItem.Background>
                <ImageBrush ImageSource="Assets/3.jpg"/>
            </FlipViewItem.Background>
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
                <Image Source="Assets/Face.png" Width="180" />
                <TextBlock Text="Se hai già le credenziali:" FontSize="25" Margin="0,15,0,0" HorizontalAlignment="Center"/>
                <Button x:Name="login" Content="Accedi" HorizontalAlignment="Center" Margin="0,15,0,0" FontSize="22" Background="#FF0DACE9" Click="login_action" />
                <TextBlock Text="Se non ti sei ancora registrato:" FontSize="25" Margin="0,15,0,0" HorizontalAlignment="Center"/>
                <Button x:Name="register" Content="Registrati" HorizontalAlignment="Center" Margin="0,15,0,0" FontSize="22" Background="#FF0DACE9" Click="register_action" />
                <TextBlock Text="Hai qualche domanda ?" FontSize="25" Margin="0,15,0,0" HorizontalAlignment="Center"/>
                <Button x:Name="info" Content="Sito web" HorizontalAlignment="Center" Margin="0,15,0,0" FontSize="22" Background="#FF0DACE9" Foreground="White" Click="info_action" />
            </StackPanel>




        </FlipViewItem>
    </FlipView>
</Grid>

Upvotes: 0

Views: 845

Answers (1)

H77
H77

Reputation: 5967

The FlipView control is probably what you need.

You can have a setting in the app local storage that will tell you when this view has been displayed and on next load not show it if the setting exists.

More info on FlipView https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781233.aspx

Upvotes: 3

Related Questions