Blog

posts

Silverlight for Windows Phone 7 Toolkit artikel in .NET Magazine

0 Comments
By Fons Sonnemans, 10-1-2011

 

In het laatste .NET magazine heb ik een artikel geschreven over Silverlight for Windows Phone 7 Toolkit. Dit artikel kunt u online lezen maar ook downloaden als PDF. Natuurlijk kan je de sourcecode van de demo applicatie ook downloaden.

Mocht je het magazine niet hebben ontvangen schrijf je dan alsnog in. Het laatste blad wordt dan alsnog opgestuurd.

WP7 Countdown app shown in the CES Keynote

0 Comments
By Fons Sonnemans, 6-1-2011

My Countdown app is shown in the CES Keynote given by Steve Ballmer. Check out the video and FF to 28:37. You will see a Live Tile (Summer Solstice) at the bottom of the start screen of the Windows Phone 7.

Cheers,

Fons

Countdown app for Windows Phone 7

0 Comments
By Fons Sonnemans, 1-12-2010

My Countdown application for the Windows Phone 7 is now available in de Windows Phone Marketplace.

Countdown is a metro-styled application that is used to track various dates, events and displays the time remaining until the timer comes to an end. See how long until Christmas, New Year, Easter, Halloween, Thanksgiving, etc. Remember Birthdays, anniversaries, or any other important events.

I used my Countdown for Silverlight 4 control to create this app and added an Digital clock style.

I'm planning to add more features like Live Tiles and extra clock types soon. I hope you like it. You can download it using the following button.

Below the Countdown application in the (Zune) marketplace:

Accent Colors for Styled TextBlocks in WP7 Selected ListBoxItems

0 Comments
By Fons Sonnemans, 12-11-2010


The Problem
The Windows Phone tools in Visual Studio an Expression Blend let you create a 'Windows Phone Data Bound Application" (Template). This application uses SampleData and two List/Detail pages. The List (MainPage) contains a listbox which is templated. The ItemSource of this listbox is databound to the Items in the SampleData. When run the application and select an Item in the ListBox the DetailsPage is shown using navigation. This navigation is initiated from the SelectionChanged event of the listbox in the MainPage. When you remove this event from the XAML you would expect that the selected item in the listbox would be shown using the Accent color of your phone. But this doesn't happen. It took me a while to figure out the reason why, and how to solve it.

<ListBox x:Name="MainListBox"
            Margin="0,0,-12,0"
            ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="0,0,0,17"
                        Width="432">
                <TextBlock Text="{Binding LineOne}"
                            TextWrapping="Wrap"
                            Style="{StaticResource PhoneTextExtraLargeStyle}" />
                <TextBlock Text="{Binding LineTwo}"
                            TextWrapping="Wrap"
                            Margin="12,-6,12,0"
                            Style="{StaticResource PhoneTextSubtleStyle}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

The Reason
The Selected (Visual)State of a ListBoxItem sets the foreground of the ContainerControl to the PhoneAccentBrush resource. The Two TextBlockes in the ItemTemplete of my listbox have a Style Property. Both styles are base on the PhoneTextBlockBase which has a Foreground property set to the PhoneForegroundBrush resource. This conflicts with the foreground set in the VisualState and therefore the color never changes.

<VisualStateGroup x:Name="SelectionStates">
    <VisualState x:Name="Unselected" />
    <VisualState x:Name="Selected">
        <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                            Storyboard.TargetName="ContentContainer">
                <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="{StaticResource PhoneAccentBrush}" />
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </VisualState>
</VisualStateGroup>

The Solution
The solution is very easy: remove the Foreground from the Style of the Textblock. I did this using Blend. I opened the ItemTemplate of the ListBox. Selected the first TextBlocked and created a copy of the style (menu Object, Edit Style, Edit a Copy...), naming it 'PhoneTextExtraLargeStyleWithoutForeground'. This style is based on the 'PhoneTextBlockBaseWithoutForeground' style which holds the Foreground property. I used Blend to create a copy of this style (menu Object, Edit Additional Styles, Edit BasedOn, Edit a Copy...), naming it 'PhoneTextBlockBaseWithoudForeground'. Then I removed the Foreground property from this style.

