In the last post, I finally got around to inserting some data with the application. In this post, I am going to read a list of all the item from the database.
There are better ways to implement what I am going to do, namely through the use of Observables, but I am going to keep this simple, as I have throughout the series. I'm going to first make some changes to the UI, in particular I'm going to add a new vertical StackPanel element beneath the gridInput element. I'm going to name this new StackPanel 'spHeroList'. Each Hero object will be added to this StackPanel in code. The main Grid, gridRoot in MainPage.xaml now looks like this: <Grid x:Name="gridRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel Orientation="Vertical"> <Grid x:Name="gridInput" Margin="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="4*"/> <ColumnDefinition Width="2*"/> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1*"/> <RowDefinition Height="1*"/> </Grid.RowDefinitions> <TextBox x:Name="tbInputName" PlaceholderText="Name" Grid.Column="0"/> <TextBox x:Name="tbInputRating" PlaceholderText="Rating" Grid.Column="1" InputScope="Number"/> <Button x:Name="btnAdd" Grid.Column="2" Content="Add" Tapped="btnAdd_Tapped"/> <TextBlock x:Name="tbOutput" Grid.Row="1" Grid.ColumnSpan="3" HorizontalAlignment="Center"/> </Grid> <StackPanel x:Name="spHeroList" Orientation="Vertical"> </StackPanel> </StackPanel> </Grid>
Create a Dummy List of Heroes to Display
Before reading anything from the database, I'm going to create a list of 3 Heroes in code and try to add them dynamically to the StackPanel. Each Hero will be placed in its own StackPanel element and I'm going to create a dedicated class for this - HeroItem, which extends StackPanel. Each Hero is (hopefully) going to appear in a similar fashion to the input area, only in a horizontal stack panel. I will also add two buttons - Update and Delete, although I will not code these just yet.
Create a new class in the root of the project and name it 'HeroItem.cs'. Here is the code I have used in the class: namespace FirebaseHeroes { public class HeroItem : StackPanel { Hero hero;
public HeroItem(Hero hero) { this.hero = hero; // some layout options for the HeroItem this.Orientation = Orientation.Horizontal; this.Padding = new Thickness(10);
// add the name TextBlock tbName = new TextBlock(); tbName.Width = 100; tbName.Text = this.hero.Name;
// add the rating TextBlock tbRating= new TextBlock(); tbRating.Width = 25; tbRating.Text = this.hero.Rating.ToString();
// add the Update button Button btnUpdate = new Button(); btnUpdate.Content = "Update";
// add the Delete button Button btnDelete = new Button(); btnDelete.Content = "Delete";
// add the elements to this stackpanel this.Children.Add(tbName); this.Children.Add(tbRating); this.Children.Add(btnUpdate); this.Children.Add(btnDelete);
} } }
In brief, this is a class that extends the StackPanel class, so it inherits all properties of a StackPanel element. I have added a Hero property to the class which is assigned in its constructor. All of the work is done in the constructor:
namespace FirebaseHeroes { public sealed partial class MainPage : Page { private List<Hero> heroList;
public MainPage() { this.InitializeComponent(); GetHeroes(); AddHeroes(); }
private void GetHeroes() { this.heroList = new List<Hero>(); Hero heroOne = new Hero { Name = "Bombasto", Rating = 86 }; Hero heroTwo = new Hero { Name = "Magma", Rating = 83 }; Hero heroThree = new Hero { Name = "Tornado", Rating = 96 }; this.heroList.Add(heroOne); this.heroList.Add(heroTwo); this.heroList.Add(heroThree); }
private void AddHeroes() { foreach(Hero h in heroList) { this.spHeroList.Children.Add(new HeroItem(h)); } }
private async void btnAdd_Tapped(object sender, TappedRoutedEventArgs e) { HeroConn heroConn = new HeroConn(); Hero hero = new Hero { Name = this.tbInputName.Text, Rating = Convert.ToInt32(this.tbInputRating.Text) }; await heroConn.Insert(hero);
this.tbOutput.Text = String.Format("Hero {0} added!", hero.Name); } } } I first added a class variable heroList which is a List of type Hero. This will be used to hold all of the Hero items which will be displayed in the interface. I have used the GetHeroes() method to populate this List with some dummy data - 3 Hero objects. In the AddHeroes() method, a HeroItem is added to spHeroList for each of the Hero objects contained in the heroList. Both of these new methods are called within the MainPage constructor, after the InitializeComponent() method is called - very important! Running the program now should result in something similar to the image below:
No, it's not pretty, but yes, it does work!
More next time when I'll be reading the contents of the database into the UI.
0 Comments
Leave a Reply. |
Author
2nd Year B.Sc. Software Development Archives
December 2017
Categories |