Understanding XAML Schemas And Namespace Declarations?

XAML is actually a flavor of XML, so in order to work with XAML, we need to follow its schema. Schema is like an agreement between both the producer and consumer of XML, so they can work together in case you want to read that schema.

Whenever you create a new UWP Application in Visual Studio, you will find some namespaces in the designer code of XAML. UWP stands for Universal Windows Platform. Go to solution explorer and open MainPage.xaml. You'll find the following lines of code in the tag of <page----></page> of your application. These are different schema and namespaces used in UWP applications. Now we're going to explore these namespaces one by one.

In the very first line you can find your class name which is in fact your application name with MainPage. Below it you'll find few namespaces like:

:x
:local
:d
:mc

These are the namespaces that are used for different purposes. Le's explain each one-by-one -- and one more thing before starting, that URL which you're watching here are not URLs, in fact. They are UR, which stands for Uniform Resource Indicator. URI is used to define a namespace that we can use further in our document of the app.

xmlns = " http:/schemas.microsoft.com/winfx/2006/xaml/presentation "

This schema defines all UI ( User Interface ) components like button, textblock, etc.
xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "

All of the rules of XAML in general are defined at this schema. From rules you can assume that rules which have to be followed while writing UI in XAML.
xmlns : local = " using: --- name of application --- "

This is a local namespace. You can reference your own local classes here by using this namespace in application.
xmlns : d = "http://schemas.microsoft.com/expression/blend/2008 "
xmlns : mc = " http://schemas.openxmlformats.org/markup-compatibility/2006 "

xmlns : d and xmlns : mc are the schemas used to represent the design view of application. Design view is the designer area of application.
mc : Ignorable = " d "

If you want to ignore some namespace on runtime, put that namespace in double quotes as here "d " will be ignored on runtime that has been defined already on the fourth line. This option exists here because of xmlns : mc namespace.

That is all. Please provide feedback so that I'll improve my writing and be able to share further stuff better.

How To Create And Use A CustomResource In XAML?

In this article you will learn how to create and use a CustomResource in XAML.

Open a new Visual C# windows project.
Add a new class named say CustomResourceTest.cs in the project folder.
Derive this class from CustomXamlResourceLoader Class(Case sensitive) like below:
You will get a Namespace not found error. Resolve it by using Windows.UI.Xaml.Resources Namespace.
Override the GetResource Member of the parent class as below. Use the intellisense to select the member.
Replace the Code inside the GetResource Method as: (this is just a simple example). We are returning a text. We plan to show this text inside a TextBlock’s Text Property.
Inside the MainPage.cs . Add the following line of code inside the MainPage Constructor to reference the CustomResouceTest.cs Class from the Page’s XAML.

Correct the NameSpace not found error by resolving it.
Now go to the MainPage.xaml Page and Add a TextBlock as follows. Notice the Text property of the TextBlock.
This results in the following output when you save, build and run the project.
What is happening here?
- We created a CustomResourceClass where we inherited the Class called CustomXamlResourceLoader.
- We override the GetResourceProperty. Don’t focus on the parameters of this method for now.
- We replaced the code inside this method by simply returning a text.
- To access this CustomResource from XAML we have to define the CustomXamlResourceLoader. Current property to the new instance of the Class we created. We have to do this inside the Constructor of the Codebehind page where we want to use the CustomResource.
- We then simply assigned the value of the Text property of the textblock to the CustomResource as seen on Step 8.

Example 2:

Now we will try a different example where we want to display the Text of the TextBlock based on the value we pass on. Change the text of the Mainpage.xaml as:
The 'sayHello' string is passed as a string to the CusomResourceTest.cs class as ResourceID parameter of the overridden class. This will be more clear as you see in the next step.
In the CustomResourceTest.cs class , change the code as follows:
The thing to understand is how we pass the ResourceID from the Text Property of the TextBlock. It is passed as the resourceID parameter. So, based on the ResourceID, we return the appropriate text we want to display on the output screen.
So now we get output as.
If we change the text property as sayByeBye.
We get the following output:

ListView, data binding and ItemTemplate in XAML ?

it's about separating data from layout. So, let's try binding some data to a ListView:

