Listening to PodCasts on Windows Phone

Using the Zune Software it is easy to listen to PodCasts on the Windows Phone. If you commute or have to wait regularly, you miss a lot when you don’t plug in your earplugs or connect your Windows Phone to your Car Stereo. There are many PodCasts and there is a lot to learn.

PodCastsInZune

For European Listeners there are some hickups: the Zune is officially not available in Europe, so PodCasts exclusively for Zune are restricted for use outside the USA. You can experience that by using the Zune links that are on the official homepages of the PodCasts. I’ve had a likewise experience when I subscribe from within the PodCast player in Windows Phone, showing a “cannot play this PodCast” message instead of playing it.

NotAvailableInYourRegion

To avoid this problem enter the RSS feed URL of a PodCast in the Subscribe dialog that appears when you click the Add a PodCast button at the bottom left of the Zune PodCast screen. When the PodCast episodes list has loaded, drag interesting episodes to you Windows Phone.

When you hit the Series Settings button on the right of the screen next to the episodes list, you can determine how podcasts are downloaded and synched to your phone:

PodCastsSeriesSettings

The Windows Phone standard PodCast player is actually very nice and complete, but if you want more or other features you can search the MarketPlace for other PodCast Players. Screenshots below illustrate the path to playing a episode from .NET Rocks!:

Screen Capture (9) Screen Capture (11) Screen Capture (10) 

Screen Capture (12) Screen Capture (6) Screen Capture (8)  

Screen Capture (7)When a PodCast is playing, you can always adjust volume or stop the show by using the volume button of you phone. It will place the player controls over any screen that is currently showing, even the startup screen:

 

 

 

 

    

It is hard, if not impossible to find the URLs back for the feeds once you are subscribed. Feeds I’m listening to are:

Dot NET Rocks!: http://www.pwop.com/feed.aspx?show=dotnetrocks
The Tablet Show: http://www.pwop.com/feed.aspx?show=thetabletshow
Deep Fried Bytes: http://feeds.feedburner.com/deepfriedbytes
DotNed PotCasts: http://www.dotned.nl/podcasts/podcasts.xml
HanselMinutes: http://feeds.feedburner.com/HanselminutesCompleteMP3
Yet Another Podcast: http://feeds.feedburner.com/JesseLibertyYapcast
MacWorld: http://www.macworld.com/weblogs/mwpodcast.rss
Windows Phone Dev PodCast: http://feeds.feedburner.com/WindowsPhoneDevPodcast Windows Weekly: http://leoville.tv/podcasts/ww.xml

Njoy!

How to stop a WPF Window from moving using Touch by removing the ManipulationBoundaryFeedback

When using Touch in WPF it is possible to scroll lists. It’s just that the Window is moving to give Feedback when you are reaching the end of the list. This is not always what you want. To make your application ignore this behavior you can mark the ManipulationBoundaryFeedback event handled:

<Grid :Name="LayoutRoot" 
    ManipulationBoundaryFeedback="ManipulationBoundaryFeedbackHandler">

<DataGrid
    ScrollViewer.CanContentScroll ="False"
    ScrollViewer.PanningMode="VerticalOnly"
    ScrollViewer.PanningRatio="2"
    ScrollViewer.PanningDeceleration="1000"
    ScrollViewer.VerticalScrollBarVisibility="Hidden">
        …
</DataGrid>

.. your application is here…

</Grid>

private void ManipulationBoundaryFeedbackHandler
    (object sender, ManipulationBoundaryFeedbackEventArgs e)
{
    e.Handled = true;
}

The event is bubbling only, so if you place the event handler on your LayoutRoot it should work for all lists.

Actually there is also a System settings in the Panning Tab in the Pen and Touch settings dialog. This is a setting the end users can choose.

Njoy!

Nooks and Crannies of Expression Blend: Artboard Objects List

I can’t even find this one in the Keyboard Shortcut list provided in the User Guide of Expression Blend, so I made up a name for it: The Artboard Objects List:

ArtboardObject List

Known from several drawing programs, this list shows the objects under the mouse cursor when you hold Ctrl and Click the Right Mouse Button. It highlights the currently selected object and lists all other objects overlapping each other from the topmost at the top of the list to the one at the bottom on the bottom of the list. Notice that the order of this list is opposite to the default order in de Objects and Timeline Panel (when you have not changed the order of the panel using the Sort by Z-order option at the bottom left of that panel). Actually, this order is logical for what it shows: the stack of objects in the Artboard under your mouse cursor.

