This project is read-only.

Tutorial


In a nutshell a simple spinning HelloWorld application is created as follows:

Download SpinDotters

Download the latest stable SpinDotters binary release and unzip it into a folder of your choice. In the root folder you will find 3 subdirectories:
  • Phone
  • Silverlight
  • WPF
Each subdirectory contains two DLL's:
  • SpinDotters.Core.dll
  • SpinDotters.Widgets.dll

Create a new Silverlight project

Create a new Visual Studio project SDTest by selecting the "Silverlight Application" template.

In the reference list of the SDTest project add a new reference to the SpinDotters.Core.dll mentioned above. Use the "Browse" tab in order to find the folder where you have stored Silverlight\SpinDotters.Core.dll.

Enhance the predefined MainPage.xaml file with a sd-namespace declaration and a Ticker element like this:

<UserControl x:Class="SDTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:sd="clr-namespace:SpinDotters.Core;assembly=SpinDotters.Core"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <sd:Ticker FontSize="48" Height="70" Reflective="True">
            <TextBlock Text="Hello" />
            <TextBlock Text="World" />
        </sd:Ticker>
    </Grid>
</UserControl>

Create a new WPF project

Create a new Visual Studio project SDTest by selecting the "WPF Application" template.

In the reference list of the SDTest project add a new reference to the SpinDotters.Core.dll mentioned above. Use the "Browse" tab in order to find the folder where you have stored WPF\SpinDotters.Core.dll.

Enhance the predefined MainWindow.xaml file with a sd-namespace declaration and a Ticker element like this:

<Window x:Class="SDTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:sd="clr-namespace:SpinDotters.Core;assembly=SpinDotters.Core"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <sd:Ticker FontSize="48" Height="70" Reflective="True">
            <TextBlock Text="Hello" />
            <TextBlock Text="World" />
        </sd:Ticker>
    </Grid>
</Window>

Create a new Windows Phone project

Create a new Visual Studio project SDTest by selecting the "Windows Phone Application" template.

In the reference list of the SDTest project add a new reference to the SpinDotters.Core.dll mentioned above. Use the "Browse" tab in order to find the folder where you have stored Phone\SpinDotters.Core.dll.

Enhance the predefined MainPage.xaml file with a sd-namespace declaration and a Ticker element like this:

<phone:PhoneApplicationPage 
    x:Class="SDTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:sd="clr-namespace:SpinDotters.Core;assembly=SpinDotters.Core"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <sd:Ticker FontSize="48" Height="70" Reflective="True">
                <TextBlock Text="Hello" />
                <TextBlock Text="World" />
            </sd:Ticker>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

Run application

Press the "Start Debugging" Icon (F5) in order to run the ticker animation.

Next steps

  • Download and unzip the SpinDotters source code
  • Build and run the sample solutions
  • Build and run the Lotto sample application
  • Study the Reference
  • Study the SpinDotters.Widgets source code

Last edited Apr 22, 2012 at 3:19 PM by NHuffschmid, version 4

Comments

No comments yet.