WindowsPhone : Working with ListBox Items having Hyperlinks (C#-Xaml)

Advertisemen

Introduction:

Sometimes we may need to detect hyperlinks from given message.For example I have a Listbox which is binding with multiple message items,but here problem is when user sent hyperlinks to listboxitem message ,then we need to detect hyperlinks from message content and provide action for hyperlink to navigate to linked page.So this post is explained about "How to work with ListboxItems having hyperlinks?". At present this post may not be useful for you,but i am sure it will definitely helpful for you in future :)

Requirements:

This sample is targeted to windowsphone 7.1 OS.

Description:

To detect hyperlinks from listboxitem in app we need to follow the certain steps given below.

Step 1:

• Open Visual Studio
• Create new project name(Ex: "ListBoxWithHyperLinks")

Step 2:
In DataTemplate of Listbox,I taken WrapPanel which is great for laying out things in a vertical or horizontal orientation until you reach the edge of the container and then moving on to the next column or row.In xaml code i added Loaded event for wrappanel ,so that in Loaded event fire i can detect hyperlinks from bindable message content as well as i can set action for hyperlinks by adding HyperlinkButton to wrappanel.
To use WrapPanel ,we need add Microsoft.Phone.Controls.Toolkit.dll references . And make sure the DLL is added to the references as in the following:

Open MainPage.xaml and add the toolkit namespace in xaml:

1. xmlns:Toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"  

Lets Write following xaml code,

1. <Grid x:Name="LayoutRoot" Background="White">  
2.         <Grid.RowDefinitions>  
3.             <RowDefinition Height="Auto"/>  
4.             <RowDefinition Height="*"/>  
5.         </Grid.RowDefinitions>  
6.   
7.         <!--TitlePanel contains the name of the application and page title-->  
8.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">  
9.             <TextBlock x:Name="ApplicationTitle" FontSize="25" Text="ListBoxItem with Hyperlinks Demo:" Foreground="#FF0FAEEA"  />  
10.         </StackPanel>  
11.   
12.         <Grid  Grid.Row="1">  
13.             <!--ListBox Content.-->  
14.             <ListBox Foreground="Black" SelectionMode="Multiple" ScrollViewer.VerticalScrollBarVisibility="Auto" Margin="5" Name="ListBoxMessage" BorderBrush="#FFE622E6" BorderThickness="3" >  
15.                <ListBox.ItemTemplate>  
16.                     <DataTemplate>  
17.                         <Grid Height="auto"   Background="White" Width="470" >  
18.                             <Grid.RowDefinitions>  
19.                                 <RowDefinition Height="auto" />  
20.                                 <RowDefinition Height="auto" />  
21.                             </Grid.RowDefinitions>  
22.                             <!--WrapPanel for aligning dynamic TextBlock and HyperLinkButton -->  
23.                             <Grid Grid.Row="0"  MinHeight="45" VerticalAlignment="Center">  
24.                                 <Toolkit:WrapPanel VerticalAlignment="Center" HorizontalAlignment="Left"  Tag="{Binding Message}" Width="450" Loaded="WrapPanel_Loaded"/>  
25.                             </Grid>   
26.                             <!--ListBox Item Seperator -->  
27.                             <Rectangle  Grid.Row="1" Margin="0,3,0,0" Width="500" Height="3"  Fill="#FF77EEA2" HorizontalAlignment="Left"/>  
28.                         </Grid>  
29.                     </DataTemplate>  
30.                 </ListBox.ItemTemplate>  
31.             </ListBox>  
32.         </Grid>  

Please in above code,I taken WrapPanel in DataTemplate and highlighted two properties Tag(for binding message content) & Loaded event.
Step 3:
Create a class name is "Data".

1.  public class Data  
2.     {  
3.         public string Message { get; set; }//for storing message content's  
4.     }  

Create an object in page constructor for list of "Data" items.Add some static message contents to list object with combination of plain text and hyperlinks and finally bind list our ListBox (i.e ListBoxMessage).

1. // Constructor          
2.         public MainPage()  
3.         {  
4.             InitializeComponent();  
5.   
6.             List<Data> ObjDataList = new List<Data>();//for list of Data items  
7.               
8.             //List item with plain text  
9.             ObjDataList.Add(new Data { Message = "SubramanyamRaju WindowsPhone Tutorials is my personal blog ,which is targeted to both beginners and experience" });  
10.               
11.             //List item with plain text and hyperlinks  
12.             ObjDataList.Add(new Data { Message = "SubramanyamRaju WindowsPhone Tutorials blog website link : http://bsubramanyamraju.blogspot.com which is dedicated for only windowsphone development." });  
13.             ObjDataList.Add(new Data { Message = "Windows developer blog website link :http://blogs.windows.com/buildingapps/" });  
14.             ObjDataList.Add(new Data { Message = "https://bing.com  is a search engine that brings together the best of search and people in your social networks to help you spend less time searching and more time doing." });  
15.             ObjDataList.Add(new Data { Message = "The most popular search engines are https://bing.com and http://google.com" });  
16.   
17.             //Bind listitem to our ListBox  
18.             ListBoxMessage.ItemsSource = ObjDataList;  
19.         }  

