Setting Canvas Background As FlipView Selected Image In UWP

Before reading this article, please go through the article's links, given below-

1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
2. How To Use FlipView Control In Universal Application Development With XAML And C#

Reading this article, you can learn, how to set the canvas background as Flipview selected image, using FlipView Control and Canvas Control in Universal Windows apps development with XAML and Visual C#.

The following important tools required to develop UWP are-

1. Windows 10 (Recommended).
2. Visual Studio 2015 Community Edition (It is a free software, available online).

Now, we can discuss step by step app development.

Step1- Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank app -> Give the suitable name for your app (FVimgtoCanBG) ->OK.



Step 2- Choose the Target and minimum platform version your Windows Universal Application will support. Afterwards, the project creates App.xaml and MainPage.xaml.



Step 3- Open (double click) the file MainPage.xaml in the Solution Explorer and click the Toolbox tab on the left to open the list of common XAML controls. Expand common XAML Controls and drag the required control to the middle of the design canvas.

After this, drag and drop the FlipView control. You have to change the name property. In Mainpage.Xaml, insert the code, given below, to FlipView tag-

<FlipView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Image Source="{Binding}" Stretch="UniformToFill" /> </Grid>
    </DataTemplate>
</FlipView.ItemTemplate>
</FlipView>

Step 4- Create a new folder in your project as Images and add some images to Images folder.



Step 5 - Add the Canvas control and change the name property.



Step 6- Add the button control, change the name and the content property.



Add TextBlock control, change the name and text property.



Step 7 - Double click the button control, which automatically creates click event method. 



Step 8- Add the code, given below, in constructor method (MainPage() method) in MainPage.xaml.cs. This code is used to set the image resource path for Flip View Control.

String path = Directory.GetCurrentDirectory() + @"\Images";
FVtest.ItemsSource = Directory.GetFiles(path).Select(p => "ms-appx:///" + p);

Now, the Constructor method looks like-  

public MainPage()
{
    this.InitializeComponent();
    String path = Directory.GetCurrentDirectory() + @ "\Images";
    FVtest.ItemsSource = Directory.GetFiles(path).Select(p => "ms-appx:///" + p);
}

Step 9- Add the code, given below, in btnSet_Click() method (MainPage() method) in MainPage.xaml.cs. The code, given below, is used to set the background image for Canvas control-

private void btnSet_Click(object sender, RoutedEventArgs e)
{
    ImageBrush im = new ImageBrush();
    var ima = FVCan.SelectedItem;
    im.ImageSource = new BitmapImage(new Uri(ima.ToString(), UriKind.RelativeOrAbsolute));
    cantest.Background = im;
}

Step 10 - Deploy your app in Local Machine and the output of the FVimgtoCanBG app is displayed.

 

Before clicking the SetImage button, the screenshot will look like-

After clicking the SetImage button, the screenshot will look like-

Summary

Now, you have successfully created and tested your canvas background as Flipview selected image, using FlipView Control and Canvas Control in Visual C# - UWP environment.