How do I use design time data within Blend?

[Tom]

Good day,

I'm trying to determine if there is a way to use design time data within the LoopList control.  I'm trying to change style layout within Blend but I need sample data in order to figure out the correct formatting.

[Tom]

After reading more into the other forum threads I realize now that the control's styles are not properly being recognized within Blend for Visual Studio 2012.  Without the ability to load up the styles within Blend I have no means to discover/learn the properties in order to create the style I need.

I try to follow the instructions with the Telerik Online documentation for the "Styling LoopingListItem".  However I couldn't find the "Edit 'Genreated Item Container (ItemContainerStyle)' option within Blend.  The following is the instruction given in the documentation "From the menu choose Object -> Edit Additional Styles -> Edit Generated item Container (ItemContainerStyle) -> Edit Current "        
I've attached screen captures of the menu structure being displayed with in Blend.  I've also attached a screen capture of creating an empty style of what I assume is ItemContainerStyle.  However I did noticed it Blend defaulted to name the new style 'FrameworkElementStyle1'.  This is why I have doubts that I'm seeing the proper styling appearing in Blend.

Now I could be I'm missing a critical step but I read the documentation several times.  I couldn't discover the 'Genreated Item Container (ItemContainerStyle)' menu option. 

Off topic, it will help us novices to xaml and Blend if the documentation had step by step instructions  with sample images of the expected screens within Blend.  Also use the default names given by Blend.   It helps with the learning process to make the connections between what Blend's style properties with what is shown in the xaml in VS2012.  I'm wondering if would be better to just open up the documents to the customers and Telerik staff to add and update similar to  a Wiki. 

[Deyan]

Hello Tom,

Thanks for writing and for the attached screenshots.

The help contents regarding styling the Item Containers of RadLoopingList are not entirely correct. This is in our TODO list for revision,

However, when I open a project in Blend and put a LoopingList on the page, I am perfectly able to edit the default Item Style as shown on the screenshot attached here.

Do you have Visual Studio 2012 Update 2 installed on your machine?

Regards,
Deyan
Telerik

[Tom]

Hi Deyan,

I do have Visual 2012 w/ Update 2.  I can recreate the same step you did as well inside Blend for Visual Studio 2012.  Can you do me a big favour and do a screen shot of the available style properties.  I want to compare against what I'm seeing in Blend on my dev.  Unfortunately, I won't be able to check until later this evening since I'm at work.  

When I try to edit the styles at the LoopListItem level it kept default to a name called 'FrameworkElementStyle1'.  There were very minimal style settings for me to get a good sense I was editing the correct object item.  No matter what I changed it appeared to keep the default style created with the user control.  I did confirmed that my own style was defined in the Xaml.  

Right now, I'm still in the learning phase of figuring out the available style properties are  within LoopListItem.   I need a road map to find my way.

[Deyan]

Hi Tom,

Thanks for writing back.

On my side, when I try to edit a copy of the LoopingListItem's style, I get what it's shown on the attached image.

Could you please elaborate a bit further on what do you mean by saying "there were very minimal style settings"? Normally, a Silverlight control has its default Style property that comes from the base Control class and exposes additional Style properties for its sub-items if needed. The LoopingList control exposes the ItemStyle property which allows you to style the items in the list.

" Can you do me a big favour and do a screen shot of the available style properties"

The RadLoopingList exposes two Style related properties: the default one (for the RadLoopingList control) and the ItemStyle property. Since you confirmed that you see what I have demonstrates in my previous screenshot, there is nothing more I could show you in terms of style properties.

Can you please share some details on what exactly you would like to style in RadLoopingList so that I can make sure I provide you with the correct hints?

Thanks for your time.

Regards,
Deyan
Telerik

[Tom]

Hi Deyan,

I will have to check again my setup to confirm if I'm getting the same default response on the style template name.  I will followup later this evening on this issue.

As for my UI design goals for the control here are my requirements.

I'm using the control to display a list of phrases from an xml file.  So the visual effect I would like is to increase the text area across the entire phone screen.  Allowing for 10 pixel padding from left and right of the list control.  The text within the item list will need to wrap because I have phrases that can take up to 3 lines.  I want to remove the red background to a transparent background for the LoopListItem text area.   I want the selected phrase item  to be in bold or at least standout from the other list items.

The list  scroll can be activated either by a button command or by the user interacting with the control.  I already have the list scroll being managed by a button click event.  However, the control will not allow me to manually scroll.  I haven't been able to determine the property to set to allow manually scrolling.

Thanks again for the help.

[Tom]

I cannot get the menu option ItemStyle to activate within Blend to edit the LoopListItem style.  See the attached screen of what appears in Blend.

I will have to recheck the online docs to see what step I've missed.

[Deyan]

Hi Tom,

Thanks for writing back and for the attached screenshot.

Can you please make sure that you correctly select the RadLoopingList control on the page in Blend and right click on it to extract the style? Doing this on our side allows us to extract the default style for the Looping List items. This is the standard approach of extracting styles in Expression Blend.

As for the LoopingList related questions:

1. You have two options to scroll the looping list:
 - Programmatically
 - By interacting with it on the phone

Can you please elaborate a bit further on the case where you cannot "manually" scroll, as I am not quite sure I correctly understand this. If the control has items and nothing is above it that could intercept the input gestures, you should be able to freely scroll through its content.

I hope this helps.

Regards,
Deyan
Telerik

[Tom]

Hi Deyan,

I will double check to make sure I'm properly selecting the control correctly with Blend.  I will confirm later tonight. Unfortunately, I don't have my personal dev laptop with me at work.

Regarding the manually scroll not working within the control, you have me thinking that I may have any another control in front of it.  I have image set to be transparent filling the entire page.  I suspect this maybe the culprit.  It's just a matter of bring the LoopList to the front of the other controls within Blend.

Thanks.

[Tom]

I've upgrade the controls to the latest release RadControls for Windows Phone 8 Q2 2013.  The problems with not be able to edit the LoopListItem style within Blend have gone away.

Now it's just a matter of figure out how to wrap text within the LoopListItem.

Thanks for the help.

[Deyan]

Hello Tom,

Good that you've managed to solve the case. It might be so that the installation of RadControls did not work correctly before.

You can wrap the text by setting the TextWrapping property of the textblock element.

I hope this helps.

Regards,
Deyan
Telerik