Create A Feedback Form UI In UWP

Here are the steps:

Step 1: Firstly, we will create a simple Universal Windows Blank Project in Visual Studio 2015.

Blank App

Step 2: In the Xaml editor define your rows by using the following lines of code.
  1. <Grid.RowDefinitions>  
  2.     <RowDefinition Height="0.15*"></RowDefinition>  
  3.     <RowDefinition Height="0.85*"></RowDefinition>  
  4. </Grid.RowDefinitions>  
After this add border and StackPanel in your application.

Step 3: Add border by using the following lines of code.
  1. <Border Background="Plum" Grid.Row="0">  
  2.     <TextBlock Text="Suggestions Form" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="Salmon" FontWeight="ExtraBlack" />   
  3. </Border>  
Step 4: Similarly, add stack panel in your application which includes all the textboxes and submit button by using the following lines of code.
  1. <StackPanel Grid.Row="1">  
  2.     <TextBox PlaceholderText="First Name" Margin="10"></TextBox>  
  3.     <TextBox PlaceholderText="Last Name" Margin="10"></TextBox>  
  4.     <TextBox PlaceholderText="Enter Email" Margin="10"></TextBox>  
  5.     <TextBox PlaceholderText="Suggestions and Feedback" Height="250" Margin="10"></TextBox>  
  6.     <Button Width="100" Height="60" HorizontalAlignment="Center" Name="submitbtn1" Click="submitbtn1_Click">  
  7.         <Button.Background>  
  8.             <ImageBrush Stretch="Fill" ImageSource="Assets/images.jpg" />   
  9.         </Button.Background>  
  10.     </Button>  
  11. </StackPanel>  
run

Step 5: You can add image on a button by going into the Assets folder,  right click on it and click "Existing Item" and browse some image from your system and click OK.

Add an item

Select image

Now go to the property window of your button and click Tile brush, then select Image source.

Form Design

Suggestion Form

 

Up Next
    Ebook Download
    View all
    Learn
    View all