Windows 8 WrapPanel - windows

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.

Related

Lottie IsPlaying and Loop replacement xamarin forms

I just updated to the latest version of Lottie; we are using Xamarin forms and now my app is crashing because it cannot find
IsPlaying
Loop
Can anyone tell me by what have they been replaced by?
Cannot find anything suggesting the replacement.
I have been playing around with lottie in XF a bit lately and I think I can help you.
IsPlaying
I think this has been replaced with IsAnimating="{Binding IsAnimating}".
Loop
There is no exact replacement for this. If you want an infinite loop you can use RepeatMode="Infinite" and omit to set the RepeatCount field.
If you want to play the animation for a specific number of times you can skip the RepeatMode field and instead just set RepeatCount="1". This will repeat the animation one time. If you want it to only play one time and then stop you can skip the RepeatCount field entirely or set it to RepeatCount="0"
The RepeatMode field can probably be combined with the RepeatCount field too but I haven't tested the different modes of that yet.
Here is a sample from my xaml. It loops animation.json infinite.
<forms:AnimationView
x:Name="animationView"
Animation="animation.json"
AutoPlay="True"
RepeatMode="Infinite"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />

Using the Enter Key to move between Textboxes

A user of one of my apps said that he was "expecting" the Enter key to move between the Textboxes. Is there a way to do that with the Windows Phone?
See you can set the TabIndex of each control but do I have to write a lot of code to capture the onKeyDown?
Just wondering if there is an easy way to add this feature.
One decent options is, by implementing logic to move between Textboxes as Custom Behavior. Like done by Mike Hole as written in his blog. With Mike's custom behavior, we can simply attach that behavior to the textbox and specify control name to move focus to upon enter key pressed :
<TextBox x:Name="txtUsername">
<i:Interaction.Behaviors>
<mh:OnEnter NextControlName="txtPassword" />
</i:Interaction.Behaviors>
</TextBox>

CollectionViewSource, Design Time Data, Blend and Windows 8

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.

Adding a new line in a TextBlock when needed

I'm reading JSON from a WebService and put my data in a list of textblocks (wrapped in grids).
Sometimes the text is long and I would like that the textblock would add automatically a new line if needed (instead going to the right endlessly).
I've read somewhere that I should wrap the textblock in a Label (not recognized by VS2010?)..
I cannot put <\newline> or \n or anything because I don't know where or when.
Thanks.
You could set the TextWrapping property to Wrap:-
http://msdn.microsoft.com/en-us/library/system.windows.controls.textblock.textwrapping.aspx
Add like this in your xaml
<TextBlock TextWrapping="Wrap"/>
You can set TextWrapping property of Textblock to Wrap from Designer or from XAML....

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.

Resources