Notice also the option to Pin or UnPin the Active Container. This makes is easier to insert newly created objects in a container like the RegularPolygon Shape in the Grid here inside the RadioButton…

Njoy!

Typography in Silverlight 5

Silverlight 5 is released and contains the Typography features that already existed in WPF. Designers can use these features to make beautiful typographic designs.

SilverlightTypographyThanks to the qualities of the OpenType font format, several typographic features are now available to every web designer. Combining TrueType and Postscript outlines in one format, smaller file sizes, more typographic control and allowing far more characters in a single font file have resulted in a much more versatile use of fonts. The Typography object is available to you inside a TextBlock or TextBox tag. Attributes of this object lead to various typographic results.

Inside a TextBlock or TextBox, a Run element is used that can only contain unformatted text. Properties of the Typography object are applied through this Run element. To group some of the Run elements together, use a <Span>. Both Run and Span have no inherent rendering.

One concept associated with typography is Kerning . Kerning is embedded in the selected font file and Silverlight has no influence on it other than being able to use it or not. You can set the Typography.Kerning attribute to False. The default setting is True.

Superscript and Subscript are Variants of normal characters in a font, placed on respectively a higher or lower baseline than the rest of the text. Other Variants are Normal, Titling, Inferior, Ordinal and Ruby. Note that a Superscript and a Subscript Variant needs to be present in the font file you use.

Nobody should use a smaller font size of normal Capitals when you really need SmallCaps. Spacing of SmallCaps is different and weight and proportion of the letters are adapted to their size and use. Also, for titling purposes capitals with elegant, slender stems are possible, if they are accounted for in the specified font. Setting the property Typography.CapitalSpacing=”True” is a good idea for titles or text that are in capitals, for the spacing between capitals and lowercase letters differs from the spacing between all capitals.

Ligatures are Alternates for two characters that would collide when spaced normally. In the lowercase combination of f and i for example, the point of character i interferes with the end of the stroke of the f regularly. So in the ligature this issue is solved. The same is true for ff, fl, ffi, ffl and many other character combinations. In OpenType fonts standard ligatures are enabled by default in Silverlight 5. If for some reason standard ligatures should be disabled, use the property Typography.StandardLigatures=”False”. Other reasons for ligatures are esthetic, resulting in discretionary or historic ligatures, using Typography. DiscretionaryLigatures and Typograpy.HistoricalLigatures. Ligatures must be present in the font file for you to make them visible with the Typography object.

Swashes are decorative elements of characters associated with calligraphy. Extended serifs and strokes on existing characters may be part of your OpenFont file. To enable a Swash on a character set Typography.StandardSwashes=”1”. When a standards Swash doesn’t result in an agreeable result setting Typography.ContextualSwashes=”1 for that character is also an option.

OpenType has so many positions for characters available, that Stylistic Alternative characters are at your disposal. To enable an alternative character, set the Typograhy.StylisticAlternates property. Random use of alternatives is possible when you specify Typography.ContextualAlternates=”True”, a great way to help a script font in suggesting true handwriting. A font may also contain AnnotationAlternates. These are Glyphs in circles, squares, parentheses, diamonds or rounded boxes used for annotation of images of illustrations. In code-behind this index can be set with Typography.AnnotationAlternates.

Some characters in a font may be designed to be used together, because they look better next to each other or work together somehow. These characters are combined in a stylistic set and a maximum of 20 of these sets may be set in code-behind.

Numerical features of OpenType include Typography.Fraction=”Slashed” or Typography.Fraction=”Stacked”, old style numerals with Typography.NumeralStyle=”OldStyle” inside a Run tag and Tabular or Proportional alignment with Typography.NumeralAlignment=”Tabular” and even, where available, a slashed zero using Typography.SlashedZero=”True”.

Here’s the XAML I used for the image at the beginning:


