Silverlight 5 Multi Column and Linked Text

If you are designer of text and love to play around text formatting’s, then you would love to use Multi Columns and Link text in Rich Text Box. This feature gives your ability to display overflowed content in next box or column rather than using scroll bar to read through all the content.

While working with RichText Box you had option that If paragraphs and text is more than height and width of RichText Box you show then using scroll bars. Now in Silverlight 5, you can link overflowed content to next column or box.

If you link text in multi columns, you will get expected output as below,

image

All columns [You may say box as well] all linked to each other. You can put boxes as you want. In above case three boxes are in three different columns, if you want you can put Column2 and Column 3 in same columns.

If you have a RichTextBox like below and this may be having many contents.

image

Now you want to link this RichText Box with RichTextOverFlow such that overflow content will be displayed in next box.

image

It can be done as below,

image

This is very nice feature you can use to create multicolumn content. For your reference source code of output, I shown earlier is given blow,


<UserControl x:Class="SilverlightApplication9.MainPage"
xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation"></a>"
xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml</a>"
xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008"></a>"
xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006"></a>"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
<RichTextBlock x:Name="FirstBox"
HorizontalAlignment="Left"
Width="100"

OverflowContentTarget="{Binding ElementName=SecondBox}"
Margin="33,0,0,0">
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
<Paragraph>what we are going to do with our attitude does matter ...</Paragraph>
<Paragraph>what we are going to do with our attitude does matter.</Paragraph>
</RichTextBlock>
<RichTextBlockOverflow  x:Name="SecondBox" HorizontalAlignment="Right"
Width="100"
OverflowContentTarget="{Binding ElementName=ThirdBox}"
Margin="0,0,45,250">

</RichTextBlockOverflow>
<RichTextBlockOverflow x:Name="ThirdBox"
HorizontalAlignment="Right"
Width="100"
Margin="0,0,194,195">
</RichTextBlockOverflow>
</Grid>
</UserControl>

I hope this post was useful. Thanks for reading Smile

If you find my blogs useful you may like to follow me on twitter http://twitter.com/debug_mode or may like Facebook page of this blog http://www.facebook.com/DebugMode.Net

If you want to see post on a particular topic please do write on FB page or tweet me about that, I would love to help you.

Charts in Windows Phone 7

Today morning I got a call from SQL Server Guru  Pinal Dave and conversation was as below.

image

 

image

 

image

 

So, I started working on this. I decided to go ahead with hard coded data as below,

 


public class Bloggers
    {
        public string Name { get; set; }
        public double Posts { get; set; }
    }


And function returning data is,

 


public static List<Bloggers> GetMembers()
        {
            List<Bloggers> lstMembers = new List<Bloggers>
                                        {
                                            new Bloggers
                                            {
                                                 Name ="Pinal",
                                                 Posts = 2000

                                            },
                                            new Bloggers
                                            {

                                                 Name ="Debugmode",
                                                 Posts = 400
                                            },

                                             new Bloggers
                                            {

                                                 Name ="Koiarala",
                                                 Posts = 1000


                                            },
                                              new Bloggers
                                            {

                                                 Name ="Mahesh",
                                                 Posts = 1500


                                            },


                                        };
            return lstMembers;
        }



image

 


<Grid x:Name="LayoutRoot">
        <controls:Panorama Title="Bloggers">

            <!--Panorama item one-->
            <controls:PanoramaItem Header="Series Chart">
                <Grid>
                    <charting:Chart x:Name="seriesChart" Background="Black">
                        <charting:ColumnSeries Background="Black" />
                    </charting:Chart>
                </Grid>
            </controls:PanoramaItem>

            <!--Panorama item two-->
            <controls:PanoramaItem Header="Pie Chart">
                <Grid>
                    <charting:Chart x:Name="pieChart"></charting:Chart>
                </Grid>
            </controls:PanoramaItem>
            <!--Panorama item three-->
            <controls:PanoramaItem Header="Scatter Chart">
                <Grid>
                    <charting:Chart x:Name="scatterChart"></charting:Chart>
                </Grid>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>




 

To add chart control on XAML, I added namespace on XAML as below ,

 


 xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;
assembly=System.Windows.Controls.DataVisualization.Toolkit"


And on code behind as below,

 


using System.Windows;
using System.Windows.Controls;
using Microsoft.Phone.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;


Creating Column Series


ColumnSeries series = new ColumnSeries();
            seriesChart.Series.Add(series);
            series.SetBinding(ColumnSeries.ItemsSourceProperty, new Binding());
            series.ItemsSource =  GetMembers();
            series.DependentValuePath = "Posts";
            series.IndependentValuePath = "Name";



