I created a sample app with mono wizard "MonoGame Windows Store(XAML) Project".
it created page GamePage.xaml
<SwapChainBackgroundPanel
x:Class="Mono.GamePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Mono"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Background="LightGray">
<Button Content="Stop" x:Name="btnStartStop" Click="btnStartStop_Click"/>
</StackPanel>
</Grid>
</SwapChainBackgroundPanel>
However, I want to add this SwapChainBackgroundPanel into another xaml page (example BlankPage.xaml).
But, when I run the app. it report an exception
WinRT information: Cannot add instance of type 'GamePage' to a collection of type 'Windows.UI.Xaml.Controls.UIElementCollection'.
So, Can anyone tell me what's wrong with this? and How can I do this? I want to add SwapChainBackgroundPanel as a sub control of other page.
Can SwapChainPanel be added as a sub-control (your question) == yes.
Can sub-controls be added to a SwapChainPanel? (your code) == no.
Related
So I've decided to migrate from Windows Phone 8.0 to Windows Phone 8.1 API - not the silverlight one.
The reason was that I wanted to use Win2D drawing library which is not supported for Silverlight 8.1 or WP 8.0
The weird things are happening.
Simple Pivot view is incredibly laggy and also it is not displaying views properly.
I am using latest Visual Studio 2015. On the video I linked you can see the result of following Page XAML code (just for testing):
<Page
x:Class="Apptest2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Apptest2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Column="0">
<Button Content="Go"
/>
</StackPanel>
<Pivot Grid.Row="1"
x:Name="PivotView"
Margin="10,0,10,15"
CacheMode="BitmapCache"
VerticalContentAlignment="Stretch">
<PivotItem Header="item1">
<Grid Background="BlueViolet" />
</PivotItem>
<PivotItem Header="item2">
<Grid Background="BlueViolet" />
</PivotItem>
<PivotItem Header="item3">
<Grid Background="BlueViolet" />
</PivotItem>
<PivotItem Header="item4">
<Grid Background="BlueViolet" />
</PivotItem>
<PivotItem Header="item5">
<Grid Background="BlueViolet" />
</PivotItem>
<PivotItem Header="item6">
<Grid Background="BlueViolet" />
</PivotItem>
</Pivot>
</Grid>
</Page>
Is anyone able to tell what is going on here? Should I use some pivot analogs from 3rd parties or maybe just forget about using it in new os?
Pulling my hair out.
Any solution would be hugely appreciated!
Link to video
The problem is you are using CacheMode="BitmapCache" on your Pivot. Remove this line and the performance should be good after.
First of all the caching is applied to the element and all of it’s child elements and BitmapCaching should be used in scenarios where you are blending, transforming (translating, stretching, rotating). If you need BitmapCaching then try not to use it on root controls, use it on the children that really need BitmapCaching.
Misuse of the CacheMode feature can hurt performance, so you need to really think through what you are doing. If your visual tree is interleaving cached and un-cached elements, you are effectively causing multiple rendering surfaces to get created behind the scenes. The un-cached surfaces are rendered in software and the cached surfaces are rendered in hardware. Your performance will be best if you can minimize the total number of rendering surfaces and get the hardware to do work where it can.
Reference from another StackOverflow answer. I hope it helps.
I'm experimenting with Windows Phone 8 development and have hacked together a little app from examples here and there. However, I have stumbled upon a problem which I'm kind of stuck with: When I add an application bar to a page (either in XAML or in C#), it hides the bottom part of the content with no ability to scroll down either.
My XAML is:
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
xmlns:maptk="clr-namespace:Microsoft.Phone.Maps.Toolkit;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
x:Class="MyApp.MainPage"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock x:Name="appNameText" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<maps:Map x:Name="locationMap" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="446" Height="347">
<maptk:MapExtensions.Children>
<maptk:Pushpin Name="MyLocation" Visibility="Collapsed" />
</maptk:MapExtensions.Children>
</maps:Map>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="165,362,0,0" VerticalAlignment="Top" Width="291" />
<TextBlock x:Name="longitudeText" HorizontalAlignment="Left" Margin="338,462,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="longitude placeholder"/>
<TextBlock x:Name="latitudeText" HorizontalAlignment="Left" Margin="338,507,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="latitude placeholder"/>
<toolkit:ToggleSwitch x:Name="switch1" IsChecked="True" Content="First switch" Margin="165,424,24,76"/>
<toolkit:ToggleSwitch x:Name="switch2" Margin="114,482,24,10" Content="Second switch" IsChecked="True"/>
</Grid>
</Grid>
And the code that creates the app bar:
// // Set the page's ApplicationBar to a new instance of ApplicationBar.
ApplicationBar = new ApplicationBar();
// // Create a new button and set the text value to the localized string from AppResources.
ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/AppBar/appbar.add.rest.png", UriKind.Relative));
appBarButton.Text = AppResources.AppBarButtonText;
appBarButton.Click += appBarButton_Click;
ApplicationBar.Buttons.Add(appBarButton);
// // Create a new menu item with the localized string from AppResources.
ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);
ApplicationBar.MenuItems.Add(appBarMenuItem);
The result without the app bar:
and with the app bar added:
Notice the missing labels for the switches. (Actually, the bottom switch itself was hidden too, but it looks as if mindlessly fiddling around "fixed" it.
So, long question short: could somebody please point out what the heck I'm doing wrong for such anomalies to appear?
Pages do not automatically contain a ScrollViewer, so you need to add one around the elements that you want to be scrollable (in your case, I guess that means around the LayoutRoot grid).
ScrollViewer.VerticalScrollBarVisibility="Auto" is something that a ScrollViewer would use to determine whether to be visible or not, but since there is no ScrollViewer at all, that does nothing. (This is an attached property, much like Grid.Row for example, which is only useful if the element is in a Grid.)
There's only one case (that I know of) in which the app bar is actually in front of the page: when the AppBar's Opacity is not 100%. In this case, the Page actually goes behind it, so you have to manage what/where/how is visible yourself.
Im trying to add webview inside xaml. It gives this error. I ve searched but couldnt find the answer. Is it possible to add webview inside WP8 page.
<Grid x:Name="todaysGrid" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<WebView x:Name="webView1" Grid.Row="0" Height="800"/>
</Grid>
Error 1 The type or namespace name 'WebView' could not be found (are you missing a using directive or an assembly reference?)
Thanks.
The control is called WebBrowser.
When using the Panorama control, elements in a non-active PanoramaItem respond to tap events. You can reproduce this with the following XAML, which is only very slightly modified from the Panorama Application solution template that ships with the Windows Phone 8 SDK. You can see how items in the second PanoramaItem are tappable, even when that PanoramaItem is not active.
<phone:Panorama Title="my application">
<phone:Panorama.Background>
<ImageBrush ImageSource="/PanoramaApp1;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>
<!--Panorama item one-->
<phone:PanoramaItem Header="first item">
<!--Single line list with text wrapping-->
<phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,-6,0,12">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem>
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432" Tap="SecondItem_OnTap">
<!--Replace rectangle with image-->
<Border BorderThickness="1" Width="99" Height="99" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
<StackPanel Width="311" Margin="8,-7,0,0">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
</phone:Panorama>
Notice the "SecondItem_OnTap" Tap event handler hook-up in the LongListSelector.ItemTemplate in the second PanoramaItem.
I've observed this behavior in every app that isn't pre-installed on the phone, in other words, all non-Microsoft apps, including apps like Facebook and Pandora. Does anyone have
First, any insight as to why the behavior is different between Microsoft and non-Microsoft apps; and
Secondly, any suggestions on how to work around this behavior?
It's cumbersome, but you could capture the SelectionChanged event of the Panorama and disable clickable elements.
Yeah, this is a well known issue with panorama control. We addressed it in one of our apps by creating transparent overlay on top of inactive panorama item. Downside of this method is if you start side swipe on top of the overlay the gesture will be ignored. For our latest app we simply ignore this behaviour. If Microsoft was concerned about it they would fix it. As to why, well, Microsoft obviously doesn't use standard phone controls in their apps.
Thanks for the answers guys! I solved it with the following:
private void Panorama_OnSelectionChanged(object sender, SelectionChangedEventArgs e) {
this.UpdateHitTestForPanoItems(this.Panorama.SelectedItem);
}
private void Panorama_OnLoaded(object sender, RoutedEventArgs e) {
this.UpdateHitTestForPanoItems(this.Panorama.SelectedItem ?? this.Panorama.Items.FirstOrDefault());
}
private void UpdateHitTestForPanoItems(object selectedItem) {
foreach (PanoramaItem item in this.Panorama.Items) {
item.IsHitTestVisible = item == this.Panorama.SelectedItem;
}
}
Of course, you'll need to actually hook up the Loaded and SelectionChanged events to the Panorama_OnLoaded and Panorama_OnSelectionChanged methods, respectively. I could also see moving this to a Behavior, which you could use on other Panoramas in your app.
See the following very basic XAML. I run it in simulator in touch mode. I can drag the item right or left, but cannot down. It does work great when using mouse mode. After some googling I saw this thread (http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/8bb5e423-4517-448b-89ce-179a978e9e2d/), but it did not help me out.
<Page
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ListView Background="AliceBlue"
AllowDrop="True" CanDragItems="True" SelectionMode="None" CanReorderItems="False"
IsItemClickEnabled="False" IsSwipeEnabled="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Margin="10">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="Blue" Width="100" Height="100"/>
</DataTemplate>
</ListView.ItemTemplate>
<x:String>s1</x:String>
<x:String>s2</x:String>
<x:String>s3</x:String>
</ListView>
</Grid>
</Page>
This is something so basic and it is strange that it does not work for me.
Does somebody know any solution or workaround?
Thanks
Meir
I might be wrong but AFAIK using touch you can only tear off items perpendicular to the scrolling direction. The same has been mentioned in the forum post you're linking to. If you set IsSwipeEnable=False you disable this behavior as well.
If you want your ListView to scroll horizontally instead, since you've already changed the orientation of ItemsPanelTemplate, you need to add the following to your ListView:
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
Now tear off will work vertically instead of horizontally which should be more intuitive given your current layout.