Default XAML page and New XAML page in Xamarin Forms is not identical - xaml

I am new to Xamarin development. I created new Xamarin XAML App(Xamarin.Forms Portable). In Portable Project there where MainPage.Xaml by default. To create MVVM Model I created three new Folders- Views, ViewModels, and Models. Now I added new MainPage.Xaml in Views folder and was going to delete the default MainPage.Xaml page. But here I see some difference in both pages. The default MainPage.Xaml have xmlns:local="clr-namespace:Test" but the new MainPage.Xaml does not. Again the new MainPage.Xaml have <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" /> but the default one does not. The screenshots are:
What does these MarkUp mean.Why there is a difference. Does something needs to be changed. Can I delete the default MainPage.Xaml or should i copy it in Views.Does I need to copy the Markup from the default Page to the new one. If so why?
Thanks in advance

Both pages are identical, and will display in the same way.
On the second, there's an additional Xml namespace declaration:
xmlns:local="clr-namespace:Test"
It's only a declaration. You could remove it, or add it to the other page without effect. It's purpose is to be able to reference custom views declared in the current assembly and in the namespace (c# namespace, this time) Test, like this:
<ContentPage
...
xmlns:local="clr-namespace:Test"
x:Class="Test.MainPage">
<local:MyAwesomeView />
</ContentPage>

Awesome that you have decided to start with Xamarin and Xamarin.Forms!
While I understand you might be having these questions, this is some very basic XAML knowledge. The short answer is: you don't need to worry about it.
The long answer:
The reason that there is a difference in these pages is simply because it's just a template and whoever at Xamarin created the template for the project can be a different person than who created the template for a new XAML page. So they solved it different ways. Or maybe he had a good/bad day, who knows.
The Label in the first page is simply there to show you how to get started and so you won't start with an empty screen.
The extra namespace xmlns:local="clr-namespace:Test" is actually redundant in this new page but is already there so you can use the classes in your project.
It is actually the equivalent of the using list at the top of your classes. So whenever you need something from a different namespace you have to declare it there. So if you create a folder 'Controls' you can add a attribute xmlns:controls="clr-namespace:Test.Controls".
Note how I changed local to controls, this is the prefix you will use to define your instance. Also I have added the right namespace Test.Controls. Now if you want te show something on screen, in your XAML from the controls namespace, go like this:
<ContentPage xmlns:controls="clr-namespace:Test.Controls" x:Class="Test.MainPage">
<!-- some stuff here -->
<controls:ReusableControlHere />
</ContentPage>
Where ReusableControl can be your own version of a Label, Button or virtually anything.

Related

What's a comprehensive list of parts of an ItemsControl?

The UWP XAML ItemsControl is the basis for many complicated XAML classes, like ListView and GridView.
The documentation Item containers and templates describes 2 key parts of these controls:
Data template
Control template
These parts combine to create the final view:
Container controls (such as ListViewItem and GridViewItem) consist of two important parts that combine to create the final visuals shown for an item: the data template and the control template.
In practice, developers specify the data template by specifying a DataTemplate in ListView.ItemTemplate (or GridView.), and they can customize the control template by providing a Style (TargetType="ListViewItem") to ListView.ItemContainerStyle.
Developers can also customize the ListView.ItemsPanel (which is an ItemsStackPanel by default), and the default Template for the ListView.ItemContainerStyle contains a ListViewItemPresenter. The documentation for Item containers and templates mentions these, too.
That raises the question:
When I add a ListView (or GridView or any ItemsControl) to my code, what am I actually adding? What can I customize? How is my data displayed?
As far as I can determine, the ListView looks something like:
ListView
Renders its Template which somehow renders:
ItemsPanel
Renders its ItemsPanelTemplate which is:
ItemsStackPanel
Renders, for each item:
ListViewItem
Renders its Template, which is:
ListViewItemPresenter
Somehow renders:
ListView.ItemTemplate
But this is unclear to me.
Disclaimer: I work for Microsoft.
you can customize anything in xaml
under the hood, both ListView and GridView can be created by ItemsControl, but their default template have some customization built-in already.
if you want to understand when to use which, here is a page:
https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/lists
your data will be set to the ItemsSource if using binding, for example
<ListView
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
>...
or you can set directly.
from your question, it sounds like you may not have understood the basis, so maybe reading this series will help you:
http://drwpf.com/blog/itemscontrol-a-to-z/
it's for wpf, but the fundamental is the same, you can apply it to UWP as well.

UWP xaml logic:

can someone explain to me what this code in a App.xaml does, especially the logic:AppDataModel part. AppDataModel is Class in the Project.
<Application.Resources>
<logic:AppDataModel
x:Key="TheViewModel" />
<x:String
x:Key="AppName">Master app</x:String>
</Application.Resources>
This markup, when parsed, creates two entries in the Application.Resources dictionary. They key "TheViewModel" is tied to a new instance of AppDataModel and the key "AppName" is tied to a string initialized to "Mater app".
To go beyond your question, the reason you do this in XAML is to co-locate (keep together) your UI code and some instance data, loosely speaking. The biggest example is wanting your UI to always have a particular view model that it binds to. This can be achieved, as I assume from the markup you posted, like you're doing. Creating a view model object in the resources for a given control, window, or app and then assigning it using {StaticResource TheViewModel} will keep you from having to muddy up your code-behind or your view model with binding code.
Hope this helps!
These xaml lines add items to the Resources dictionary of the current application:
Application.Current.Resources["TheViewModel"] = new logic.AppDataModel();
Application.Current.Resources["AppName"] = "Master app";

Xamarin Forms Picker Item source binding in Xaml

I need to create states picker in my Xamarin Forms. I am using Xaml file for creating views.
Can any one help me to bind Picker in Xaml with item source?
The XLabs has an excellent example of a bindable picker that I have used in several projects to great affect:
https://github.com/XLabs/Xamarin-Forms-Labs
This will allow you to replicate the 'ItemsSource' functionality of the Listview.
You won't be able to do this in XAML, as you can see here.
You'll have to load the data up in the code behind, using either their regular API, or something like this.
You can also serialize your list as a JSON or preferred format, and deserialize that and pass it to the Picker.
This functionality did not previous exist, but it was recently added to the regular Xamarin.Forms Picker via the new ItemsSource and SelectedItem properties. It is currently in the pre-release NuGet package for version 2.3.4-pre1, but should be in the stable 2.3.4+ versions once it is released.
As JordanMazurke commented, XLabs has it.
Here is an example:
<ContentPage x:Class="XLabs.Samples.Pages.Controls.ExtendedPickerPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
Title="Picker">
<ContentPage.Content>
<StackLayout x:Name="myStackLayout">
<Label Text="Xaml:" />
<controls:ExtendedPicker x:Name="myPicker"
DisplayProperty="FirstName"
ItemsSource="{Binding MyDataList}"
SelectedItem="{Binding TheChosenOne}" />
</StackLayout>
</ContentPage.Content>

What's the DataContext of the Header elements inside a Hub control?

I have started to develop for WP 8.1 using Windows Runtime recently, and I have faced a... "problem" that I don't seem to understand.
The application I am currently developing uses a Hub control, and I would like to tweak its header's appearance slightly. To do so, I changed the HeaderTemplateattribute of the Hub control. However, as I tried to localize the textual content of the header (note that this is WinRT, the localization process is slightly different from the process in WP8 and can be found here), I "accidentally" fixed the problem by making the template like this:
<Hub.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Foreground="Red"/>
</DataTemplate>
</Hub.HeaderTemplate>
I don't understand why it worked, though. When you do data binding like this (just using the expression {Binding}), doesn't the element get the same DataContext as its father? What's happening under the hood? Who's the parent element of the TextBlock, after all?
Thanks in advance.
EDIT
As igrali asked, here is a more complete view of the XAML:
<Page ...
DataContext="{Binding Data, RelativeSource={RelativeSource Self}}">
<Grid Background="#FFF6DB">
<Hub Name="MainPageHub"
x:Uid="MainPageHub"
Margin="0,27,0,0">
<Hub.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Foreground="White"/>
</DataTemplate>
</Hub.HeaderTemplate>
...
Then, in the /Strings/en-US/Resources.resx, I have a "MainPageHub.Header" property set to "foobar" (just an example), and what I get as a header is actually "foobar" (which is what I wanted, but even so it seems confusing!).
As Tim Heuer explains it here
Notice the x:Uid value here. This now maps back to the key in your
RESW file. Anything with that starting key will have properties
merged into it. So we can have a key in our RESW for “Text” using the
key name MyTextBlock.Text with a value of “Hello World” and the
runtime will do the replacement for you. This applies to properties
other than text (i.e. width) as well as attached properties.
All I can add is - notice the x:Uid. It's MainPageHub. In the localized resource file, you have a MainPageHub.Header. This means that the value of the resource string will be set to the Header of the control which has the x:Uid set to MainPageHub.
So, now that it's clear how the Header is set - there's still the binding part. Well, considering you have a different template for the Header, it needs to do the {Binding } part to actually get the value of the header which is set through the resources.

Windows 8 XAML Multilingual Translations

I've used the Multilingual Toolkit to translate my app and have been testing it using pseudo-language. It works fine for strings I have translated in code (C#) but I can't work out how to make it so that the tag in XAML is automatically translated.
I've been using http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh965329.aspx as a tutorial but I can't figure it out. I've also searched on Google but still no luck.
For example, I created a "Watermark" text box (which inherits from TextBox which shows some text in by default it the user has not entered any text and the item does not have focus. The XAML looks like this (I replaced generic positioning stuff with '...'):
<local:WatermarkTextbox x:Name="TitleTextBox" Watermark="MainPage_EnterATitle" ... Style="{StaticResource TextBoxStyle1}" />
As you can see it is setting a property called Watermark with a 'tag' of the resource name that is being translated using the Multilingual tool. I'm not sure how to get this to automatically translate.
Another example is using the bottom app bar buttons:
<Button x:Name="bottomAppBar_unpinFromStartButton" AutomationProperties.Name="MainPage_UnpinFromStart" Style="{StaticResource UnPinAppBarButtonStyle}" Click="bottomAppBar_unpinFromStartButton_Click"/>
And I can see in the link above that it says:
MediumButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name
But I'm not really sure where this is meant to go.
Even with a button, which seems like it would be the simplest to translate I can't get it to work. The XAML is:
<Button x:Name="RemovePhotoButton" x:Uid="MainPage_RemovePhoto" Content="" HorizontalAlignment="Center" Margin="222,0,974,78" Grid.Row="1" VerticalAlignment="Bottom" Width="170" Height="45"/>
But when ran in the app or viewed in the designed the button stays blank, with no text on it.
The Resources are set up like this:
And it is filling the translated documents fine:
I am able to translate it in C# using the code from the link above, just not using XAML.
Just wondering if anybody could help me out or point me in the right direction to solve this.
Thanks
First what i think is missing in the name of your resources is the property that you want to set. While never used it myself, i would understand it like this:
Your xaml needs to be changed to
<local:WatermarkTextbox x:Name="TitleTextBox" x:Uid="MainPage_EnterATitle" Watermark="" ... Style="{StaticResource TextBoxStyle1}" />
And your resource needs an entry with the key
MainPage_EnterATitle.Watermark
And about the part with the
MediumButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name
This is only used if the referenced property is an attached property. Like if your Watermark property would be attached not part of the control. But in your case its not important.