Interacting with charts-2

A few months back I posted a sample on one way we can interact with charts.
Here is another way. you can try the sample here.
1. we can drag the left and right thumbs to adjust the width of the chart we want to zoom in
2. we can click in the shaded region between the thumbs and drag it to reposition it somewhere else on the chart. the details are shown in the chart below

chart2

Note: this is just a POC and not all details are taken care of

you can download the code here

Advertisements

Comments on blog

Recently, there is a flood of comments in lanugages I dont understand. just wanted to let visitors know that comments in any language other than english will be deleted.

Flipping Items in Listbox

There are many posts which shows how to do the flip animation, here is mine. In the sample the flip animation is applied to the ListBoxItem in the Styles

I created custom Listbox and listboxitem to add a few properties to hold the datatemplates

public class ListBoxItemEx : ListBoxItem
{

public ListBoxItemEx()
{

}

public DataTemplate FrontContentTemplate
{
get { return (DataTemplate)GetValue(FrontContentTemplateProperty); }
set { SetValue(FrontContentTemplateProperty, value); }
}

// Using a DependencyProperty as the backing store for FrontContentTemplate. This enables animation, styling, binding, etc…
public static readonly DependencyProperty FrontContentTemplateProperty =
DependencyProperty.Register(“FrontContentTemplate”, typeof(DataTemplate), typeof(ListBoxItemEx), null);

public DataTemplate RearContentTemplate
{
get { return (DataTemplate)GetValue(RearContentTemplateProperty); }
set { SetValue(RearContentTemplateProperty, value); }
}

// Using a DependencyProperty as the backing store for RearContentTemplate. This enables animation, styling, binding, etc…
public static readonly DependencyProperty RearContentTemplateProperty =
DependencyProperty.Register(“RearContentTemplate”, typeof(DataTemplate), typeof(ListBoxItemEx), null);

}

public class MyListBox : ListBox
{
public DataTemplate RearItemTemplate
{
get { return (DataTemplate)GetValue(RearItemTemplateProperty); }
set { SetValue(RearItemTemplateProperty, value); }
}

// Using a DependencyProperty as the backing store for RearItemTemplate. This enables animation, styling, binding, etc…
public static readonly DependencyProperty RearItemTemplateProperty =
DependencyProperty.Register(“RearItemTemplate”, typeof(DataTemplate), typeof(MyListBox), null);

protected override DependencyObject GetContainerForItemOverride()
{
ListBoxItemEx lbi = new ListBoxItemEx();
lbi.FrontContentTemplate = ItemTemplate;
lbi.RearContentTemplate = RearItemTemplate;
return lbi;
}
}

The ListBox is defined in XAML like this

<local:MyListBox Margin=”20″ ItemContainerStyle=”{StaticResource listBoxItemStyle}” x:Name=”list1″ RearItemTemplate=”{StaticResource dt2}” ItemTemplate=”{StaticResource dt1}”/>ItemTemplate – one that gets displayed when the item is not selected(FrontContentTemplate of the ListBoxItem is mapped to this)

The style of the ListboxItem will now include 2 contentpresenters one for holding the frontcontent and one for the rearcontent
RearItemTemplate – one that gets displyed when the item is selected

<ContentPresenter x:Name=”rearContentPresenter” Content=”{TemplateBinding Content}”  ContentTemplate=”{TemplateBinding RearContentTemplate}” HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”{TemplateBinding Padding}”  >
                                <ContentPresenter.Projection>
                                    <PlaneProjection x:Name=”rearContentProjection” RotationX=”-180″ CenterOfRotationX=”.5″></PlaneProjection>
                                </ContentPresenter.Projection>
                            </ContentPresenter>
                            <ContentPresenter x:Name=”frontContentPresenter” Content=”{TemplateBinding Content}”  ContentTemplate=”{TemplateBinding FrontContentTemplate}” HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” Margin=”{TemplateBinding Padding}”  >
                                <ContentPresenter.Projection>
                                    <PlaneProjection x:Name=”frontContentProjection”  CenterOfRotationX=”.5″></PlaneProjection>
                                </ContentPresenter.Projection>
                            </ContentPresenter>

All the Animations will happen when the ListBoxItem is selected or unselected in the style

<vsm:VisualStateGroup x:Name=”SelectionStates” >
                                    <vsm:VisualState x:Name=”Unselected” >
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”rearContentPresenter” Storyboard.TargetProperty=”Visibility” Duration=”0″>
                                                <DiscreteObjectKeyFrame KeyTime=”0″>
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name=”Selected”>
                                        <Storyboard>
                                            <!–<DoubleAnimation Storyboard.TargetName=”fillColor2″ Storyboard.TargetProperty=”Opacity” Duration=”0″ To=”.75″ />–>
                                            <DoubleAnimation Storyboard.TargetName=”frontContentProjection” Storyboard.TargetProperty=”RotationX” Duration=”0:0:1″ To=”180″ />
                                         
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”rearContentPresenter” BeginTime=”0:0:.5″ Storyboard.TargetProperty=”Visibility” Duration=”0″>
                                                <DiscreteObjectKeyFrame KeyTime=”0″>
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”frontContentPresenter” BeginTime=”0:0:.5″ Storyboard.TargetProperty=”Visibility” Duration=”0″>
                                                <DiscreteObjectKeyFrame KeyTime=”0″>
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Storyboard.TargetName=”rearContentProjection” Storyboard.TargetProperty=”RotationX” Duration=”0:0:1″ To=”0″ />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>

you can see a demo here and download the code here

Customizing DataPager

I wanted to customize the datapager in silverlight to be able to change the pagesize after it is set and be able to change the UI of the DataPager a bit. 

datapagerAs there is no support for multibinding, I inherited DataPager added few properties  and was able to get it to work.  you should be able to change the number of rows displayed by changing the value in the TextBox next to “Show Rows:”. 

The code doesnt have validations. for checking if the entered value is valid.

you can see a sample here and can download the code from here