Tuesday, March 19, 2013

Porting Android applications to Windows RT - A quick report

Tonight was my first night of my two weeks vacation. For resting I finished porting my successful Android app I developed last year for kids to Windows RT. Using XAML compare to the UI elements of Android is a dream. I really like the ease of work and the brilliant design ideas that can be implemented in half an hour using XAML. Of course some limitations on Windows RT .Net framework is annoying (like lack of support for TTS engine as I said before) however you will have very pleasant time using VS2012 and XAML to create your own Windows RT application.

The annoying part of packaging a Windows RT app is the way it asked for logos. It has an endless list of icon placeholders with very similar width and height! I don't know what could I do if I don't have the free Syncfusion tool for icon editing! (Synfusion Metro Studio 2)


I used Windows RT components provided by Syncfusion and it was so easy to make the whole UI in only one XAML page using their awesome TileView component!




For creating the voice playback I used WAV files generated by my tool (SayItNow!) I introduced in the previous post. I have also used a great tool for working with JSON files called JSONedit.
Here is my XAML file for the above two pages:


<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:layout="using:Syncfusion.UI.Xaml.Controls.Layout"
    x:Class="Animals.MainView"
    mc:Ignorable="d">

    <Border BorderBrush="#FFBF0F" BorderThickness="4">
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Grid Grid.Row="0" Background="#FFBF0F">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Image Source="/Assets/Logo.scale-100.png"></Image>
                <TextBlock Grid.Column="1" Grid.Row="0" Text="Talking Photo Dictionary" Foreground="Black" FontFamily="Arial" FontSize="28" FontWeight="ExtraBold"/>
                <TextBlock Grid.Column="1" Grid.Row="1" Text="Animals" Foreground="Black" FontFamily="Arial" FontSize="60" FontWeight="ExtraBold"/>
            </Grid>

            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid.Row="0" HorizontalAlignment="Right" x:Name="Toolbar1" Visibility="Collapsed" >
                <Image Source="/Assets/icons/Previous.png" Width="64" Tapped="Restore"></Image>
                <Image Source="/Assets/icons/Speaker Volume.png" Width="64"></Image>
                <Image Source="/Assets/icons/Camera1.png" Width="64"></Image>
                <Image Source="/Assets/icons/Open Book.png" Width="64"></Image>
                <TextBlock Text="{Binding Name}" FontSize="40" Margin="20" Foreground="White"/>
            </StackPanel>


            <layout:SfTileView x:Name="Tile" Grid.Row="1"  Orientation="Horizontal" SelectionChanged="Tile_OnSelectionChanged"
                           ItemsSource="{Binding Images}" ItemHeight="100" ItemWidth="100" AllowReorder="True" Margin="10" UseLayoutRounding="True"  >
                <layout:SfTileView.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Image}" Width="125" Height="125" Stretch="UniformToFill"></Image>
                    </DataTemplate>
                </layout:SfTileView.ItemTemplate>

                <layout:SfTileView.MaximizedItemTemplate>
                    <DataTemplate >
                        <ScrollViewer Background="#888888" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
                            <Image Source="{Binding Image}" Stretch="UniformToFill"></Image>
                        </ScrollViewer>
                    </DataTemplate>
                </layout:SfTileView.MaximizedItemTemplate>

            </layout:SfTileView>

        </Grid>
    </Border>
</Page>

No comments:

Post a Comment