My Windows 8 c#/xaml app has 3 big Grids with the Content inside. Each one fills exactly out the screen. This System works very well for my purpose, until the user snapps my app.
So is it possible to completly change the Grid definitions, or pull all the textboxes,buttons and listviews in a other "snapped" Grid? Last one is just an idea.
private void pageRoot_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (ApplicationView.Value == ApplicationViewState.Snapped)
{
????
}
else
{
Grid1.Width = Windows.UI.Xaml.Window.Current.Bounds.Width;
Grid2.Width = Windows.UI.Xaml.Window.Current.Bounds.Width;
Grid3.Width = Windows.UI.Xaml.Window.Current.Bounds.Width;
}
}
This is a scenario where MVVM becomes incredibly handy. By creating two separate views, one each for snapped, filled, and full screen, you can swap between them relatively easy.
Your other option is to use the new FlipView control. There's a great example of this in the Contoso Cookbook sample app that can be found in the Windows 8 Dev Camp in a Box.
http://bit.ly/win8RCdevcamp
Here's the example code from the Contoso Hands-On Lab:
<FlipView.ItemTemplate>
<DataTemplate>
<UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer" Style="{StaticResource VerticalScrollViewerStyle}" Grid.Row="1">
<!-- Vertical StackPanel for item-detail layout -->
<StackPanel Orientation="Vertical" Margin="20,0,20,0">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="20" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap"/>
<Image x:Name="image" Width="260" Margin="0,12,0,40" Stretch="Uniform" Source="{Binding Image}" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="20" FontWeight="Light" Text="Ingredients" Margin="0,0,0,16"/>
<TextBlock FontSize="16" FontWeight="Light" TextWrapping="Wrap" Text="{Binding Ingredients, Converter={StaticResource ListConverter}}" />
</StackPanel>
</StackPanel>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemplate>
As you can see, for each FlipView, a different display state is referenced. I'd recommend checking out that hands-on lab for a more specific look at your situation, or this other sample that includes both HTML and XAML examples of the FlipView control:
http://code.msdn.microsoft.com/windowsapps/FlipView-control-sample-18e434b4
In your scenario I would navigate to a different page when I detected the change to snapped and load a page that has a snap optimized experience rather than trying to dynamically update the layout of a complex page.
Related
I've got the following piece of XAML code:
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding History}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Tapped="HistoryItemTapped">
<FlyoutBase.AttachedFlyout>
<Flyout>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer>
<TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}" />
</ScrollViewer>
<ScrollViewer>
<TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}" />
</ScrollViewer>
</StackPanel>
</Flyout>
</FlyoutBase.AttachedFlyout>
<TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}"
TextTrimming="CharacterEllipsis"/>
<TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
There are two problems I can't solve:
The flyout is shown upon tapping on one of items:
private void HistoryItemTapped(object sender, TappedRoutedEventArgs e)
{
FlyoutBase.GetAttachedFlyout((FrameworkElement)sender).ShowAt((FrameworkElement)sender);
}
However, no matter how I set up the flyout it always shows on the top of the screen, not over the tapped item. Why?
The flyout contains two TextBlocks on separate ScrollViewers. The text on one of them exceeds width of the flyout, bt the scrollviewer does not appear to be working (I cannot scroll horizontally the textblock). Why is that?
So let's knock these out real quick. Your #1 would be expected result, it's just going off the default FlyoutPlacementMode enumeration wherein generally your flyout is just meant to appear over the top in one of 5 spots, Top, Bottom, Left, Right, or Full(Center)
How to fix it, ditch the flyout control and just animate your own panel to do the same thing on a tap event or whatever, not hard at all.
Your #2, if I remember right the default on ScrollViewerfor something like the HorizontalScrollBarVisibility is False by default. So just add HorizontalScrollBarVisibility="Auto" to it.
Hope this helps, cheers
I am trying to figure out how to have two columns of different binded data on one page. The left column for sounds the right for a save ringtone task for each sound.
I can't put two longlistselectors on one page, it wont let me.
Using a sample, its easy to see how to used binded data for the sound. And the great thing is you only have to enter new code into the binded items and it automatically populates each page with new sound tiles.
Id like to add a save ringtone tile that would essentially work the same way. But it would only make sense if I can get the save ringtone tiles next to the sound tiles on the same page.
Is there any way to do this? All I really need to know, I think, is how to get two columns of different data bindings onto the same page, hopefully in a longlistselector so it will scroll.
Here is a sample of the code im using now.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="SoundTileDataTemplate">
<Grid Background="{StaticResource PhoneAccentBrush}"
Margin="0,0,135,0">
<Grid VerticalAlignment="Top"
HorizontalAlignment="right"
Width="40"
Height="40"
Margin="0, 6, 6, 0">
<Ellipse Stroke="{StaticResource PhoneForegroundBrush}"
StrokeThickness="3"/>
<Image Source="/Assets/AppBar/Play.png" />
</Grid>
<StackPanel VerticalAlignment="bottom">
<TextBlock Text="{Binding Title}"
Margin="6,0,0,6"/>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<phone:Pivot Title="{Binding Path=LocalizedResources.ApplicationTitle,
Source={StaticResource LocalizedStrings}}">
<!--Pivot item one-->
<phone:PivotItem Header="{Binding Animals.Title}">
<!--Double line list with text wrapping-->
<phone:LongListSelector Margin="0,0,-12,0"
ItemsSource="{Binding Animals.Items}"
LayoutMode="List"
ItemTemplate="{StaticResource SoundTileDataTemplate}"
SelectionChanged="LongListSelector_SelectionChanged">
</phone:LongListSelector>
</phone:PivotItem>
</phone:Pivot>
</Grid>
Easy solution.
<DataTemplate x:Key="NewItemTemplate">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" >
<StackPanel Orientation="Horizontal" Width="56">
<CheckBox x:Name="CheckBox1" HorizontalAlignment="Left" IsChecked="{Binding Checked, Mode=TwoWay}" BorderBrush="Black" Style="{StaticResource CheckBoxStyleGrey1}" Width="90" Height="74" />
</StackPanel>
<StackPanel Orientation="Horizontal" RenderTransformOrigin="0.5,0.5" Width="803" >
<StackPanel.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</StackPanel.RenderTransform>
<TextBlock Text="{Binding lItem}" Foreground="Black" FontSize="45" Margin="-176,0,0,0" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Text="{Binding lCategory}" Foreground="Black" Margin="-146,0,-2,0" RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
Edit the ItemTemplate based on your needs, and you might have to play around with it in blend if there is an error. In Blend, go to your long list selector and edit the item template.
First of all, by aiming to add 2 long list selectors next to each other, you are approaching to this problem from a very wrong perspective. That's bad for the user, bad for UX, bad for the sake of UI design and bad for the unicorns.
You are trying to associate a functionality (Save ringtone) within another LongListSelector, to the corresponding Item in another Long List Selector. What an earth made you think that adding another Long List Selector and populating it with many Save Ringtone buttons is going to solve your problem? For a second, let's say you somehow achieve adding two Long List Selectors next to each other and deployed your items on the left selector and save ringtone buttons on the right. How you are planning to correctly associate them when they are scrolled? User will scroll the left one and the right Long List Selector will remain static.
You shouldn't add one more Long List Selector to your front. Instead you should go and modify your ItemTemplate in one Long List Selector. Then you will be able to have more than one tile, button, text or whatever you need for one single LongListSelector Item.
ItemTemplate="{StaticResource SoundTileDataTemplate}"
I am not going to submit a solution to add more than one button/tile/text for one LongListSelector item and associate their communication/functionality. Because there are already some 5 million example on the internet about this.
I highly recommend reading Design Guidelines for Windows Phone for you. Because you have such ideas that will result as one more crappy app on the Store. People really got enough of crappy apps. So please either completely stop developing apps for Windows Phone or give a break to whatever you are doing now and go read the design principles.
I have a little problem using the longlistselector (well more specifically the multilonglistselector) in windows phone 8.
I use binding to bind the name of an object to the items, the XAML code is as follow:
<Grid>
<TextBox x:Name="searchBox"
IsEnabled="{Binding IsConnected}"
HorizontalAlignment="Left" KeyUp="CheckKey"
Height="72" Margin="10,10,0,0" TextWrapping="Wrap" InputScope="Search" GotFocus="Select"/>
<toolkit:LongListMultiSelector EnforceIsSelectionEnabled="True" SelectionChanged="AdjustAddSelectionButton" x:Name="resultList" ItemsSource="{Binding Results}" HorizontalAlignment="Stretch" Height="434" Margin="10,87,0,0" VerticalAlignment="Top" >
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Title}" TextWrapping="Wrap">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DoubleTap="OpenArticleDetail" />
</toolkit:GestureService.GestureListener>
</TextBlock>
</Grid>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
The Binding takes place perfectly, but the text is sometimes too long and doesn't fit the screen. How would I go about wrapping this text to another line?, I 'll give a screenshot here
You didn't really state any specific problem or question you want answered. Please try to be a bit more clear in the future.
If you don't like that the TextBlock cuts off words that it can't fit, then you have several solutions.
TextBlocks have a TextWrapping property, so doing TextWrapping="Wrap" will enable the TextBlock to resize itself to display all the content.
TextBlocks have the TextTrimming property, so writing TextTrimming="WordEllipsis" will replace any cut off words with an ellipsis.
If you want to keep the one line but also show all the content, you can put the TextBlock inside a Horizontal ScrollViewer, which will let the user scroll the text left and right. Not great, but a decent solution
Code for 3.
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible">
<TextBlock Text="Text"/>
</ScrollViewer>
I added a huge right padding to my main TextBlock to work around this issue.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="MyTemplate">
<StackPanel VerticalAlignment="Top" Margin="0,-4,-50,0">
<TextBlock FontWeight="Bold" FontSize="18" Text="{Binding title}" TextWrapping="Wrap" Margin="0,0,0,6"/>
<TextBlock Text="{Binding text}" TextWrapping="Wrap" FontSize="30" Padding="0,0,125,0"/>
<Rectangle HorizontalAlignment="Stretch" Height="1" Fill="#78c5a6" Margin="0,18,0,18"/>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
I have the following setup
<grid>
<StackPanel>
<ListBox>
<TextBlock> ->Text you see getting cutt off<-
I have tried both just doing listbox.Add(String) and dynamically creating a TextBlock, assigning it text and then adding it to the listbox. Both produce identical results.
The image shows the listbox scrolled down half wayish. It appears the listbox has the correct height but the text inside hits some kind of limit.
UPDATE I changed the listbox to a scroll viewer and also hardcoded the Textblock in. Still same exact results
<Grid x:Name="theGrid" Grid.Row="1" Margin="12,0,10,0">
<StackPanel x:Name="TitlePanel" Grid.Row="0">
<TextBlock Text="Networking Tools" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<StackPanel x:Name="stack">
<TextBlock x:Name="inputIndicator" Margin="12,0,0,0">
<Run Text="Enter IP OR Domain"/>
</TextBlock>
<telerikPrimitives:RadTextBox x:Name="input" Text="google.com" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Grid.Row="1" Height="84" Width="458"/>
<telerikInput:RadListPicker SelectionChanged="picker_SelectionChanged" x:Name="picker" HorizontalAlignment="Left" VerticalAlignment="Top" Width="436"/>
<Button Click="Button_Click" Content="Go" HorizontalAlignment="Left" VerticalAlignment="Top" Width="456"/>
<ScrollViewer HorizontalAlignment="Left" Height="392" Width="Auto" x:Name="list" VerticalAlignment="Top">
<TextBlock Name="content" Height="Auto" Width="Auto"/>
</ScrollViewer>
</StackPanel>
<UI:AdControl ApplicationId="test_client" AdUnitId="Image480_80" Height="80" Width="480"/>
</StackPanel>
<telerikPrimitives:RadBusyIndicator Margin="0,0,0,0" Height="106" Width="116" AnimationStyle="AnimationStyle1" x:Name="busyIndi" />
</Grid>
UI elements in Windows Phone 7 have a maximum renderable height and width of 2048 pixels. Any content that is larger than that gets clipped. The limit is only slightly higher for Windows Phone 8.
You did not mention how much text you are trying to show, but if it is very long, you could be hitting that limit.
There are a few ways you could handle this:
1) Break the text into smaller chunks and add individual TextBlocks to your StackPanel for each chunk.
2) Create a custom control that does the above for you, like this one: http://blogs.msdn.com/b/priozersk/archive/2010/09/08/creating-scrollable-textblock-for-wp7.aspx
3) Use a WebBrowser control instead of a TextBlock, and use its NavigateToString method to put your text in there.
How is it possible to highlight the selected item in the new LongListSelector on Windows Phone 8? Actually nothing happend if I tapped one entry of the list. My list only contains a simple string which will be displayed through a TextBlock. But I want to highlight the selection of the user.
Thanks.
In my case I used a RadioButtonControl in the DataTemplate of the LongListSelectorItem to achieve this. You will have a checked oder unchecked sign at the left border.
In any case it is important, that you set the same group for all Radiobuttons, so the selection only represents one entry.
Inside the Contentor your RadioButton you can put the TextBlock bound to the String.
Im currently not at home, but if this wont solve your problem, I'll provide you some code when I'm at home ;)
Here you go:
<LongListSelector.ItemTemplate>
<DataTemplate>
<ContentControl HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">
<RadioButton HorizontalAlignment="Stretch" Margin="0,0,0,0" GroupName="A" Background="Black" >
<StackPanel toolkit:TiltEffect.IsTiltEnabled="True">
<TextBlock Text="{Binding Path=XXX}"
TextWrapping="Wrap"
Foreground="Black"
Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Path=XXXX}"
TextWrapping="Wrap"
Foreground="Black"
Margin="14,-6,0,0"
Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</RadioButton>
</ContentControl>
</DataTemplate>
</LongListSelector.ItemTemplate>