I'm currently writing a Windows Store App (XAML/C#). I'm trying to move the back button into the top app bar.
I've tried moving the code for the back button (default code from the BasicPage template) into a AppBar. However, it doesn't bring me back to the previous page when I click it.
This is the code which I moved into the app bar:
<Button x:Name="backButton"
Margin="39,59,39,0"
Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
In TopAppBar, the NavigationHelper.GoBackCommand is invalid. You can add Click method to your Button. just like this:
<Button ... Click="backBtn_Click"/>
in C#：
private void backBtn_Click(object sender, RoutedEventArgs e)
{
if (Frame.CanGoBack)
Frame.GoBack();
}
Related
I am trying to build a UWP application. User can perform actions like upload/download/rename/delete files. I want to maintain the status of these actions in a side notification panel (Similar to the one-drive app or azure-portal).
With the click of the notification button, a side panel should pop up from the right side of the UWP application and contain the status of the performed tasks. If we click the notification button again, the side panel should close. Any suggestions on how I can proceed?
Any help is appreciated.
I'd use the SplitView.
MainWindow.xaml
<SplitView
x:Name="StatusPane"
PanePlacement="Right">
<SplitView.Pane>
<!-- Your status of performed tasks here... -->
<Grid>
<TextBlock Text="Status" />
</Grid>
</SplitView.Pane>
<Grid>
<Button Content="Open/Close Status" Click="Button_Click"/>
</Grid>
</SplitView>
MainWindow.xaml.cs
private void Button_Click(object sender, RoutedEventArgs e)
{
this.StatusPane.IsPaneOpen = !this.StatusPane.IsPaneOpen;
}
I created a UserControl, and added a Button inside it removing the Background and Text properties:
<Button x:Name="Button"
HorizontalAlignment="Center"
Height="40"
VerticalAlignment="Center"
Width="40"
RenderTransformOrigin="0,-2"
Margin="0,0,0,0"
BorderBrush="{x:Null}"
Click="Button_Click"
Background="{x:Null}"/>
I also hadled the Button Click event as below:
private void Button_Click(object sender, RoutedEventArgs e)
{
Button.Content = new cross();
}
The above code fills the Button content with another UserControl which is a simple cross pic.
I have placed the UserControl with the Button into a MainWindow app and after pressing Button, it starts blinking - background is fluently changing between two colours. Beside my functionality from code works good. I just don't know how to get rid of that blinking background.
Before click:
After click:
You could set Focusable="False" at your Button to achive this.
But you should read about the Focusableproperty in the MSDN to check if it's ok for you. I guess you can't focus the Buttonusing the tab key anymore. But maybe that's not a problem for you.
I am currently making a UWP in Blend in Visual Studio 2017 but I am having trouble with the flyout tool. I was hoping to manually control when it opens and when it closes essentially disabling the feature when it closes by itself when it loses focus so that I may be able to interact with other tools or objects in the app before closing the flyout. I have tried adding some C# codes to attempt this but I have had no success. I'm not sure either if this would need to be altered in the template or if it can be done from XAML or preferably C#. I have attached the flyout to a stackpanel and added a button click event in a separate location with the following code:
flyout.AllowFocusOnInteraction = true;
flyout.AllowFocusWhenDisabled = true;
flyout.ShowAt(stackpanel);
I was hoping this would work to keep the flyout open but it doesn't. I have another button that I had in mind to close it with the following C# code:
flyout.Hide();
But it would seem that it is not necessary because it closes automatically still regardless of the code. Does anyone have any suggestions?
Represents a control that displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping outside of it, pressing the device’s back button, or pressing the ‘Esc’ key.
For your scenario, the Flyout control is not reasonable choice. You could achieve this by using ContentDialog. And the following code realizes the feature of contentDialog.
<ContentDialog
x:Class="AppUIBasics.ControlPages.ContentDialogExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppUIBasics.ControlPages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="SIGN IN"
PrimaryButtonText="sign in"
SecondaryButtonText="cancel"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick">
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBox Name="userNameTextBox" Header="User name"/>
<PasswordBox Name="passwordTextBox" Header="Password" IsPasswordRevealButtonEnabled="True"/>
<CheckBox Name="saveUserNameCheckBox" Content="Save user name"/>
<TextBlock x:Name="errorTextBlock" />
<TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit." TextWrapping="Wrap" />
</StackPanel>
</ContentDialog>
This the official code sample about UWP UI basic that you can refer to. If you insist on using Flyout contorl. You could refer to my code sample. However it is not suggested by the official.
MainPage.xaml
<Button Content="Show Flyout">
<Button.Flyout>
<Flyout x:Name="flyout" Closing="flyout_Closing" >
<StackPanel>
<TextBox x:Name="MyTextBox" Text="You can edit this text by tapping it."/>
<Button Content="close" Click="Button_Click"/>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
MainPage.xaml.cs
private bool manual = false;
private void flyout_Closing(FlyoutBase sender, FlyoutBaseClosingEventArgs args)
{
if(manual == true)
{
args.Cancel = false;
}
else
{
args.Cancel = true;
}
manual = false;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
manual = true;
flyout.Hide();
}
I need NOT to close keyboard, when user finish input and tap on AppBarButton. How can I do that?
Currently, I use this code, but it just set focus back after triggering Click event on AppBarButton. It's bad solution.
private async void SendMessage(object sender, RoutedEventArgs e)
{
this.MessageBox.Focus(FocusState.Keyboard);
//my stuff
}
My XAML in case if it needed:
<TextBox x:Name="MessageBox"
Margin="0,10,10,10"
HorizontalAlignment="Right"
Width="340"
PlaceholderText="write a message..."
InputScope="Chat"
AcceptsReturn="True"
TextWrapping="Wrap" />
<!-- -->
<Page.BottomAppBar>
<CommandBar >
<AppBarButton x:Name="SendButton"
Label="Send"
Icon="Send"
IsEnabled="{Binding IsSendEnabled}"
Visibility="{Binding IsSendVisible, Converter={StaticResource IsVisibleWhenDisabled}}"
Click="SendMessage" />
</CommandBar >
</Page.BottomAppBar>
But how I can set keyboard to stay visible unless user hit Hardware Back Button or just tap somewhere?
I don't think you can 'force' the keyboard to stay on, when the keyboard loses focus it's fixed to be dismissed, what you might be able to do is to make the app set focus to keyboard
https://msdn.microsoft.com/en-us/library/system.windows.input.keyboard.focus(v=vs.110).aspx
I have a Control that contains a Popup. I am trying to close the Popup whenever someone clicks outside of the Control. This is the part of my code that sets up the problem:
AddHandler(Mouse.PreviewMouseDownOutsideCapturedElementEvent, new MouseuttonEventHandler(HandleOutsideClick), true);
Now whenever I click in the Popup it causes PreviewMouseDownOutsideCapturedElementEvent to be raised. Am I misunderstanding this event? Is there something that I can do to have the Popup be considered a part of the Control so that it doesn't raise this event?
Does this work?
<Popup Name="Pop" LostFocus="ClosePop"/>
private void ClosePop(object sender, RoutedEventArgs e)
{
Pop.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}
Put the XAML code in your .xaml page and the C# code in the related .xaml.cs file.
Note: You may need to put the focus on the popup before this works, it may be done automatically; I haven't done this on popups, but I have done it on other objects.
Update: This works for me, clicking in the TextBox that says Test1 opens the Popup, and clicking in the TextBox labeled Test2 closes it:
<Grid Background="White">
<StackPanel>
<TextBox Foreground="Black" LostFocus="ClosePop" GotFocus="OpenPop" Height="50">Test1</TextBox>
<TextBox Foreground="Black" Height="50">Test2</TextBox>
</StackPanel>
<Popup Name="Pop" Height="50" Width="50">
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center">Pop!</TextBlock>
</Popup>
</Grid>
private void ClosePop(object sender, RoutedEventArgs e)
{
Pop.IsOpen = false;
}
private void OpenPop(object sender, RoutedEventArgs e)
{
Pop.IsOpen = true;
}