Note:Here i highlighted the hyperlinks in Message.

Step 4:
In Step2,i bind the wrappanel Tag property with 'Message' and added Loaded event for wrappanel ,and we need to make some changes in code to make hyperlink action in listbox items.Loaded event will be fire when ListBox userinterface is started to load,in this event we can get every wrapapnel Tag message.So next important step is we need to detect hyperlinks from every message.After detecting the hyperlink we need to set that hyperlink to HyperlinkButton and add to wrappanel,and also add TextBlock for plaintext.So the whole code is like following.

1. private void WrapPanel_Loaded(object sender, RoutedEventArgs e)  
2.         {  
3.             var objWrapPanel = sender as WrapPanel;  
4.             //Clear wrapanel child items before set content  
5.             objWrapPanel.Children.Clear();  
6.             //Get current listboxitem message with Tag property  
7.             string Value = Convert.ToString(objWrapPanel.Tag);              
8.             //Check if message having http:// or https://  
9.             if (Value.Contains("http://") || Value.Contains("https://"))  
10.             {  
11.                 string[] SplitDataSync = Regex.Split(Value, @"(?=http)");//Split message based on http  
12.                 for (int i = 0; i < SplitDataSync.Length; i++)  
13.                 {  
14.                     var normalText = SplitDataSync[i].ToString();  
15.                     if (normalText.Contains("http"))  
16.                     {  
17.                         string navigateLink = "";  
18.                         string regUrl = @"http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?";  
19.                         Regex r = new Regex(regUrl);  
20.                         MatchCollection results = r.Matches(normalText);//get collection of hyperlinks from given message list item  
21.                         foreach (Match m in results)//Loop all http links from push message  
22.                         {  
23.                             navigateLink = m.Value.ToString();  
24.                             break;  
25.                         }  
26.   
27.                         var plainText = normalText.Replace(navigateLink, "");//remove http or https links from message and get plain text only  
28.   
29.                         HyperlinkButton hyper = new HyperlinkButton();//for making hyperlinkbutton when link found on message  
30.                         hyper.HorizontalAlignment = HorizontalAlignment.Left;  
31.                         hyper.FontSize = 18;  
32.                         hyper.Foreground = new SolidColorBrush(Colors.Blue);  
33.                         hyper.NavigateUri = new Uri(navigateLink);  
34.                         hyper.TargetName = "_blank";  
35.                         hyper.Margin = new Thickness(-8, 0, 0, 0);  
36.                         hyper.Content = navigateLink;//set hyperlink to hyperlinkbutton  
37.                         objWrapPanel.Children.Add(hyper); //add http link  as HyperlinkButton to wrappanel  
38.   
39.                         AddTextBlocktoWrapPanel(objWrapPanel, plainText);//add plain text as TextBlock  
40.   
41.                     }  
42.                     else  
43.                     {  
44.                         AddTextBlocktoWrapPanel(objWrapPanel, normalText);//add plain text as TextBlock  
45.                     }  
46.                 }  
47.             }  
48.             else  
49.             {  
50.                 AddTextBlocktoWrapPanel(objWrapPanel, Value);//add plain text as TextBlock  
51.             }  
52.   
53.   
54.         }  
55.   
56.         //Add plain text as TextBlock to WrapPanel  
57.         private void AddTextBlocktoWrapPanel(WrapPanel objWrapPanel, string Text)  
58.         {  
59.             TextBlock objBlock = new TextBlock();  
60.             objBlock.Text = Text.Trim();  
61.             objBlock.MaxWidth = 420;  
62.             objBlock.Foreground = new SolidColorBrush(Colors.Gray);  
63.             objBlock.TextWrapping = TextWrapping.Wrap;  
64.             objWrapPanel.Children.Add(objBlock);  
65.         }  

ScreenShots:

After running the sample,we will get screen like this.

See in above screen when tap on blue hyperlink from ListboxItem ,it will be redirect to linked page.

FeedBack Note:

Please share your thoughts,what you think about this post,Is this post really helpful for you?and please tell me is there any alternative to make this sample.I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)

Advertisemen