How to handle NavigationView PaneFooter Settings item click - xaml

When adding a NavigationView a 'Settings' item is automatically added at the bottom of the NavigationView. How can a click event be added to this item since it doesn't appear to be accessible from XAML?
<Page
x:Class="My_Project.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
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>
<NavigationView>
<NavigationView.PaneFooter>
</NavigationView.PaneFooter>
</NavigationView>
</Grid>
</Page>

How can a click event be added to this item since it doesn't appear to be accessible from XAML?
The Settings button click event is already handled by the NavigationView.ItemInvoked Event. This is mentioned in the document NavigationView as "When the user taps on a navigation item, the navigation view shows that item as selected and raises an ItemInvoked event. "
So you just need to handle the NavigationView.ItemInvoked Event and check the NavigationViewItemInvokedEventArgs.IsSettingsInvoked Property.
Here is the code that you could refer to:
<Grid>
<NavigationView ItemInvoked="NavigationView_ItemInvoked">
<NavigationView.PaneFooter>
</NavigationView.PaneFooter>
</NavigationView>
</Grid>
In code behind:
private void NavigationView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
if (args.IsSettingsInvoked == true)
{
//do something
}
}
Update
If you want to check if the item is a specific one, you could set a tag property in the Xaml for the navigationview item and then check this property in the ItemInvoked event.
In xaml:
<NavigationViewItem Tag="home" Icon="Home" Content="Home"/>
In code behind:
private void NavigationView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
var navItemTag = args.InvokedItemContainer.Tag.ToString();
if (navItemTag.Equals("home"))
{
// do something
Debug.WriteLine("test");
}
}

Related

Button to change background colour

I'm developing a UWP app. I would like to have a radio button change the background of the mainpage and settings page when clicked. The radio button code below is in Settings.xaml.cs
private void BGRadioButtonGreen_Checked(object sender, RoutedEventArgs e)
{
MainPage.Background = Brushes.Red??;
}
In this example I'm trying to select a radio button and have it change the settings and mainpage background to Green.However it doesn't seem to be working. Thanks in advance
You can do it be setting background color of root grid. Like in example below, after radio button checked color would change to red. This should be what you're looking for.
<Page
x:Class="Test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Background="Blue">
<Grid x:Name="MainGrid" Background="Green">
<StackPanel>
<RadioButton Content="Red" Tag="Green" Checked="RadioButton_Checked"/>
</StackPanel>
</Grid>
private void RadioButton_Checked(object sender, RoutedEventArgs e)
{
MainGrid.Background = new SolidColorBrush(Windows.UI.Colors.Red);
}
For changing background color, as #ColdMorningLight mentioned, you should set a SolidColorBrush value to the Background property.
Since you attempt to change the MainPage background color from Settings page, which is in different pages, you also need to get the current MainPage instance firstly and then set the page's background. For example:
MainPage mainPage;
public SettingPage()
{
this.InitializeComponent();
mainPage = (Window.Current.Content as Frame).Content as MainPage;
}
private void radchangecolor_Checked(object sender, RoutedEventArgs e)
{
mainPage.Background = new SolidColorBrush(Windows.UI.Colors.Green);
}
Pay attention that I set the page's background color, you only can see the effects when the root panel background color is transparent (the default value is Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" ). Otherwise you need to change the root panel background color. For example, MainPage as follows will take effects:
<Page
...
mc:Ignorable="d" >
<StackPanel>
<Frame x:Name="frame" Height="200" Width="300" Background="Azure"></Frame>
<Button x:Name="btntest" Click="btntest_Click" Content="test"></Button>
</StackPanel>
</Page>

UWP: How to fix focus on particular UI element so that i can receive key press events?

So i have chat window with a text box, a mic button and some other buttons for settings and sharing. So i want to always switch on the mic whenever space button is pressed, except when the textbox has focus. No matter if other buttons are clicked last, space-bar should turn-on the mic.
Any help or pointers?
Here is a working sample.
Code Behind
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
Window.Current.CoreWindow.KeyDown += CoreWindow_KeyDown;
}
private void CoreWindow_KeyDown(Windows.UI.Core.CoreWindow sender, Windows.UI.Core.KeyEventArgs args)
{
if (args.VirtualKey == Windows.System.VirtualKey.Space && txtData.FocusState == FocusState.Unfocused))
{
txtData.Text = "Mike Called";
}
}
}
txtData here is my TextBox that I an checking if I have FocusState Unfocused
XAML
<Page
x:Class="App12.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App12"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBox Text="Hello World" Name="txtData" Width="300" Height="35" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Page>
You should subscribe the KeyDown event of Window.Current.CoreWindow. It will be fired everytime user press any key, regardless of focused control. Only your app has to be focused.
Window.Current.CoreWindow.KeyDown += CoreWindow_KeyDown;
private void CoreWindow_KeyDown(CoreWindow sender, KeyEventArgs args)
{
if (args.Handled)
{
return;
}
// Your event handling
}

