We Keep Coding

Show flyout near system back button

I'm porting a Windows 8.1 app to UWP. On a particular screen, the user must fix all input errors before going back. In the Windows 8.1 app, tapping the back button when errors are present shows a Flyout at the back button (instead of going back) that contains a warning. But the UWP app uses the system-provided back button. This may be the shell-drawn one or the tablet-mode one as described here.
Is there a FrameworkElement I can get ahold of to pass to FlyoutBase.ShowAt? Otherwise, how can I display the warning Flyout as near as possible to the system back button? Its location will differ depending on tablet vs. desktop mode.

You can determinate where is the system back button roughly (upper left corner or bottom left corner) from the Windows.UI.ViewManagement.UIViewSettings.UserInteractionMode property which is basically determines the app is running in desktop or tablet mode.
Also you can create two dummy 0px Border to place the flyouts.
Example:
XAML:
<Grid x:Name="rootGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Border x:Name="DesktopBorder" Height="0" Width="0" VerticalAlignment="Top" HorizontalAlignment="Left" />
<Button Content="test" Click="ButtonBase_OnClick"></Button>
<Border x:Name="TabletBorder" Height="0" Width="0" VerticalAlignment="Bottom" HorizontalAlignment="Left" />
</Grid>
CS:
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
var flyout = new Flyout()
{
Content = new Rectangle() { Fill = new SolidColorBrush(Colors.Red), Height = 100, Width = 100 }
};
if (UIViewSettings.GetForCurrentView().UserInteractionMode == UserInteractionMode.Mouse)
{
flyout.Placement = FlyoutPlacementMode.Bottom;
flyout.ShowAt(DesktopBorder);
}
if (UIViewSettings.GetForCurrentView().UserInteractionMode == UserInteractionMode.Touch)
{
flyout.Placement = FlyoutPlacementMode.Top;
flyout.ShowAt(TabletBorder);
}
}
RESULT:

Windows 10 UWP Command Bar

Since applying the Windows 10 Anniversary Edition along with the SDK, one of the Command Bars has different behavior. It used to display three AppButtons. Now, only two will display. There appears to be an empty button on the far left.
Here is the XAML:
<CommandBar x:Name="VideoGroupCommands"
RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Background="{StaticResource LightBeigeBrush}"
IsEnabled="{x:Bind ViewModel.IsVideoGroupSelected,Mode=TwoWay}">
<AppBarButton Icon="Edit"
x:Uid="Edit"
Label=""
Command="{x:Bind ViewModel.EditVideoGroupCommand}"/>
<AppBarButton Icon="Delete"
x:Uid="Delete"
Label=""
Command="{x:Bind ViewModel.DeleteGroupCommand}"/>
<AppBarButton Icon="MoveToFolder" x:Uid="Merge" Label=""/>
</CommandBar>
How do I eliminate the gap on the left?

I believe the update changed the display mechanics, slightly, for the command bar. To fix this, I changed the grid column the control is in from a FIXED width to an AUTO width. Now, the control displays all three buttons with no gap on the left. The column is a little wider, but I can absorb it.
In the picture above, the command bar was cutting the third button out of the display.

Silverlight app freezes when simply adding a textblock to the layoutroot

I cannot understand why in the hell this simple silverlight application freezes up. Here is the code:
namespace test
{
public partial class MainPage : UserControl
{
TextBlock txtword;
public MainPage()
{
InitializeComponent();
txtword = new TextBlock();
txtword.Text = "TEST";
LayoutRoot.Children.Add(txtword);
}
private void button1_Click(object sender, RoutedEventArgs e)
{
txtword.Text = "SuperDuper";
}
}
}
After the textblock is added to the layoutroot if you try to hover or click on the button you can tell that the app has frozen for some reason. Any idea what is going on here??
If i add the text block in the XAML i am able to change its text property in the button click. LayoutRoot.Children.Add() is causing the app to freeze..

From reading your comments it seems the XAML in MainPage.xaml is something like the following:
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="Do stuff" Click="Button_Click" />
</Grid>
After adding the TextBlock, either in code or in XAML, you effectively end up with the following:
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="Do stuff" Click="Button_Click" />
<TextBlock Text="TEST" />
</Grid>
Your Grid doesn't specify any ColumnDefinitions or RowDefinitions, so you have a 1 × 1 grid with all child controls of the Grid given the entire width and height of the grid.
As neither your Button nor your TextBlock specify a z-index value (using Canvas.ZIndex), their z-order is defined by their position within the grid's Children. The TextBlock comes after the Button, so it is the one that is 'on top'.
The TextBlock may contain only a tiny amount of text, but the TextBlock itself will still fill the Grid. TextBlocks do not automatically resize to fit the text they contain and nothing else. Your Button appears not to work because the TextBlock is on top of it and receives all of the mouse events. TextBlocks are static controls that do nothing in response to any mouse event, and this should explain why your app is appearing to freeze.
Setting the HorizontalAlignment and/or VerticalAlignment of the TextBlock to a value other than Stretch stops the TextBlock being given the entire width and height of the Grid and allows the Button to receive mouse events.

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,

C#/WPF: Place Popup Control in Center of Screen?

Does anyone know how I can place a Popup Control in the Center of the screen?
Thanks!

Use the Placement and PlacementTarget properties to position it relative to whatever panel is at the root of the window. So if I have a Grid, StackPanel, etc. that contains all the other "stuff" in the window called MainPanel, I do something like:
<Popup
PlacementTarget="{Binding ElementName=MainPanel}"
Placement="Center"
>

First, you can use the static properties FullPrimaryScreenHeight, FullPrimaryScreenWidth of the System.Windows.SystemParameters class to get the height and width of the screen. Then, you can set the Top and Left properties of your Popup Control using the width and height before showing it.
Something like.
double primScreenHeight = System.Windows.SystemParameters.FullPrimaryScreenHeight;
double primScreenWidth = System.Windows.SystemParameters.FullPrimaryScreenWidth;
_yourControl.Top = (primScreenHeight - _yourControl.Height) / 2;
_yourControl.Left = (primScreenWidth - _yourControl.Width) / 2;

None of these answers worked for me in part because I don't have the size of the Popup. I ended up doing this in code behind as follows:
var popup = new Popup
{
Child = new YourUIControlHere(),
Placement = PlacementMode.Center,
PlacementRectangle = new Rect(new Size(
SystemParameters.FullPrimaryScreenWidth,
SystemParameters.FullPrimaryScreenHeight))
};
This could easily be extended to XAML by adding a binding for the screen size.
An obvious enhancement is to use the current screen for multi-monitor support. Getting the current window dimensions is considerably more work however.

Use Grid as container and Alignment will work fine for you:
<Popup IsOpen="True">
<Grid Name="canvasMain">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
...
</StackPanel>
</Grid>
</Popup>

You can use Placement="Center" and find ancestor Window using RelativeSource and set "PlacementTarget" property as property like this:
<Popup
Placement="Center"
PlacementTarget="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"
PopupAnimation="Slide">
<ContentControl Content="{Binding Yourcontent}"/>
</Popup>
And to keep stupid comments refrained: I know this centers the popup in the middle of the parent window (not neccessarily middle of the screen [if the parent window is not centered on the screen, what really is not regular case]) but this shall statisfy in most of the cases.