We Keep Coding

Stop screen capture on UWP app in TaskView of Windows 10

I stop screen capturing on my UWP app by
ApplicationView.GetForCurrentView().IsScreenCaptureEnabled = false;
However, the app still shows its preview on Taskview of Windows 10
Can someone let me know how to disable the app's preview on Task view
This is the current TaskView
and this is how I need it

Capturing an app's thumbnail looks like a system behavior, and I don't know how to disable it.
But since the capture only happens when the user presses Alt+Tab or clicks the task switch button on the task bar, there is a chance to cover the app with an overlay before system takes a screen capture of the app.
First add an opaque overlay, and set its initial visibility as Collapsed.
<Grid>
<TextBlock FontSize="50" Text="Your controls here!" />
<Grid Background="Black" x:Name="overlay" Visibility="Collapsed" />
</Grid>
Then register a handler for app window's Activated event,
Window.Current.Activated += Current_Activated;
Display/Hide the overlay when window is deactivated/activated,
private void Current_Activated(object sender, Windows.UI.Core.WindowActivatedEventArgs e)
{
if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated)
{
overlay.Visibility = Visibility.Visible;
}
else
{
overlay.Visibility = Visibility.Collapsed;
}
}

Blend UWP flyout tool not staying open

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

Popup overlaps application bar

I'm trying to show a fullscreen popup along with application bar. To do this I'm using such code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Name="myButton" Content="Show PopUP" Click="myButton_Click"/>
<Popup x:Name="myPopup">
<Grid Name="PopupsGrid" Background="ForestGreen">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="This is my PopUp"/>
</Grid>
</Popup>
</Grid>
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Label="Done" Icon="Setting"/>
<CommandBar.SecondaryCommands>
<AppBarButton Label="Command"/>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
private void myButton_Click(object sender, RoutedEventArgs e)
{
var bounds = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBounds;
PopupsGrid.Height = bounds.Height - 25; // to show the problem - normally we can substract BottomAppBar.Height
PopupsGrid.Width = bounds.Width;
myPopup.IsOpen = true;
}
I've figured out that we can use ApplicationView.GetForCurrentView().VisibleBounds to calculate the desired height. So far so good, but when I open the popup it overlaps the application bar (see picture 2). On the other hand once we open the appbar, it seems to be overlapped partially (see picture 3).
I've tested it both on desktop and mobile and the same problem occurs.
Am I missing something? How to put application bar above popup?

I don't think we can make sure commandbar is always above the popup. The popup command you saw in the third screenshot is actually a popup control so it can be above "myPopup" in this scenario. But, if you set the commandbar's IsSticky and IsOpen to true, when you click the button to show popup, it will hide the popup command. Popups follows this rule: latest on the top.
For the "overlapped partially" issue, instead of making the popup full screen, I think we can dynamically change the popup's height based on Commandbar's height.
One thing you may not notice is the height of LayoutRoot(Child of CommandBar) is larger than CommandBar's. By checking the default style of the CommandBar, you can find it uses Grid.Clip and RectangleGeometry.Transform to control the size of the commandbar we can see. You can also check it in the Live Visual Tree in VS. In my case, mycommandbar's Actual height is 48, and LayoutRoot's Actual Height is 60.
So as a workaround, in Compact mode, we can dynamically change the height of "myPopup" by listening the IsOpen property of the commandbar. If IsOpen = true, then substract the LayoutRoot's height(60), if IsOpen = false, substract the height of CommandBar(48).
This works for me.

Try to give your layout some padding ?

How to know when window control styling completed

I have a window.xaml which has components with different kind of styling( border color red, opacity changed and so on). In one moment I want to create a screenshot and save to folder. But before that the window background should be transparent and someCanvas should be hidden.
How do I know when the styling method finished so I can take a screenshot?
public void SomeMethod()
{
ChangeWindowControlStyles();
//TODO: waint till 'ChangeWindowControlStyles' finished
TageScreenshotAndSave();
}
public void ChangeWindowControlStyles()
{
this.Background.Opacity = 0;
this.someCanvas.Visibility = Visibility.Collapsed;
//Some other stuff related to window content styling
}
public void TakeScreenshotAndSave()
{
//No multithreading happening here
//Just taking screenshot and saving to folder
}
EDIT
The window itself is transparent WindowStyle="None", that means it has no borders. In the start the window's Background.Opacity is set to 0.1 and all controls are visible (there are other controls than someCanvas that should always be visible).
Before screenshot is taken someCanvas is hidden and the Background.Opacity is set to 0.
Window.xaml
<Window
WindowStartupLocation="CenterScreen"
ResizeMode="NoResize"
WindowState="Maximized"
WindowStyle="None"
AllowsTransparency="True" >
<Window.Background>
<SolidColorBrush Opacity="0.1" Color="White"/>
</Window.Background>
<Grid Name="mainGrid" Background="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0">
<!--Main canvas, function holder-->
<Canvas Name="canvasAlwaysVisible" Margin="0" Panel.ZIndex="5">
<!-- Controls that are always visible -->
</Canvas>
<Canvas x:Name="someCanvas" Margin="0" Background="Transparent" Visibility="Visibility">
<!-- Controls with styling -->
</Canvas>
</Grid>
</Window>
EDIT 2
Another thing to mention is that inside TakeScreenshotAndSave there is also System.IO operations like - get all folders in directory, creation new directory and so on. Maybe .NET sees that and it is ran asynchronously.

Looks like I found the solution. I don't know why it works, will need to investigate more. That TakeScreenshotAndSave method that I mentioned in code sample was somehow running on different thread. When wrap that method inside Application.Current.Dispatcher it worked!
public void SomeMethod()
{
ChangeWindowControlStyles();
var m_dispatcher = Application.Current.Dispatcher;
m_dispatcher.Invoke(System.Windows.Threading.DispatcherPriority.ApplicationIdle,
new System.Threading.ThreadStart(delegate
{
TakeScreenshotAndSave(); //Now running on UI thread
}));
}

Adding Animation to panels when they are made visible in WPF

I am creating an application in WPF and the window has one main grid with 3 rows. There are 3 buttons in the 3rd row and on the click of each button, a panel is displayed in the 2nd grid row. I achieved this by setting the visibility option of the panels. However, now I would like to add an effect/animation as the panels become visible. I don't know where to start, so kindly help.
My xaml code is similar to this
<Window>
<Grid>
<!-- 3row definitions -->
<Grid Grid.Row="0"> </Grid>
<Grid Name="panel1" Grid.row="1" Visibility="Hidden"></Grid>
<Grid Name="panel2" Grid.row="1" Visibility="Hidden"></Grid>
<Grid Name="panel3" Grid.row="1" Visibility="Hidden"></Grid>
<Grid Grid.Row="2"></Grid>
</Grid>
</Windows>
Xaml.cs code to change the visibility is similar to this
private void Image_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
panel1.Visibility = System.Windows.Visibility.Visible;
panel2.Visibility = System.Windows.Visibility.Hidden;
panel3.Visibility = System.Windows.Visibility.Hidden;
}

this can be done using expression studio, in expression blend open your wpf projects, there you can add animations to your wpf controls, you also need to start and stop animation when your application launches,
http://www.youtube.com/watch?v=JpGvl1TayAQ
here is a video tutorial, you can get more tutorials by googling it,