Back button not working when placed in AppBar - windows-runtime

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

Related

How to access controls residing in hubsections in onloadstate method

I am unable to access the controls such as textboxes residing in hubsections in OnLoadState method of the page.
I want to set the TEXT property of textboxes on loading the page. But without access, I can't.
Try Loaded instead:
<HubSection Header="Trailers">
<DataTemplate>
<TextBox Loaded="TextBox_Loaded" />
</DataTemplate>
</HubSection>
And then set the value like below :
private void TextBox_Loaded(object sender, RoutedEventArgs e)
{
var txtBox = (TextBox)sender;
txtBox.Text = "Some Text";
}
Copied from here.

WinRTXAMLToolkit Treeview Crash on Windows 10

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") }
});
}

Get ItemsControl children to inherit foreground in WinRT

In a custom TemplatedControl I have an ItemsControl that is populated outside of the custom TemplatedControl. I want the (future) children of the ItemsControl to automatically inherit the Foreground value from the ItemsControl.
I want to be able to change the Foreground value from the TemplatedControl, and have the child controls update their Foreground as well.
Here's the ItemsControl I have:
<ItemsControl x:Name="PrimaryItems" ItemsSource="{TemplateBinding PrimaryItems}" Foreground="{TemplateBinding MyCustomForeground}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
And when I use the TemplatedControl, it'll look like this:
<Grid>
<Controls:MyCustomControl MyCustomForeground="Blue">
<Controls:MyCustomControl.PrimaryItems>
<Button Content="Test button"/>
</Controls:MyCustomControl.PrimaryItems>
</Controls:MyCustomControl>
</Grid>
I want the Button foreground to automatically be Blue, since that's what I set as MyCustomForeground in my TemplatedControl.
Any tips?
Have you tried {TemplateBinding xxxx} ?
<Controls:MyCustomControl MyCustomForeground="{TemplateBinding Foreground}">
<Controls:MyCustomControl.PrimaryItems>
<Button Content="Test button"/>
</Controls:MyCustomControl.PrimaryItems>
</Controls:MyCustomControl>
I see, this one is tricky. If you try to use DependencyProperty heritage, this won't work (using the foreground property of your UserControl) :
<UserControl
x:Class="TestApp1.CustomControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400" Foreground="Blue">
<StackPanel x:Name="PART_Container">
<Button Content="Test"/>
<TextBlock Text="Test"/>
</StackPanel>
</UserControl>
If you try this snippet, the phone's template for the button will override Foreground="Blue" and thus it will have a white (or black depending on the theme) foreground. Note that Textblock is not styled, and won't display this behavior, it will successfully inherit the blue foreground from its parent UserControl.
How to walkaround this ? You seem to declare a custom dependency property MyCustomForeground, so you can implement a logic in the DependencyPropertyChanged handler. But you also have to apply your custom foreground each time your PrimaryItems changes.
Here's a working sample :
public sealed partial class CustomControl : UserControl
{
public CustomControl()
{
this.InitializeComponent();
}
public Brush MyCustomForeground
{
get { return (Brush)GetValue(MyCustomForegroundProperty); }
set { SetValue(MyCustomForegroundProperty, value); }
}
// Using a DependencyProperty as the backing store for MyCustomForeground. This enables animation, styling, binding, etc...
public static readonly DependencyProperty MyCustomForegroundProperty =
DependencyProperty.Register("MyCustomForeground", typeof(Brush), typeof(CustomControl), new PropertyMetadata(null, OnCustomForegroundChanged));
private static void OnCustomForegroundChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
CustomControl ctrl = (CustomControl)d;
ctrl.ApplyCustomForeground();
}
public UIElement PrimaryItems
{
get { return (UIElement)GetValue(PrimaryItemsProperty); }
set { SetValue(PrimaryItemsProperty, value); }
}
// Using a DependencyProperty as the backing store for PrimaryItems. This enables animation, styling, binding, etc...
public static readonly DependencyProperty PrimaryItemsProperty =
DependencyProperty.Register("PrimaryItems", typeof(UIElement), typeof(CustomControl), new PropertyMetadata(null, OnPrimaryItemsChanged));
private static void OnPrimaryItemsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
CustomControl ctrl = (CustomControl)d;
// PART_Container is where I store my PrimaryItems
ctrl.PART_Container.Children.Clear();
ctrl.PART_Container.Children.Add((UIElement)e.NewValue);
ctrl.ApplyCustomForeground();
}
private void ApplyCustomForeground()
{
// PART_Container is where I store my PrimaryItems
foreach (var child in PART_Container.Children)
{
// Foreground is inherited by Control or TextBlock, or other classes...
// You would be better off using reflection here but that's off topic
if (child is Control)
{
((Control)child).Foreground = MyCustomForeground;
}
else if (child is TextBlock)
{
((TextBlock)child).Foreground = MyCustomForeground;
}
}
}
}

