I am developing a Windows Phone 8 application using the Panorama Page.
I have around 5-6 Panorama items in my page which the user can scroll.
Currently i am binding the data of those pages when the Panorama page is loaded. Some of my Panorama items fetch data from the web service. For those pages, i want to fetch data only when the user scrolls to that item .
How can i achieve that ??
Add a handler for your Panorama's SelectionChanged event and inspect the Panorama's SelectedIndex or SelectedItem properties to determine if the desired PanoramaItem is selected.
XAML
<phone:Panorama x:Name="myPanorama" Title="my application" SelectionChanged="Panorama_SelectionChanged">
<!--Panorama item one-->
<phone:PanoramaItem Header="item1">
<Grid/>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem Header="item2">
<Grid/>
</phone:PanoramaItem>
</phone:Panorama>
Code Behind
private void Panorama_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (myPanorama.SelectedIndex == 2)
{
// Take on-demand actions
}
}
Related
I'm using Nativescript with Typescript/Angular and, for both iOS and Android, I'd like to hide the navigation tab buttons completely without losing the swipe functionality between the tabs.
Said another way: I want the tab content, but not the buttons.
I'm open to other suggestions to gain the same functionality without the tab navigation menu.
The closest answer I could find was this:
NativeScript How to hide tab buttons from TabView
However, this answer didn't work. It caused the entire page to go white and none of the tab items appeared. It seemed as though the swipe functionality ceases to function as well.
Any ideas?
This is inside the html (not xml) file:
<TabView id="mainTab" selectedIndex="1">
<StackLayout *tabItem="{ title: 'Tab 1' }">
<app-page-one></app-page-one>
</StackLayout>
<StackLayout *tabItem="{ title: 'Tab 2' }">
<app-page-two></app-page-two>
</StackLayout>
<StackLayout *tabItem="{ title: 'Tab 3' }">
<app-page-three></app-page-three>
</StackLayout>
</TabView>
Old question but maybe someone else also hits this so giving more updated answer.
Nativescript v6 introduced Tabs (and BottomNavigation) with purpose to replace TabView: https://nativescript.org/blog/tabs-and-bottomnavigation-nativescripts-two-new-components/
So solution with Tabs is simply to remove the TabStrip portion, e.g.
<Tabs>
<TabContentItem>
<GridLayout>
<Label text="Content for Tab 1" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Content for Tab 2" />
</GridLayout>
</TabContentItem>
</Tabs>
The best way todo this is to do it programatically. Take alook at this issue here at https://github.com/NativeScript/nativescript-angular/issues/621.
Simply create tabs programmatically and then you can control them. You can't remove tabs from hierarchy once they are added to the tree from the UI.
I had the same problem and found a solution that works on android at least, maybe somebody can provide an iOS solution. You need to annotate the TabView so you can access the underlying Android component like i did with #mainTabView
<TabView #mainTabView androidTabsPosition="bottom">
<GridLayout *tabItem="{iconSource: 'res://ur_news', title: 'Home'}">
<Label text="Tab 1"></Label>
</GridLayout>
[...]
</TabView>
Then, in the component you can reference this element, access the internal tabView and use android native calls to hide it.
import { Component, ElementRef } from '#angular/core';
[...]
// angular will inject a reference to the native implementation here, we can use it
#ViewChild('mainTabView') containerRef: ElementRef;
[...]
protected handleAndroidFullscreenMode(isFullscreen: boolean): void {
// wait a little bit until calling this - if it is empty it might not yet be there
// fetch the underlying nativeElement
const tabView = this.containerRef.nativeElement as TabView;
if(!tabView) {
console.log("native element not yet initialized");
return;
}
// the tabLayout contains the buttons we want to hide
const tabLayout = tabView.nativeView.tabLayout;
if(!tabLayout) {
console.log("No tab layout");
return;
}
// use native android methods to hide them
if(isFullscreen) {
tabLayout.setVisibility(android.view.View.GONE);
} else {
tabLayout.setVisibility(android.view.View.VISIBLE);
}
}
I am exploring Polymer with the Shop Application (https://github.com/Polymer/shop)
In the Shop-App.html following iron-pages are defined.
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
<!-- home view -->
<shop-home name="home" categories="[[categories]]"></shop-home>
<!-- list view of items in a category -->
<shop-list name="list" route="[[subroute]]" offline="[[offline]]"></shop-list>
<!-- detail view of one item -->
<shop-detail name="detail" route="[[subroute]]" offline="[[offline]]"></shop-detail>
<!-- cart view -->
<shop-cart name="cart" cart="[[cart]]" total="[[total]]"></shop-cart>
<!-- checkout view -->
<shop-checkout name="checkout" cart="[[cart]]" total="[[total]]" route="{{subroute}}"></shop-checkout>
<shop-404-warning name="404"></shop-404-warning>
</iron-pages>
In the "shop-list" element, I have added
attached: function() {
console.log("I am attached..");
},
detached: function() {
console.log("I am detached..");
}
When I run the application, and visit the Shop-List view, in the console, "I am attached" is shown. When i go to other pages, shop-list's detach event is not triggered.
And whatever data that is stored in the Shop-List view will persist if I go back to the screen.
How to avoid this?
Can we have a new instance created each time the page is visited and clean up the logic on page change??
Everything you will propably need is property page. Whenever this property change, you have to observe it and make changes. So something like this:
page: {
type: String,
value: "foo",
observer: "_observePage"
},
and then define a function called _observePage
_observerPage: function(newValue, oldValue) {
// handle logic like reset data and so on
}
function _observerPage is called everytime when page property changes. There are also 2 variables passed to the function, represents new value and old value of page
link to documentation: https://www.polymer-project.org/1.0/docs/devguide/observers
There are another solutions. Like using page.js which can be seen in many Polymer tutorial videos. This library simplify your project routing very much. You can define functions for page enter and page exit.
And about new instance every time you visit site:
Solution would be delete and re-create that element. For example
var list = document.querySelector("shop-list");
document.body.removeChild(list);
var newList = doucment.createElement("shop-list");
document.body.appendChild(newList);
I have recently upgraded my OS to Windows 10 from Windows 8.1. I'm using VS 2013 With update 4.
My app using the Treeview control from XAMLToolkit, and it works perfectly on Windows 8.1 environment. But under Windows 10, it gives me the following error.
Please help.
This is the XAMLToolkit version I've used:
nuget.org/packages/winrtxamltoolkit.windows
Exception message:
System.Runtime.InteropServices.COMException: Error HRESULT E_FAIL has been returned from a call to a COM component.
at Windows.UI.Xaml.Controls.ItemsControl.get_ItemTemplate()
at WinRTXamlToolkit.Controls.HeaderedItemsControl.PrepareHeaderedItemsControlContainer(HeaderedItemsControl control, Object item, ItemsControl parentItemsControl, Style parentItemContainerStyle)
at WinRTXamlToolkit.Controls.HeaderedItemsControl.PrepareHeaderedItemsControlContainerForItemOverride(DependencyObject element, O
Stacktrace:
at Windows.UI.Xaml.Controls.ItemsControl.get_ItemTemplate()
at WinRTXamlToolkit.Controls.HeaderedItemsControl.PrepareHeaderedItemsControlContainer(HeaderedItemsControl control, Object item, ItemsControl parentItemsControl, Style parentItemContainerStyle)
at WinRTXamlToolkit.Controls.HeaderedItemsControl.PrepareHeaderedItemsControlContainerForItemOverride(DependencyObject element, Object item, ItemsControl parent, Style parentItemContainerStyle)
at WinRTXamlToolkit.Controls.TreeView.PrepareContainerForItemOverride(DependencyObject element, Object item)
at Windows.UI.Xaml.FrameworkElement.MeasureOverride(Size availableSize)
Inner exception is null
I encountered same issue, what i did is just removed the itemtemplate inside treeview control and added separately in page resource and i refered the itemtemplate to my treeview control. it solved my issue.
<Page.Resources>
<DataTemplate x:Name="TreeViewItemTemplate">
<Grid>
<TextBlock Text="{Binding Name}" />
</Grid>
<XCDATA:DataTemplateExtensions.Hierarchy>
<XCDATA:HierarchicalDataTemplate ItemsSource="{Binding Items}" />
</XCDATA:DataTemplateExtensions.Hierarchy>
</DataTemplate>
</Page.Resources>
<XC:TreeView
ItemTemplate="{StaticResource TreeViewItemTemplate}"
ItemsSource="{Binding ObjShopItems}">
</XC:TreeView>
Seems that you are using a HierarchicalDataTemplate in your XAML code for the TreeView. Replacing the XAML with the corresponding C# code will help. We can set the DataTemplateExtensions.Hierarchy attached property in code-behind in Loaded event for the TreeView, like this:
<controls:TreeView x:Name="treeView"
Loaded="treeView_Loaded"
...
And in code-behind:
private void treeView_Loaded(object sender, RoutedEventArgs e)
{
//don't know why, but in Windows 10 if this code is as XAML, the app falls with a ComExcpetion
//so the corresponding XAML should be commented out like this:
//...
//<controls:TreeView.ItemTemplate>
// <DataTemplate>
// <!-- <data:DataTemplateExtensions.Hierarchy>
// <data:HierarchicalDataTemplate ItemsSource="{Binding Folders}" />
// </data:DataTemplateExtensions.Hierarchy> -->
// <Grid>
//...
WinRTXamlToolkit.Controls.Data.DataTemplateExtensions.SetHierarchy(treeView.ItemTemplate, new WinRTXamlToolkit.Controls.Data.HierarchicalDataTemplate
{
ItemsSource = new Windows.UI.Xaml.Data.Binding { Path = new PropertyPath("Folders") }
});
}
I'm working on a Windows 8.1 app. I have added a basic page to my project, which automatically adds a back button:
<Button x:Name="backButton"
Margin="39,59,39,20"
Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top" />
The button works fine. However, when I move this button to an AppBar, it doesn't work. The view doesn't go back to the previous page.
What is going wrong in the latter case?
The AppBar isn't in the same namespace as the page and so the Command binding to the page's NavigationHelper property doesn't resolve. This is the case for any binding of the AppBar to the page.
You can fix this by setting the AppBar's DataContext to the page in page.Loaded
XAML
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" IsOpen="True">
<Button x:Name="backButton"
Margin="39,59,39,20"
Command="{Binding NavigationHelper.GoBackCommand}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top" />
</AppBar>
</Page.BottomAppBar>
C#
public BasicPage1()
{
this.InitializeComponent();
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += navigationHelper_LoadState;
this.navigationHelper.SaveState += navigationHelper_SaveState;
this.Loaded += BasicPage1_Loaded;
}
async void BasicPage1_Loaded(object sender, RoutedEventArgs e)
{
bottomAppBar.DataContext = this;
}
--Rob
Using a SemanticZoom control in an MVVM project, I have two ListView controls with custom styles and panels, etc. so they display horizontally, there is no grouping or need for it.
I bind both to a CollectionViewSource in the view model.
When I click an item in the zoomed-out view, it doesn't take focus to that item in the zoomed-in view.
How can I achieve this?
Edit
Added XAML code:
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<ListView
Style="{StaticResource HorizontalListViewStyle}"
SelectionMode="None"
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
ItemsSource="{Binding BoardItems}"
ItemContainerStyle="{StaticResource ZoomedOutListViewItemContainerStyle}">
</ListView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<ListView x:Name="listView"
Style="{StaticResource HorizontalListViewStyle}"
SelectionMode="None"
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
ItemsSource="{Binding BoardItems}"
ItemContainerStyle="{StaticResource ZoomedOutListViewItemContainerStyle}">
</ListView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
Both of your ZoomedInView and ZoomedOutView need to have ScrollViewer.IsHorizontalScrollChainingEnabled="False" in order to scroll properly.
In codebehind for the page (or using an attached property), handle the ViewChangeStarted event with this code:
private void zoomyThingWoo_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
{
if (e.SourceItem.Item != null)
{
e.DestinationItem.Item = e.SourceItem.Item;
}
}
That's it. The documentation makes it sound like SemanticZoom will just work with any two controls that implement ISemanticZoomInfo but it doesn't.
I raised a documentation bug with the XAML team in Redmond.