Get Microsoft Silverlight

Wednesday, September 15, 2010

An easy Windows Phone 7 Photo Viewer using Pivot control #WP7 Tip

Technorati Tags: ,,,

photoviewer  Source Code

Here is a small trick using the Pivot control for a Photo viewing experience. Imagine a Pivot control with out any header and the image as Pivot items. Yes it is that easy :). Since the Pivot supports for the Phone orientation you can enjoy the picture viewing both in Portrait and Landscape. I am giving step by step info if you are totally new to WP7 and XAML styling.

And please note that the performance wont be that great if you have many images in the Pivot control. So you may need to do design that around or use some tricks to clean up the memory well.

1) Place a Pivot control and override the Style. What we wanted is to take out all the Header Templates and other extra puddings.

        <Style x:Key="emptyPivot" TargetType="controls:Pivot">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:Pivot">
                        <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                            <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

2) Override the ItemContainerStyle and place Image control for displaying Photo.

      <Style x:Key="PhotoVieweritemStyle" TargetType="controls:PivotItem">           
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="controls:PivotItem">
                     <Image Source="{Binding}"/>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>

3) Add ItemsSource Binding to the Pivot control with your Photo Collection.

        <controls:Pivot
             ItemsSource="{Binding YourImageCollection}"
             Style="{StaticResource emptyPivot}"
             ItemContainerStyle="{StaticResource PhotoVieweritemStyle}" />    

 

Happy WP7 Coding!!!

Thursday, March 11, 2010

UniformGrid for Silverlight

My recent Silverlight project had a need to distribute the items in rows and columns. I had to dynamically calculate the number of columns and rows it needed based on some logic. So it was clear that I need UniformGrid as in WPF so that I can bind my ViewModel properties to Rows and Columns properties of the Panel. But it was a bit surprising to me that there isn’t a Silverlight UniformGrid either in Silverlight SDK or in Silverlight ToolKit. So here is one I ported from WPF. Check out the Silverlight 3.0 demo below.
Get Microsoft Silverlight
You can also download the sample project

Thursday, March 04, 2010

A Simple Accordion banner using ListBox

Get Microsoft Silverlight

This sample is to show how easily we can create an Image-accordion entirely in Expression Blend. This is utilizing the ListBox’s Selected and UnSelected VisualStates. Place a ListBox and override its ItemContainerStyle then adjust the width on the Selected and UnSelected visual states. When we override the ItemsPanel we can make it orientation to Horizontal on the StackPanel. Pretty easy and there is no C# needed. Paste the below XAML in your user control

<UserControl.Resources>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="grid" Background="{TemplateBinding Background}" Width="55">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimation Duration="0:0:0.3" To="55" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid" >
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseIn" Springiness="6" Oscillations="0"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0:0:0.3" To="500" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="grid" >
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseIn" Springiness="6" Oscillations="0" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="#FFAFAFAF" Margin="10">
<ListBox SelectedIndex="0" ItemsPanel="{StaticResource ItemsPanelTemplate1}" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" BorderBrush="{x:Null}" Background="{x:Null}" VerticalAlignment="Center" HorizontalAlignment="Center" Height="285" Margin="10">
<Image Source="B.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
<Image Source="A.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
<Image Source="C.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
<Image Source="D.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
<Image Source="E.JPG" Stretch="UniformToFill" Margin="0,0,1,0"/>
</ListBox>
</Grid>

Button Style - Silverlight

Really surprised to see from the google analytics that one of my old post regarding WPF control template still has many viewers . So I just thought of creating a Silverlight version of the same. All the buttons are from the same style with different Button.Background, the elliptical one has less height and more width on it.

If you want to check out the XAML, please download from here