using System;
using System.Collections.Generic;
using System.Windows;

namespace WpfTutorialSamples.ListView_control
{
        public partial class ListViewDataBindingSample : Window
        {
                public ListViewDataBindingSample()
                {
                        InitializeComponent();
                        List<User> items = new List<User>();
                        items.Add(new User() { Name = "John Doe", Age = 42 });
                        items.Add(new User() { Name = "Jane Doe", Age = 39 });
                        items.Add(new User() { Name = "Sammy Doe", Age = 13 });
                        lvDataBinding.ItemsSource = items;
                }
        }

        public class User
        {
                public string Name { get; set; }

                public int Age { get; set; }
        }
}

We populate a list of our own User objects, each user having a name and an age. The data binding process happens automatically as soon as we assign the list to the ItemsSource property of the ListView, but the result is a bit discouraging:

A simple ListView control, using data binding

Each user is represented by their type name in the ListView. This is to be expected, because .NET doesn't have a clue about how you want your data to be displayed, so it just calls the ToString() method on each object and uses that to represent the item.

We can use that to our advantage and override the ToString() method, to get a more meaningful output. Try replacing the User class with this version:

public class User
{
        public string Name { get; set; }

        public int Age { get; set; }

        public override string ToString()
        {
                return this.Name + ", " + this.Age + " years old";
        }
}

A simple ListView control, using data binding and a ToString method on the source object

This is a much more user friendly display and will do just fine in some cases, but relying on a simple string is not that flexible. Perhaps you want a part of the text to be bold or another color? Perhaps you want an image? Fortunately, WPF makes all of this very simple using templates.

ListView with an ItemTemplate

WPF is all about templating, so specifying a data template for the ListView is very easy. In this example, we'll do a bunch of custom formatting in each item, just to show you how flexible this makes the WPF ListView.

Download sample

<Window x:Class="WpfTutorialSamples.ListView_control.ListViewItemTemplateSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListViewItemTemplateSample" Height="150" Width="350">
    <Grid>
                <ListView Margin="10" Name="lvDataBinding">
                        <ListView.ItemTemplate>
                                <DataTemplate>
                                        <WrapPanel>
                                                <TextBlock Text="Name: " />
                                                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                                                <TextBlock Text=", " />
                                                <TextBlock Text="Age: " />
                                                <TextBlock Text="{Binding Age}" FontWeight="Bold" />
                                                <TextBlock Text=" (" />
                                                <TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
                                                <TextBlock Text=")" />
                                        </WrapPanel>
                                </DataTemplate>
                        </ListView.ItemTemplate>
                </ListView>
        </Grid>
</Window>

How to use Animated Banners in XAML and WindowsPhone 8?

I am building a website in XAML (Silverlight) and trying to put prototype samples together to see what can be done in Silverlight and what obstacles will I face in building samples that can easily be done in ASP.NET 2.0. One piece of this was to create an animated banner that shows some ads and give text animations such as changing colors, rotation, and size.

In a graphics designer, you create layers and frames and give them a time interval to load a different layer to create an animated graphics. Fortunately, this functionality is built-in in WPF and XAML. Now, I don't have to create different layers or frames. I can simply create a text and apply animation or transformation on the text and WPF will take care for me.

I have a banner looks like Figure 1.

Figure 1. Initial banner

As you can see from Figure 1, I have four text blocks loaded in the banner and two of them are with a gradient background. I would apply four different animations on these four text blocks. I would change the gradient background of first text block, change the foreground color of second text block, change the width of third text block, and rotate the fourth text block. The running banner will look like Figure 2 and repeat this behavior indefinitely.

Figure 2. Animated text banner

The magic begins within the Storyboard tag of XAML. Within the Storyboard tag, we can use animations such as double animation, color animation, point animation, or transformation.

<TextBlock.Triggers>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers>

The DoubleAnimation tag is used to apply transparency on controls. The following code shows the syntax of the DoubleAnimation. The TargetName is the name of the control such as a TextBlock. The From and To attributes is the range for transparency range between 1.0 and 0.0 where 1.0 is fully opaque and 0.0 is fully transparent. The RepeatBehavior is Forever means the animation will repeat forever.