There is nothing to get confused in above code. It is creating a Column Series and adding to the chart in the first panorama item. Expected output would be as below ,

image

 

Creating Pie Series



PieSeries pieSeries = new PieSeries();
            pieChart.Series.Add(pieSeries);
            pieSeries.SetBinding(PieSeries.ItemsSourceProperty, new Binding());
            pieSeries.ItemsSource = Model.Factory.GetMembers();
            pieSeries.DependentValuePath = "Posts";
            pieSeries.IndependentValuePath = "Name";



Expected output is as below,

image

 

Creating Scatter Series


ScatterSeries scatterSeries = new ScatterSeries();
scatterChart.Series.Add(scatterSeries);
scatterSeries.SetBinding(ScatterSeries.ItemsSourceProperty, new Binding());
scatterSeries.ItemsSource = Model.Factory.GetMembers();
scatterSeries.DependentValuePath = "Posts";
scatterSeries.IndependentValuePath = "Name";


Expected Output is as below,

image

 

image

 

Nested ListBox binding in Silverlight and Windows Phone 7

While creating an application I came across a requirement when I had to put a listbox inside a list box and then I had bind that nested listbox dynamically.

For example say, entity class called Roles as below,



    public class Roles
    {
        public string RollName { get; set; }
    }


And you are using Role class in another entity class called Subscription as property


  public class Subscription
    {
        public string SubscriptionName { get; set; }
        public List<Roles> lstRoles { get; set; }
    }


We need to achieve,

image

There is function to return Data to bind to nested list box as below,



List<Subscription> GetDataToBind()
        {
           List<Subscription> lstSubscriptions = new List<Subscription>
                                                {
                                                   new Subscription
                                                   {
                                                       SubscriptionName ="Susbcription1",
                                                       lstRoles = new List<Roles>
                                                       {
                                                            new Roles
                                                            {
                                                                RollName = "Role1"
                                                            },
                                                             new Roles
                                                            {
                                                                RollName = "Role2"
                                                            },
                                                             new Roles
                                                            {
                                                                RollName = "Role3"
                                                            }
                                                       }
                                                   },
                                                   new Subscription
                                                   {
                                                   SubscriptionName ="Susbcription2",
                                                       lstRoles = new List<Roles>
                                                       {
                                                            new Roles
                                                            {
                                                                RollName = "Role1"
                                                            },
                                                             new Roles
                                                            {
                                                                RollName = "Role2"
                                                            },
                                                             new Roles
                                                            {
                                                                RollName = "Role3"
                                                            }
                                                       }
                                                   }
                                                };
           return lstSubscriptions;

        }


As of now we are ready with

  1. Entity class
  2. Data source

image

And there is one more property in of generic list type in entity class. To bind that you need to set item source of internal list box as binding.

image

Final XAML will be as below,



<ListBox Height="646" HorizontalAlignment="Left" Margin="6,19,0,0" Name="listBox1" VerticalAlignment="Top" Width="444" >

                <ListBox.ItemTemplate>
                    <DataTemplate>
                    <Grid x:Name="grdListItem" Width="440">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="201*"/>
                            <ColumnDefinition Width="239*" />
                        </Grid.ColumnDefinitions>
                            <Image Source="AzureLogo.png" Height="100" Width="100" Grid.Column="0" />
                            <TextBlock x:Name="txtSubscription" Grid.Column="1" Height="100" Margin="6,0" Text="{Binding SubscriptionName}" />

                        <ListBox x:Name="lstWebRoles" Grid.Column="1" Margin="10,0,0,0" ItemsSource="{Binding lstRoles}" >
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical" >
                                    <TextBlock x:Name="txtRoles" Height="80" Width="220" Text="{Binding RollName}" />
                                </StackPanel>
                                  </DataTemplate>
                                 </ListBox.ItemTemplate>
                           </ListBox>

                    </Grid>
                    </DataTemplate>
                    </ListBox.ItemTemplate>
            </ListBox>



Eventually put item source of external list box as,



public MainPage()
        {
            InitializeComponent();
            listBox1.ItemsSource = GetDataToBind();
        }

In this post we discussed binding of nested listbox in Silverlight. I hope this post was useful. Thanks for reading.  Smile

Learn WCF RIA Service: Day 5

Learn WCF RIA Service: Day 1

Learn WCF RIA Service: Day 2

Learn WCF RIA Service: Day 3

Learn WCF RIA Service: Day 4

Using the Silverlight Business Application Template

Till Day 4, we have discussed various primary but important aspect of WCF RIA Service and Domain Service class. Today we will learn creating of WCF RIA Solution using Silverlight Business Application template. You will get Silverlight Business Application template installed under the Silverlight tab as below,