I also created a copy from the PhoneTextSubtleStyle and named it PhoneTextSubtleStyleWithoutForeground. This style sets the Foreground property to PhoneSubtleBrush resource. I removed this property and added an Opacity property which I set to 0.8

<Style x:Key="PhoneTextBlockBaseWithoudForeground"
        TargetType="TextBlock">
    <Setter Property="FontFamily"
            Value="{StaticResource PhoneFontFamilyNormal}" />
    <Setter Property="FontSize"
            Value="{StaticResource PhoneFontSizeNormal}" />
    <!--<Setter Property="Foreground"
 Value="{StaticResource PhoneForegroundBrush}" />-->
    <Setter Property="Margin"
            Value="{StaticResource PhoneHorizontalMargin}" />
</Style>

<Style x:Key="PhoneTextExtraLargeStyleWithoutForeground"
        BasedOn="{StaticResource PhoneTextBlockBaseWithoudForeground}"
        TargetType="TextBlock">
    <Setter Property="FontFamily"
            Value="{StaticResource PhoneFontFamilySemiLight}" />
    <Setter Property="FontSize"
            Value="{StaticResource PhoneFontSizeExtraLarge}" />
</Style>
<Style x:Key="PhoneTextSubtleStyleWithoutForeground"
        BasedOn="{StaticResource PhoneTextBlockBaseWithoudForeground}"
        TargetType="TextBlock">
    <Setter Property="Opacity"
            Value="0.8" />
    <!--<Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>-->
</Style>

The Styles of the two TextBlocks are now set to PhoneTextExtraLargeStyleWithoutForeground and PhoneTextSubtleStyleWithoutForeground.

<ListBox x:Name="MainListBox"
            Margin="0,0,-12,0"
            ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="0,0,0,17"
                        Width="432">
                <TextBlock Text="{Binding LineOne}"
                            TextWrapping="Wrap"
              Style="{StaticResource PhoneTextExtraLargeStyleWithoutForeground}" />
                <TextBlock Text="{Binding LineTwo}"
                            TextWrapping="Wrap"
                            Margin="12,-6,12,0"
              Style="{StaticResource PhoneTextSubtleStyleWithoutForeground}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

If you run the application the selected item in the listbox is shown using the accent color. Problem fixed.

Result

Cheers,

Fons

Sudoku in WP7 Marketplace

0 Comments
By Fons Sonnemans, 14-10-2010

My Sudoku has been accepted in the Windows Phone 7 Marketplace.



Play standard 9x9 grid Sudoku puzzles on your phone. Exercise your visual scanning and processing powers and strengthen your brain. With four difficulty levels, intuitive interface, and all the functions right at your fingertips, this Sudoku app is sure to be your favorite.

Features:

  • 4 different skill levels (easy, medium, hard, evil)
  • random puzzle generator so you will always get a new one
  • auto save
  • Undo & Redo
  • pencil notes
  • hints, validate, solve
  • settings (show candidates and incorrects)
  • 10 puzzles free trial

Sudoku running on a WP7 Device

0 Comments
By Fons Sonnemans, 9-8-2010

My Sudoku is running on a Samsung Windows Phone 7 device!

Tags: Windows 8, WinRT

Sudoku for WP7 on YouTube

0 Comments
By Fons Sonnemans, 22-7-2010

I have placed a movie of my Sudoku for the Windows Phone 7 on YouTube. I have build it using the new Beta bits. It uses the same Model and ViewModel code as my Silverlight implementation.

I'm almost finished. I only have to implement the 'Notes' and 'Import from Camera' features. I can't test the Import/OCR yet because the emulator doesn't support the WebCam, bummer. I hope i can test it on a device soon.

Cheers,

Fons

Porting Sudoku to Windows Phone 7

0 Comments
By Fons Sonnemans, 4-7-2010

