Windows 8 app development : Example of media element

In app development, windows 8 sdk mediaElement control support  audio and video format files. A short of code make media element or you can say media player for your apps.

<MediaElement Source="5th.mp4" HorizontalAlignment="Left" Height="438" VerticalAlignment="Top" Width="680"/>

In the preceding code define the attributes of MediaElement, the source attribute means which file you want to play in it. Height and width define the structure of mediaElement.

Example of MediaElement control in app development

<Page

x:Class="App1.MainPage"

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

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

xmlns:local="using:App1"

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

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

mc:Ignorable="d">

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

<MediaElement Source="5th.mp4" HorizontalAlignment="Left" Height="438" VerticalAlignment="Top" Width="680"/>

</Grid>

</Page>

Output of the program is

Using IsFullWindow property you can see your favorite videos in full window mode .It contains Boolean value for rendering videos in full or specified height and width.

Windows 8 App Development: How to use HyperlinkButton in c# code file

In my previous article, i have discuss hyperlinkbutton with XAML code in windows 8 app development. In this article i will explain use this button in c# code file. Write the below code in specified file:

XAML CODE

<Page
    x:Class="App4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
     
<HyperlinkButton x:Name="h1" Height="200" Width="257" Content="Microsoft Development Network" Margin="90,20,0,548" Click="h1_Click" />
    </Grid>
</Page>

CODE FILE

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Media.Imaging;

using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace App4

{

    /// <summary>

    /// An empty page that can be used on its own or navigated to within a Frame.

    /// </summary>

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

            //BitmapImage img = new BitmapImage();

            //img.UriSource = new Uri(this.BaseUri,"Image/youtube.png");

            //Image1.Source = img;

            List<string> lit = new List<string>();

            lit.Add("Apple");

            lit.Add("Apple");

            lit.Add("Apple");

            lit.Add("Apple");

            //l1.ItemsSource = lit;           

        }

        private void h1_Click(object sender, RoutedEventArgs e)

        {

            Uri uri = new Uri("http://www.msdn.microsoft.com");

            h1.NavigateUri = uri;            

        }    

    }

}
In the above c# code, look out the click event of hyperlinkbutton h1, i have created an object of Uri class with the link as a constructor's parameter. And then set the property NavigateUri  to the object defined above. When user will click on this button, it will redirect programmer to the specified page.

OUTPUT

First image shown the hyperlinkbutton created by the c# code, when programmer will click on that button, it will redirect on the msdn page, shown in the second image. The second image shows the latest feature in windows 8 app development as it is redirecting programmer and both the pages are side by side.

How to use HyperlinkButton with XAML in Windows 8 App Development

HyperLinkButton, used to open the specified URI in the default browser. URI can be specified in NavigateURI property of this button and it will launch that by clicking on that button. This button look like a text with underline. This button opens another page side by side in windows 8 app development.

Here's the XAML code which will create this type of button:

<Page

    x:Class="App4.MainPage"

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

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

    xmlns:local="using:App4"

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

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

    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        

<HyperlinkButton x:Name="h1" NavigateUri="http://msdn.microsoft.com" Height="200" Width="257" Content="Microsoft Development Network" Margin="90,20,0,548" />

    </Grid>

</Page>

Here above the XAML code is so simple to read and understand. This code is using some mostly used properties described below:

• x:Name: Specify the name of this button and used in code behind file.
• NavigateURI: get or set the URI to navigate to when the button is clicked.
• Height & Width: commonly used property by XAML elements. Read Height & Width in XAML.
• Content: the text to be shown on the button.
• Margin: specify the extra space to get placed around the outside edges. Read Margin in XAML.

Output

Use HyperlinkButton in C# code