clip_image001

Go ahead and create Silverlight project choosing Silverlight Business Application template. After successful creation of the project run the Silverlight without amending anything in the solution. You will notice at output you are getting a default screen with options of different views like Home, About and Login

clip_image003

Closely examine Silverlight project in solution explorer and you will find different folders like View, Model etc.

clip_image004

If you want to add new page in the business application, very first you need to add Silverlight page in the View Folder. I have added a Silverlight page named MyLearning.xaml in the View folder as below,

clip_image005

After adding page you need to add link on the MainPage.xaml to navigate to this page from home page. For that open MainPage.xaml and inside URI mapper add a mapping for MyLearning.xaml.

MainPage.Xaml

clip_image006

Once you have added URI mapping add a link on the main grid of MainPage.xaml as below,

MainPage.Xaml

clip_image008

Above we are binding content of hyper link with resource from Application resources. Now go ahead and add an entry for MyLearningPageTitle in ApplicationStrings.rescx file

ApplicationStrings.rescx

clip_image009

After adding entry if you run application, you will get a link at home page to navigate to newly added xaml as below,

clip_image010

If click on login link then application will prompt you for authentication.

clip_image011

You can create a new user as well on clicking on Register Now Link. There is default validation implemented as well. If you violate the validation you will get prompt error message as below,

clip_image012

On clicking button a new user will get created.

There are many things and features of Business Application Template are yet to be covered. Today we just touched the basic that would help you to start and explore more on this template.

See on Day 6  Smile

Learn WCF RIA Service: Day 1

Learn WCF RIA Service: Day 2

Learn WCF RIA Service: Day 3

Learn WCF RIA Service: Day 4

Learn WCF RIA Service: Day 4

Learn WCF RIA Service: Day 1

Learn WCF RIA Service: Day 2

Learn WCF RIA Service: Day 3

Adding Custom Query in Domain Service Class

On Day 3 we went deep in generated Domain Class. Now we do have an understanding on what all methods are there in the Domain Service Class.

First question we need to ask ourselves is that, “why we need to add custom query in domain service class.

We add custom query in Domain Service class to achieve certain application logic. When to meet certain business requirement we add custom query as application logic in Domain Service Class , that gets available in both presentation layer and middle layer.

Let us go ahead and try to achieve below business task

  1. Passing parameter to query. Such as we want to fetch a particular person of a given person id.
  2. Retuning multiple and single results from query

We will see how we could add query methods to the generated Data Context class.

To return a single object, you need to make query iscomposable attribute to false. Any method returning single object should be attributed as below,

clip_image001

To filter out person on a particular PersonID you can use lambda expression as below,

SchoolRIAService.cs


[Query(IsComposable=false)]
        public Person GetPersonById(int PersonID)
        {
            return this.ObjectContext.People.SingleOrDefault(p => p.PersonID == PersonID);
        }

Above code would fetch you a single person of given person Id. At the presentation layer in Silverlight client you can call above custom query as below,

MainPage.xaml.cs

using System.Windows.Controls;
using DemoDay2.Web;
using System.ServiceModel.DomainServices.Client;
namespace DemoDay2
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            SchoolRIAContext proxy = new SchoolRIAContext();
            LoadOperation<Person> loadPerson = proxy.Load(proxy.GetPersonByIdQuery(1));
            grdRIADataGrid.ItemsSource = loadPerson.Entities ;
        }
    }
}

If you want to add custom query as of your requirement returning multiple entities, you can add a method in Domain Service Class.

SchoolRIAService.cs

</span>
<pre>
public IQueryable<Person> GetPersonByStartName(string startchar)
        {
            return this.ObjectContext.People.Where(s => s.FirstName.StartsWith(startchar));
        }

Above method will return all the people with given start name. At the presentation layer in Silverlight client you can call above custom query as below,

MainPage.xaml.cs


using System.Windows.Controls;
using DemoDay2.Web;
using System.ServiceModel.DomainServices.Client;
namespace DemoDay2
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            SchoolRIAContext proxy = new SchoolRIAContext();
            LoadOperation<Person> loadPerson = proxy.Load(proxy.GetPersonByStartNameQuery("d"));
            grdRIADataGrid.ItemsSource = loadPerson.Entities ;
        }
    }
}

Today we saw how we could add custom query to Domain Service Class matching our business requirement. We can add any application logic in Domain Service Class to be shared in between presentation layer and middle layer.

See you on day 5 Smile

Learn WCF RIA Service: Day 1

Learn WCF RIA Service: Day 2

Learn WCF RIA Service: Day 3