Last year I wrote a Sudoku using Silverlight 2. I'm now porting it to the Windows Phone 7. I started designing the UX. I decided to stick to the Metro design. It's really clean.

I'm using the ApplicationBar and Menu. I'm not totally sure which buttons to use. For now: pause, undo, redo and hint. I will have to create a ShakeTrigger which I will use to create a new game. I will have to postpone this until I have a real device to develop on. The accelerometer is hard to emulate.

I'm also planning to 'import' Sudoku's using the phone camera and OCR. But probably not in the first version.

I hope to show you a working version in a YouTube video soon. Come back later. All feedback is welcome on fons@reflectionit.nl

Cheers,

Fons

Touch Gesture Triggers for Windows Phone 7 projects in Blend 4.0

0 Comments
By Fons Sonnemans, 4-6-2010

The Windows Phone 7 supports single and multi touch gestures. I have implemented the Tap, Double Tap and the Touch&Hold gestures using Triggers. You can use them to trigger an Action in Expression Blend.

You first have to reference the GestureTriggersLibrary. Then you add an Action to a control using the Behavior assets. Finally you change the TriggerType using the New button.

The following example has tree TextBlock controls on with a ChangePropertyAction attached to it. This action sets the Text of the red TextBlock (textBlockResult) using the Tap, Double Tap or Touch and Hold GestureTriggers.

There is also a Flick Gesture Trigger which is created by Jocelyn Villaraza. Expect to see more Behaviors, Actions and Triggers for the WP7 soon.

You can download the April CTP sourcecode from here

Update 22-7-2010
The beta version doesn't support the IsTapEvent property on ManipulationCompletedEventArgs. I have fixed this using an extension method. You can download the Beta sourcecode from here.

Cheers,

Fons

Windows Phone 7 Training

0 Comments
By Fons Sonnemans, 3-6-2010

Yesterday I attended the Windows Phone 7 Developer Hub. The quality of the sessions was very good. They had some phone prototypes which you could play with during the breaks. I had the chance to play with an LG Windows Phone! It looks and feels great. I can't wait to get one!

It really inspired me to develop a new training for it together with my friend Loek. We plan to finish the training by the time Microsoft releases the first builds which we can run on real phones.

The content of the training will be: 

  • Introduction: Windows Phone 7, Metro Design, Silverlight, XAML, Visual Studio 2010, Microsoft Expression Blend 4, Hardware, Emulator
  • Controls: Runtime Controls, 3rd Party Controls, Events, Fonts, Tips & Tricks
  • Graphics and Animations: Shapes, Brushes, PixelShader Effects, Resources, Transformations, Animations and storyboards, Key frames and Interpolation, Triggering and Programming Animations Methods, Tips & Tricks
  • UI Customization: Styling, Skinning (Templating), Styling and Skinning, Template Binding, Visual State Manager (VSM), Tips & Tricks
  • Data Binding: Element To Element Binding, StaticResource Binding, DataContext Binding, Binding to Collections, Blend Sample Data, MVVM, Converters, Data Validation, Data Annotations DataBinding from Code, DataGrid, Tips & Tricks
  • Programmability: Using and creating Actions/Triggers/Behaviors and Commands. Using Files, Base Class Library, Asynchronous Programming, Sound, Accelerometer, Location Service
  • Control Creation: Creating User Controls, Dependency and Attached Properties, States, Creating Templated Controls, Transition Effects, Tips & Tricks
  • Networking: HTTP (Download, Upload, Data Serialization: XML, JSON, RSS), SOAP (XML WebServices & WCF), OData (WCF Data Services), Push Notification, Tips & Tricks
  • Phone Applications: Navigation, WebBrowser, Pivot, Panorama, Lauchers, Choosers, Bing Maps
  • Deployment: Marketplace, Unit Testing
  • Closure: Summary, Resources, Books, Evaluation

If you can't wait you can prepare yourself with our Silverlight 4 training.

Cheers,

Fons

All postings/content on this blog are provided "AS IS" with no warranties, and confer no rights. All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or sponsors. The content on this site is licensed under a Creative Commons Attribution By license.