ApplicationBar not showing up in Windows Phone HTML Template

I have created an application bar in code behind in a new Windows Phone HTML template. Originally the application bar was in xaml but I removed it. I created my application bar like I normally do in the code behind, although in this template for some reason it will not show up. I cannot figure out what the issue is, I have no errors. My code is below. The only thing I did in the XAML of the template is add a pivot control and I made the browser visibility false. My code is below. Any ideas?
XAML
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<phone:Pivot>
<phone:Pivot.TitleTemplate>
<DataTemplate>
<TextBlock Text="APPLICATION NAME">
</DataTemplate>
</phone:Pivot.TitleTemplate>
<phone:PivotItem Header="one">
</phone:PivotItem>
<phone:PivotItem Header="two">
</phone:PivotItem>
</phone:Pivot>
<phone:WebBrowser x:Name="Browser" Visibility="Collapsed"
IsScriptEnabled="True"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Loaded="Browser_Loaded"
Navigated="Browser_Navigated"
NavigationFailed="Browser_NavigationFailed"
ScriptNotify="Browser_ScriptNotify"/>
<ProgressBar x:Name="PerformanceProgressbar"
VerticalAlignment="Top"
IsIndeterminate="False"
Visibility="Collapsed">
</Grid>
XAML.CS
public MainPage()
{
InitializeComponent();
BuildLocalizedApplicationBar();
}
private void BuildLocalizedApplicationBar()
{
ApplicationBar appbar = new ApplicationBar();
/appbar.Mode = ApplicationBarMode.Minimized;
ApplicationBarMenuItem settings = new ApplicationBarMenuItem();
settings.Text = AppResources.MainPage_Settings;
settings.Click += settings_Click;
appbar.MenuItems.Add(settings);
}
You are just creating an object ApplicationBar, but you are not adding it to your Page. Page has a property ApplicationBar which you should set with your created instance of class ApplicationBar.
What would work:
private void BuildLocalizedApplicationBar()
{
ApplicationBar appbar = new ApplicationBar();
/appbar.Mode = ApplicationBarMode.Minimized;
ApplicationBarMenuItem settings = new ApplicationBarMenuItem();
settings.Text = AppResources.MainPage_Settings;
settings.Click += settings_Click;
appbar.MenuItems.Add(settings);
this.ApplicationBar = appbar; // or simply ApplicationBar = appbar;
// you can also add Appbar directly = ApplicationBar = new ApplicationBar();
// and then modify via this property
}
Note that you can have many ApplicationBars (objects) and exchange them easily.
Use this code would work:
click here for more details
private void BuildLocalizedApplicationBar()
{
ApplicationBar appbar = new ApplicationBar();
/appbar.Mode = ApplicationBarMode.Minimized;
ApplicationBarMenuItem settings = new ApplicationBarMenuItem();
settings.Text = AppResources.MainPage_Settings;
ApplicationBar.MenuItems.Add(settings );
settings.Click += new EventHandler(settings_Click);
}

SemanticZoom - How do I keep two ListView controls in selection synch?

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.