Binding shared flyout to 2 controls in Listview's DataTemplate in UWP Windows 10

I've got a shared Flyout defined in my <Page.Resources> as follows:
<Flyout x:Name="InfoFlyout" Opened="{Binding IsOpen,
ElementName=MyListView, Mode=TwoWay}">
<Grid>
<Button Foreground="White" Margin="5">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Help"/>
</StackPanel>
</Button>
</Grid>
</Flyout>
But I get An object reference not set error when compiling, so I used the code from this article (Using Windows 8.1 Flyout control with MVVM) instead.
This seems to circumvent the problem I was having with the above code. Now my shared Flyout code looks like this:
<Flyout x:Name="InfoFlyout"
helpers:FlyoutHelpers.Parent="{Binding ElementName=MyListView}"
helpers:FlyoutHelpers.IsOpen="{Binding IsOpen, Mode=TwoWay}">
<Grid>
<Button Foreground="White" Margin="5">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Help"/>
</StackPanel>
</Button>
</Grid>
</Flyout>
My ListView control (i.e. x:Name="MyListView") is binded to the page's ViewModel i.e. MainPageViewModel. The IsOpen property is defined in the MainViewModel.
Now in my ListView DataTemplate, I want my Flyout to open when I press and hold the ListViewItem or when pressing a button within the ListViewItem:
<DataTemplate>
<Grid FlyoutBase.AttachedFlyout="{StaticResource InfoFlyout}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source={Binding MyImage} />
<Grid Grid.Column="1" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Width="30" Height="30"
Flyout="{StaticResource InfoFlyout}"
content="i">
</Button>
</Grid>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Holding">
<actions:OpenFlyoutAction />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Grid>
</DataTemplate>
As you can see, I've got the Flyout "attached" to the Grid via:
FlyoutBase.AttachedFlyout="{StaticResource InfoFlyout}"
and I've got the same Flyout attached to the button within the ListViewItem itself via:
Flyout="{StaticResource InfoFlyout}"
I've put breakpoints on both my setter and getter for the IsOpen property and when page gets loaded, it does go into the getter but whenever I open or close my Flyout either via Holding or by pressing the 'i' button, it doesn't trigger the method below and therefore it doesn't change the IsOpen property.
private static void OnIsOpenPropertyChanged(DependencyObject d,
DependencyPropertyChangedEventArgs e) as defined in the FlyoutHelper class.
The reason I've set my ElementName to MyListView is that I want all my ListViewItem to be binded to the one property i.e. IsOpen as I need to detect whenever a flyout menu is opened irrelevant of which ListViewItem it belongs to.
How can I achieve or resolve this?
UPDATE - 1
The problem of accessing the shared menu has been resolved by using the following:
<Flyout x:Name="InfoFlyout"
helpers:FlyoutHelpers.Parent="{Binding ElementName=MyListView}"
helpers:FlyoutHelpers.IsOpen="{Binding IsOpen, Mode=TwoWay}">
and setting the button to
<Button Width="30" Height="30"
Command="{Binding InformationCommand}"
CommandParameter="{Binding}"
Flyout="{StaticResource InfoFlyout}">
Which is fine and as #ElvisXia mentioned, you can comment out the code in the OnIsOpenPropertyChanged as the positioning is already determined by the button located inside my ListViewItem.
There is however one outstanding problem. A small one btw, but nice if it can be solved. The shared flyout which is attached to the grid itself in the DataTemplate i.e.
<DataTemplate>
<Grid FlyoutBase.AttachedFlyout="{StaticResource InfoFlyout}">
It is being positioning based on the ListViewItem which technically is correct as I'm calling a different piece of code for that one i.e.
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Holding">
<actions:OpenFlyoutAction />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
And the OpenFlyoutAction is defined as follows:
public class OpenFlyoutAction : DependencyObject, IAction
{
public object Execute(object sender, object parameter)
{
FrameworkElement senderElement = sender as FrameworkElement;
FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(senderElement);
flyoutBase.ShowAt(senderElement);
return null;
}
}
Can I somehow stop using the OpenFlyoutAction and use the same code as provided in the article to open my Flyout wherever the user is holding his/her finger on the relevant ListViewItem rather than on top or below the actual ListViewItem?
I understand it's a little bit side track from the original issue which was to share a Flyout by to controls but may as well finish it as it is somehow relevant to the issue.
Thanks.
Change the type of Parent from Button to ListView. To open flyout in particular X,Y position is not possible in WP. You can choose PopUp control instead. Here is a link which i got open the pop up in tapped position. You can use VisualTreeHelper to get PopUp control of tapped ListViewItem
By Using Windows 8.1 Flyout control with MVVM , the author use parent to control where the flyout shows up.
So the author have codes like below(FlyoutHelpers.cs):
private static void OnIsOpenPropertyChanged(DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
var flyout = d as Flyout;
var parent = (ListView)d.GetValue(ParentProperty);
if (flyout != null && parent != null)
{
var newValue = (bool)e.NewValue;
if (newValue)
flyout.ShowAt(parent);
else
flyout.Hide();
}
}
He use flyout.ShowAt(parent) to let flyout show at parent element. But in your codes you have binded the flyout to the button using:
<Button Width="30" Height="30"
Flyout="{StaticResource InfoFlyout}" content="i">
</Button>
So it is not necessary to let it show at it's parent any more. To fix the problem, you can comment out the statements like below:
private static void OnIsOpenPropertyChanged(DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
//var flyout = d as Flyout;
//var parent = (ListView)d.GetValue(ParentProperty);
//if (flyout != null && parent != null)
//{
// var newValue = (bool)e.NewValue;
// if (newValue)
// flyout.ShowAt(parent);
// else
// flyout.Hide();
//}
}
Then you will see the flyout shows at the right place.