<StackPanel Background="White" Margin="0,0,0,0">
<TextBlock FontFamily="Adobe Caslon Pro" FontWeight="Normal" TextAlignment="Center" FontSize="200" Typography.StandardLigatures="True">
<Run FontStyle="Italic" Typography.StylisticAlternates="1">fi</Run>
<Run Foreground="Red" FontStyle="Italic" Typography.StylisticAlternates="1">fl</Run>
<Run FontStyle="Italic" Typography.StylisticAlternates="1">ff</Run>
</TextBlock>
<TextBlock FontFamily="Adobe Caslon Pro" FontWeight="Normal" Margin="0,-150,0,0" TextAlignment="Center" FontSize="200" Typography.StandardLigatures="True">
<Run FontWeight="Normal" Typography.StylisticAlternates="1">fi</Run>
<Run FontWeight="Normal" Typography.StylisticAlternates="1">fl</Run>
<Run FontWeight="Normal" Typography.StylisticAlternates="1">ff</Run>
</TextBlock>
<TextBlock FontFamily="Adobe Caslon Pro" FontSize="24" Margin="0,-125,0,0" TextAlignment="Center">
<Run Text="Superscript: M"/><Run Foreground="Red" Text="2" Typography.Variants="Superscript"/>
<Run Text="Subscript: H"/><Run Foreground="Red" Text="2" Typography.Variants="Subscript"/><Run Text="O"/>
<Run FontStyle="Italic" Text="Fraction: 8"/><Run Foreground="Red" FontStyle="Italic" Text="1/2" Typography.Fraction="Slashed"/><LineBreak/>
<Run Text="CAPITALS" Typography.Kerning="True"/>
<Run Text="SmallCaps" Foreground="Red" Typography.Capitals="SmallCaps"/>
<Run Text="AllSmallCaps" Typography.Capitals="AllSmallCaps"/><LineBreak/>
</TextBlock>
</StackPanel>

Also check out Silverlight 5 OpenType Support from Pete Brown at 10REM.NET.

Njoy!

Photoshop in METRO style 2: Filters

The comments on the previous post got met re-reading the existing documentation for METRO Style Apps. It appears the content of http://msdn.microsoft.com/en-us/windows/apps is quite different when you follow the HTML5/CSS/JS path from when you follow the C++/C#/VB/XAML path. Both are far from complete and one has more complete details on specific subjects than the other. For example, the part where controls are redesigned is much more complete in the XAML section, but the general UI guidelines is more complete in the HTML5 section…

Following new insights on how to design a UI for Photoshop in METRO style I set out on creating a few new screens. Naturally time constraints don’t help in investigating this interesting Style Exercise further. I would have liked to present more screens than these two, but decided to publish this result anyway to keep a conversation going.

The Filters Gallery is one of the most elaborate dialog boxes in Photoshop. It allows you to access all filters possible and determine specific settings for filters and judge the results in the dialog itself. Recreating a Metro Style version of this dialog seemed like an interesting challenge.

The idea was to try out On-Canvas controls. These are controls that are not tucked away in an app bar at the bottom of the screen or a controls area at the top of the screen. My issue with them is that they obscure the image that you are trying to edit. I think this doesn’t help in the image editing process. I decided on a Semantic Zoom as Reidar suggested in his comments. I also wanted to show the effect of a filter on the actual image on the screen.

The Filters Gallery screen show all filters in a specific group:

PhotoshopInMetroStyle06Small
Click to show a full screen image…

It has no use showing these filter effects on the actual image beneath them, because some would only show the blue sky. No effect would be visible in most cases. I opted for a small version of the current image with the filter applied in a GridView, with the title of the filter below. The title of the group is at the top of the screen. Swiping left or right or using the arrows left and right allow you to show the other groups of filters.

The Filter Detail screens will show the filter applied to the image:

PhotoshopInMetroStyle05Small
Click to show a full screen image…

Swiping would show the next filter in the group applied to the image. I’ve inversed the Overlay, this way the filter is applied to the visible part of the image and you can judge the effect of the filter correctly.

Three sliders (common to most filters in the Photoshop Filter Gallery) are show over the filtered image. They are minimalistic as they don’t show any value, but the effect of changing them should be visible immediately. An issue here is contrast: what if the image is white or black behind the Slider controls? The Check icon that is frequently used in Windows Phone and Windows 8 Metro Style apps is below the image to Apply the filter to the current image. To remove it, usually a similar Trashcan icon is used. But it is unclear as to where that icon would show up in this design.

I see how so-called On-Canvas controls can help in the design of Metro Style UI’s. In this case the image below the controls is important and should ideally be visible all the time. I like the way the filter effect is visible on the image right away and changing the setting would should the effect on the image at once. This comes closer to Direct Manipulation…

Njoy!