<DoubleAnimation

Storyboard.TargetName="TB" Storyboard.TargetProperty="Opacity"

From="1.0" To="0.0" Duration="0:0:5"

AutoReverse="True" RepeatBehavior="Forever" />

The following code shows how to user color animation using the ColorAnimation tag, which takes TargetName as name of the brush and TargetProperty as Color. The From and To attributes are starting and end colors.

<ColorAnimation

Storyboard.TargetName="SB"

Storyboard.TargetProperty="Color"

From="Pink" To="SteelBlue" Duration="0:0:5"

AutoReverse="True" RepeatBehavior="Forever" />

The following code usage double animation to set the transformation angle of the text box to rotate a text block.

<DoubleAnimation

Storyboard.TargetName="MyRT"

Storyboard.TargetProperty="(RotateTransform.Angle)"

From="0.0" To="360" Duration="0:0:10"

RepeatBehavior="Forever" />

Download the attached XAML file for more details and complete XAML code.

Here is a listing of complete XAML code:

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="AnimatedBanner.Window1"

x:Name="Window"

Title="Window1"

Width="396" Height="492"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d" Foreground="#FFF15151" SnapsToDevicePixels="True" >

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</LinearGradientBrush>

</TextBlock.Background>

<TextBlock.Triggers>

<DoubleAnimation

Storyboard.TargetName="TB"

Storyboard.TargetProperty="Opacity"

From="1.0" To="0.0"Duration="0:0:5"

AutoReverse="True"RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers><Run FontFamily="Cambria" FontSize="20"Text="Need help on a .NET Project? "/></TextBlock>

</LinearGradientBrush>

</TextBlock.Background>

<TextBlock.Triggers>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers>

</TextBlock>

<TextBlock

x:Name="TB4"

Margin="75,120,161,0" FontSize="16" FontWeight="Bold"VerticalAlignment="Top"

Height="100" Text="Silverlight, C#, ASP.NET, WPF, WCF"TextWrapping="WrapWithOverflow" TextAlignment="Center">

<TextBlock.Foreground>

</TextBlock.Foreground>

<TextBlock.Triggers>

<!-- Use ColorAnimation with TargetProperty as Color and TargetName as brush being used

to draw the text -->

<ColorAnimation

Storyboard.TargetName="SB"

Storyboard.TargetProperty="Color"

From="Pink" To="SteelBlue" Duration="0:0:5"

AutoReverse="True" RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers>

</TextBlock>

<TextBlock

x:Name="TB5"

Margin="97,0,183,41"

FontSize="18" FontWeight="Bold" Foreground="Green"VerticalAlignment="Bottom" Height="60"><TextBlock.RenderTransform>

</TextBlock.RenderTransform><TextBlock.Triggers>

<!-- Use DoubleAnimation with TargetProperty as RotateTransform.Angle

and TargetName as name of the RotateTransform being used to rotate the text -->

<DoubleAnimation

Storyboard.TargetName="MyRT"

Storyboard.TargetProperty="(RotateTransform.Angle)"

From="0.0" To="360" Duration="0:0:10"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers><Run FontSize="20" Text="Contact Us"/></TextBlock>

</Grid>

</Window>

Effective and Easy Logic For Touch Control and Slow Finishing Action After Touch Leaves in XAML?

While analyzing some controls used for touch devices I found this effective and easy logic for touch control and slow finishing action after touch leaves. Normally in touch devices we like to have control of an application with very smooth touch interaction. We also expect some slow finish of the action, like if we tap and wipe a control then it will move some distance and stay. So I found this logic to do that in an effective manner.

Platform support this approach

WPF
Windows Stores (WinRT)
Windows Phones 8

Concept behind the approach

In my logic I have handled the manipulation of the data to the control. Using the manipulation of the data, I reset the matrix value of the control as desired. For slow finishing, I used a timer that enables the control for slower and smooth finishing actions after touch leaves.

XAML Code snippet behind the approach

<Button x:Class="TouchApplication.SmoothestTouchControl"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300">

<Grid>

</Grid>

</Button>

<Window x:Class="TouchApplication.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525"

xmlns:local="clr-namespace:WpfApplication8">

<Grid >