Create a component and reuse it in Windows phone 8.1

I want to create some components and reuse them in different pages, put more than one in a page, etc.
For example, I want to create a component that contains an image, some text, etc. The position of the elements are fixed, but I will change the image, the text... I mean, in a same page I want to put three circles with different image and text...
What is the best way to do it? I've found UserControl, but I'm unable to call a method from another page to change something.
This is my component XAML
<UserControl
x:Class="aa.Components.CircularGraph"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Components"
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="300">
<Grid Name="view">
<Image Name="imageGraph" Source="../Assets/aa/circuloGris.png"
/>
<StackPanel Orientation="Vertical">
<TextBlock Name="firstLine" Text="1" FontFamily="Arial" FontSize="9"></TextBlock>
<TextBlock Name="secondLine" Text="2" FontFamily="Arial" FontSize="9"></TextBlock>
<TextBlock Name="thirdLine" Text="3" FontFamily="Arial" FontSize="9"></TextBlock>
</StackPanel>
</Grid>
</UserControl>
Its code:
public sealed partial class CircularGraph: UserControl {
public CircularGraph() {
this.InitializeComponent();
Height = 300;
Width = 400;
}
public void changeFirstLine(string var) {
firstLine.Text = var;
}
}
In other page I put:
<local:CircularGraph Name="circularGraph"/>
And I've tried to put this in .cs:
protected override void OnNavigatedTo(NavigationEventArgs e) {
circularGraph.changeFirstLine("aaa");
}
But I have an error: The name 'circularGraph' does not exits in the current context.
How can I do this?
Sorry if it's a simple question. I'm newbie at Windows phone.
Thank you very much!
Try x:Name instead of Name. "All x:Name means to XAML is generate a field to store the value in the code behind class."
<local:CircularGraph x:Name="circularGraph"/>
In WPF, what are the differences between the x:Name and Name attributes?

Windows Phone 7 XAML -- getting a binding to work with the container of my object

What I want to do is bind the text of a TextBlock to my custom ButtonSymbol property of the UserControl.
Here is the XAML for the UserControl. The Binding part for the TextBlock needs to be filled in.
<UserControl
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"
x:Class="Calculator.CalculatorButton"
d:DesignWidth="120" d:DesignHeight="80">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Image Source="buttonb#2x.png" Stretch="Fill"/>
<Button x:Name="InvisibleButton" Content="{Binding ButtonSymbol}" Margin="0,0,0,0" d:LayoutOverrides="Width, Height" BorderThickness="1" Click="InvisibleButton_Click"/>
<TextBlock HorizontalAlignment="Center" Margin="0,0,0,0" TextWrapping="Wrap"
Text="{Binding ????????}"
VerticalAlignment="Top"/>
</Grid>
</UserControl>
And here is the CodeBehind:
namespace Calculator
{
public partial class CalculatorButton : UserControl
{
public string ButtonSymbol {get; set;}
public CalculatorButton()
{
// Required to initialize variables
InitializeComponent();
}
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
}
private void InvisibleButton_Click(object sender, System.Windows.RoutedEventArgs e)
{
Debug.WriteLine(#"click");
Debug.WriteLine(ButtonSymbol);
// TODO: Add event handler implementation here.
}
}
}
Note that this is WP7 with Silverlight, and the RelativeSource class is not the same as in other versions.
You need to set the DataContext of the user control.
If you add this:
this.DataContext = this;
into the constructor or Loaded event of the user control you can then do this:
Text="{Binding ButtonSymbol}"
Note that you can also declaratively bind the DataSource of the XAML, this is just an easy programmatic way to do it.