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;
}
Related
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 am making a GUI using Windows Presentation Foundation (WPF). When I mouse click a button (left or right), I want a message box shown. So far I have managed to make an example from tutorials, but it only works when I right-click, and not when I left-click the button. I cannot see anything in my code, which should prevent left-click from working, so I hope you can help me.
XAML code
<Grid>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="72">
Hello, WPF!
</TextBlock>
<!-- This button shuld activate the even MyButton_MouseUp -->
<Button Margin="200,250,200,20" Name="MyButton" MouseUp="MyButton_MouseUp">
Test
</Button>
</Grid>
C# code
// This only works on right-click
private void MyButton_MouseUp(object sender, MouseButtonEventArgs e)
{
MessageBox.Show("Hello world!");
}
You can subscribe to the PreviewMouseUp's Tunneled event instead of MouseUp:
<Button Margin="200,250,200,20" Name="MyButton" PreviewMouseUp="MyButton_MouseUp" />
The PreviewMouseUp's Routing strategy is Tunneling, i.e it will go down of the VisualTree hierarchy, and so the Tunnel events are triggered before the Bubble events.
In addition to S. Akbari's post, this one is worth reading in order to understand why right-click works, and left-click does not...
How to use mouseDown and mouseUp on <button/>
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'm trying to show a simple Flyout (with informational content) when a AppBarToggleButton within BottomAppBar is pressed, but my solution doesn't work. :(
This is my code:
<Page.BottomAppBar>
<CommandBar>
<AppBarToggleButton x:Uid="MapPageAppBarLegend" Label="" Icon="List">
<FlyoutBase.AttachedFlyout>
<Flyout>
<TextBlock Text="Informations here..."/>
</Flyout>
</FlyoutBase.AttachedFlyout>
</AppBarToggleButton>
</CommandBar>
</Page.BottomAppBar>
Nothing appears.. Can anyone help me to showing this flayout?
Thank you very much and sorry for my english language. :)
Pame
Everything is quite clearly described at MSDN (there is also a very good example there):
Nothing appears, because Flyouts open automatically only for buttons (and AppBarToggleButton doesn't derive from Button class):
A flyout attached to a button opens automatically when the user clicks the button. You don't need to handle any events to open the flyout. (This includes controls derived from Button, like AppBarButton
Of course you can add a Flyout to any FrameworkElement but you will have to open it manually:
You can attach a Flyout control to any FrameworkElement object by using the FlyoutBase.AttachedFlyout attached property. If you do so, you must respond to an interaction on the FrameworkElement, such as the Tapped event, and open the Flyout in your code.
In XAML - define your Flyout in Resources and attach it to button:
<Page.Resources>
<Flyout x:Key="myFlyout" Placement="Top">
<TextBlock Text="Informations here..."/>
</Flyout>
</Page.Resources>
<Page.BottomAppBar>
<CommandBar>
<AppBarToggleButton x:Uid="MapPageAppBarLegend" Label="First" Icon="List"
FlyoutBase.AttachedFlyout="{StaticResource myFlyout}"
Click="AppBarToggleButton_Click"/>
</CommandBar>
</Page.BottomAppBar>
And event in code behind:
private void AppBarToggleButton_Click(object sender, RoutedEventArgs e)
{
FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}