CollectionViewSource, Design Time Data, Blend and Windows 8 - expression-blend

I have a problem in showing Design Time data in blend here is my code
This is my collection view source:
<CollectionViewSource
x:Name="DataSource"
Source="{Binding Groups}"
IsSourceGrouped="true"
ItemsPath="Items"
d:Source="{Binding ItemGroups, Source={d:DesignInstance Type=data:SampleData, IsDesignTimeCreatable=True}}"/>
And the Grid View that uses it:
<GridView
x:Name="itemGridView"
ItemsSource="{Binding Source={StaticResource DataSource}}"
My problem is that I am seeing the design time data only in VS11 but Not in Blend. Why is that?
Thanks

The answer depends on how you're instantiating your design-time data. It seems you might have been using a ViewModel? If so, check at what point you create it. e.g. are you creating it as an element in your XAML or are you creating it in the constructor of the view?
Really there should not be a difference in what you see at design time in Visual Studio vs what you see at design time in Expression Blend. If there is, you may need to do a clean and rebuild of the project in one of the programs. If the problem still persists, try closing Blend and reopening it.

Related

Windows 8 WrapPanel

I've got problem with automatically breaking StackPanel into next line. Here's the sample code:
<StackPanel Orientation="Horizontal" Width="180">
<TextBlock.../>
<TextBlock.../>
<TextBlock.../>
<Image.../>
...
</StackPanel>
Now I want to achive something like this: when there is not enough space for another element in the StackPanel it should be placed in new line. How I can achive this (it's not necessary to use stackpanel)?
PS: My goal is to place text and images in one line (it can of course break, when there is not enough space for another element). Maybe you can provide better solution than using textblocks and images?
Try the WrapGrid, it should do what you want:
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.wrapgrid.aspx
The only catch (which isn't a bad thing) is that WrapGrid can only display items in an ItemsControl, so use it this way (changing ListView to any ItemsControl):
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
Use VariabeSizedWrapGrid instead of StackPanel, see http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.variablesizedwrapgrid.aspx
For the multiple TextBlocks, consider using a single textBlock with multiple Runs. Your Image can of course not be included in the runs, but one TextBlock with two Runs is better than two consecutive TextBlocks.
UPDATE: This might actually not help you at all to get the layout you want. You may have to look at the RichTextBlock control, see http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.richtextblock.aspx
Out of the box, there's no WrapPanel available for WinRT. At least not for now...
However in the meantime there's a workaround... I've tested it and it works.
you can check the following links at the following link.
http://www.codeproject.com/Articles/24141/WrapPanel-for-Silverlight-2-0
Since WrapPanel inherits from Panel class, you can create a WrapPanel or simply use the
the WrapPanel.cs code you'll find in the above SLV 2 app.
then simply include similar code
xmlns:wrapPanel="using:yourWinRTApp"
....
<wrapPanel:WrapPanel Orientation="Horizontal" Width="400" >
....
</wrapPanel:WrapPanel>
it should do the trick ...
Info taken from:
http://www.michielpost.nl/PostDetail_75.aspx
You might use GridView, it have similar layout-behavior as the WrapPanel.

Is there a common navigation convention in an MVVM Light Windows Phone application?

As my app gets bigger I am finding that the same type of entity is appearing more and more throughout, typically in a listbox.
When someone taps on the entity, I want to navigate to the detailed view of this entity.
An example of this would be a product: it appears in a product list by category, it appears in search results, or it might appear as a saved favourite. In my instance, all of these would come from a table in local SQLCE storage.
Every time I surface the entity in some way that someone could tap on it, I basically cut the same code: subscribe to the SelectionChange event on the listbox, extract the entity, use MVVM Light messaging to signal that the selected entity has changed, then call NavigationService to do its business.
Has anyone worked on something similar and, if so, what have you came up with? Or more importantly, if there's some MVVM Light toolkit convention that I'm overlooking, could you please point me in the right direction?
Are you calling the NavigationService from code-behind or the View Model now? If the former, you could check the WP7 Navigation arcticle by LBugnion for triggering it from the VM. If you combine that with the EventToCommand behavior (like in here) you should be able to create a nice and clean "MyEntitySelected" command in the VM which takes the entity as a parameter.
I think the question here is, how do I deal with this without cut/paste the same code each time? If this is the case, maybe trying to package the entity/listbox thing in a XAML usercontrol! Take a look at this: http://www.windowsphonegeek.com/articles/Creating-a-WP7-Custom-Control-in-7-Steps
Then if the representation needs to be different, you could have a look at this: http://www.windowsphonegeek.com/articles/Implementing-Windows-Phone-7-DataTemplateSelector-and-CustomDataTemplateSelector ( this example does different styling in one listbox, but you can change this to only apply different style on each different page with a listbox on it )

WP7 LongListSelector properties not working

I am using the LongListSelector from the Mango Silverlight toolkit.
But I need to be able to set 'MaximumFlickVelocity' and 'BufferSize' but neither do anything.
For example:
<toolkit:LongListSelector IsFlatList="True" MaximumFlickVelocity="10" BufferSize="5" IsBouncy="False">
The properties there have no effect at all, except 'IsFlatList'.
Thanks.
EDIT: I just noticed in the documentation that all the properties I need at marked as Obsolete. So could anyone tell me what alternatives I have? Because the performance on this isn't great at all.
It depends on the kind of list you have. If you can afford to load more items into the list, as the user scrolls to the bottom of the list, you can use the StretchingBottom event on the longlistselector.
The property IsBouncy defaults to true in the latest release, so StretchingBottom is fired everytime the user scrolls to the bottom and then some.
In essence, you can play with the events and the ItemsSource property to improve the performance in an extremely long list. Well, I am not sure if it will be of much help, but it`s worth a try.
Good luck.

Advice re controls for keyboard app for WP7

I am looking to develop a keyboard app for WP7. My son has done a pretty good one for ios and I would like to do the same under wp7. I have a programming background but not in c# /Silverlight so seeing this as a chance to learn with a decent sort of project.
What I a struggling with is what controls I should use for this -even for starters i.e Stack Panel, Grid etc or whether I should be building a custom control. I haven't been near expression blend at all.
Really struggling with getting my head around the controls that I should be building this sort of thing with.
any advice appreciated.
Thanks .
As a general answer to this, I'd say that this sounds like a great first project - you'll soon get the hang of Silverlight and master these initial problems - just get in there and start coding.
To work out how these different containers work:
I like this set of simple explanations - http://wpf.nickthuesen.com/?page_id=33
try working through some sample apps - e.g. take a look at a blog like http://sigurdsnorteland.wordpress.com/ - his projects use Grids, Canvases, etc and are often all in one cs/xaml file - so easy to get to grips with.
By keyboard, do you mean "music" or "typing"?
Assuming "typing" then take a look at how this works - http://wpkeyboard.codeplex.com/
Assuming, music, then take a look at:
a simple piano - http://script.iron7.com/#/Script/Detail?scriptId=91287aa96ca74892b96171313c9b5ea2&userLowerCaseName=stuart
a simple xylophone - http://script.iron7.com/#/Script/Detail?scriptId=6db87d269f3e4f18834bcece0e13fb8d&userLowerCaseName=stuart
Both of these use a set of buttons within a StackPanel.
For more advanced layout - e.g. for a keyboard that includes those black notes as well as the white ones, then you can look at using a Grid or a Canvas
Sorry - just looked some more - the music samples above are in ruby and contain some animation for when each key is pressed, so they might not be that easy for you to follow - but the basic idea is that those apps use very simple layout like:
<StackPanel>
<Button />
<Button />
<Button />
<Button />
<Button />
<Button />
</StackPanel>
One thing to bear in mind is that you can design several sets of layout independently of your app logic - so you can start with something simple/ugly and then make it more advanced/beautiful by changing only the xaml.
The display of the SIP is handled by the operating system and will always be on top of the visual tree of any application. If you want to provide a custom SIP, you will need to provide an alternative input control, because the display of the native SIP is tied to input controls (such as TextBox, PasswordBox, etc.). You may find this article about creating a Bulgarian keyboard useful.
In terms of actually layout out the keyboard, I'd probably go for a Grid-based layout, which gives you the flexibility to span multiple columns to make individual keys larger.

How to draw a grid in SketchFlow?

Since there is no grid asset in SketchFlow, what is the best way to represent one? Does everyone just use the rectangle asset?
At the time the question was posed, there were workarounds and kludges. But now--with the advent of the just-released (June 7, 2010) SketchFlow/Blend version 4 there is a great solution: Sketchables from Philipp Sumi. This add-on to SketchFlow 4 lets you use concise markup to customize and tailor a control to display sophisticated output--including the SketchableDataGrid.
Sketchables is a completely new package, due to be released the week of June 21, 2010, according to his blog. He has a startling demo video on his site, though. For a snapshot of the SketchableDataGrid take a look at Figure 12 in my just-published article Creating WPF Prototypes with SketchFlow, June 18, 2010.
(I have no connection with Philipp Sumi other than admiration for his Sketchables product.:-)
There should be a DataGrid Asset (defined in System.Windows.Control.Data.dll -Might need to add a reference?) which I think is what you're looking for.
The first thing you need to do is create a datasource.
You can create a data source by choosing the data tab in the top right corner and clicking on the "define new sample data" icon. Under the collection you should be able to add/edit the field properties for the data source. The data source will have auto-generated data for you (a very cool feature!). This can be replaced by selecting the "Edit Sample Values" icon beside the collection if desired.
Next you can drag a data grid onto your screen and set the data source by choosing the ItemsSource property on the grid (the data binding option should be chosen). On the data field tab you can choose your data source. Make sure to select the actual "Collection(array)" option on the right hand side. By default it should auto generate the columns for you. This can be changed if you want more control the column header names, etc.
Hope this helps.
I did it using a ListBox-Sketch.
Check it out here.
There isn't a 'sketch' style grid, so you have 2 options:
Use a list box and edit the template to be a grid / horizontal stack panel with borders etc.
Use the standard grid, you can still make the text 'Buxton Sketch' font so it still looks pretty good, but it does have some chrome effects breaking the 'pure sketch' look
Use what suits you best.
First of all, if you are using Silverlight based sketch, you have a datagrid available otherwise if you are working with WPF you could use WPF Toolkit which includes one.
To make a Silverlight datagrid "sketchy" please take a look at the sample at:
http://cid-99b45ff02d12b84d.skydrive.live.com/self.aspx/Public/Scratch/SilverlightPrototype8.zip
I think this sample also applies to a WPF based sketch with a datagrid from WPF toolkits with only minor adjustments...
Good luck
I am not 100% clear on what you are trying to do. You could use the SketchBorderUC or a Rectangle-Sketch.
What visual representation are you trying to achieve that you would use a grid for?

Resources