Chapter 8 Advanced UI Concepts

Then you add your newly created widgetViewModel to the collection of Widgets so that it can update the UI.

Finally, you set the IsAddingWidget property to false in order to hide the overlay view again.

Showing the Overlay View

Now you can add the ability to programmatically show the Border that allows your users to pick a widget and add it to the board. You already provided a large amount of this functionality inside your Placeholder and FixedLayoutManager classes, so you just need to hook up your view model to this functionality. You have also just set the groundwork in your view model, so let’s hook the components up. Open the FixedBoardPage.xaml file again and add the following bold line:

<layouts:BoardLayout ItemsSource="{Binding Widgets}"

ItemTemplateSelector="{Binding WidgetTemplateSelector}"> <layouts:BoardLayout.LayoutManager>

<layouts:FixedLayoutManager NumberOfColumns="{Binding NumberOfColumns}" NumberOfRows="{Binding NumberOfRows}"

PlaceholderTappedCommand="{Binding AddNewWidgetCommand}" />

</layouts:BoardLayout.LayoutManager>

</layouts:BoardLayout>

If you build and run your application, you can see that once you have created a board, you can now tap or click on the Placeholder and observe that your overlay displays. You will notice that there is no background

to your overlay, though, so it is really difficult for a user to understand what to do. You can just set the BackgroundColor of your Border control; however, this can lead to a number of issues. For example, if you fixed

229