Develop Reference

UWP: How do you make a Border a click through shield?

I have situation where I want an overlay control to block UI interactions on a Page for everything that is behind a border. I have tried setting Border.ManipulationMode to False. I have set IsTapEnabled, IsRightTapEnabled, IsDoubleTapEnabled, and IsHitTestVisible to False.
I also tried subscribing to the Tapped and PointerEntered events, and setting the args Handled property to true. After all of this I can still click on Buttons through the border, and invoke their commands. Below are a few screenshots for context:
Page with no overlay
Page now has what should be an overlay that blocks controls behind it
A button capturing PointerOver that shouldn't be
Here is the UserControl xaml that becomes the overaly on the Page:
<UserControl x:Class="PocMvvmToolkitApp.Dialogs.DialogShell"
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"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid x:Name="overlayGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<!--dialogShield is the Border that I want to prevent click through on-->
<Border x:Name="dialogShield"
Background="#AAFFFFFF"
IsHitTestVisible="False"
ManipulationMode="None"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsDoubleTapEnabled="False"
IsHoldingEnabled="False"
IsRightTapEnabled="False"
IsTapEnabled="False"/>
<Border x:Name="dialogBorder"
BorderBrush="Black"
BorderThickness="1" />
</Grid>
Attempting to handle the events:
public DialogShell()
{
this.InitializeComponent();
this.allDialogs = new List<ExtendedContentDialog>();
this.visibleDialogs = new List<ExtendedContentDialog>();
////Doesn't work
this.dialogShield.PointerEntered += this.OnModalShieldPointerEntered;
this.dialogShield.Tapped += this.OnModalShieldTapped;
}
private void OnModalShieldTapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
////Doesn't block click through
e.Handled = true;
}
private void OnModalShieldPointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
e.Handled = true;
}
On the Page.xaml.cs here is where I add or remove the DialogShell control to the parent Grid on the page:
private void OnDialogStackChanged(Args.DialogStackChangedEventArgs args)
{
switch (args.Context)
{
case Args.DialogStackChangedContext.Showing:
if (this.dialogShell == null)
{
this.dialogShell = new DialogShell();
this.dialogShell.ShowDialog(args.Dialog);
this.rootGrid.Children.Add(this.dialogShell);
Grid.SetColumnSpan(this.dialogShell, 2);
}
break;
case Args.DialogStackChangedContext.Closing:
if (this.dialogShell != null)
{
this.dialogShell.RemoveDialog(args.Dialog);
if (this.dialogShell.AllDialogs.Count == 0)
{
this.rootGrid.Children.Remove(this.dialogShell);
this.dialogShell = null;
}
}
break;
}
}
Any help with this Border situation would be appreciated. Before someone recommends using ContentDialog, please don't, I have my reasons for this setup. Thanks!

Can't Access Button from drag n drop UI programatically

I created a new WPF app in Visual Studio and I placed a button using the drag and drop editor but I can't access the button in my .cs file using
MainButton.Content = "Set output to red";
but I get an error
System.NullReferenceException: 'Object reference not set to an instance of an object.'
MainButton was null while running the application.
The drag and drop editor generated this xaml file
<Window x:Class="WpfApp1.MainWindow"
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"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="Black" BorderThickness="3">
<TextBlock x:Name="Output" Background="Transparent" TextAlignment="Center" TextWrapping="Wrap" Text="Output" Height="88" Width="264"/>
</Border>
<RadioButton x:Name="Option1" Content="Red Pill" HorizontalAlignment="Left" Margin="135,75,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked" IsChecked="True"/>
<RadioButton x:Name="Option2" Content="Blue Pill" HorizontalAlignment="Left" Margin="536,72,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked_1"/>
<Button x:Name="MainButton" Content="Set output to red" HorizontalAlignment="Left" Margin="279,100,0,0" VerticalAlignment="Top" Width="213" Height="41" Click="MainButton_Click"/>
</Grid>
</Window>
Here's the .cs file
using System.Windows;
using System.Windows.Media;
namespace WpfApp1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void MainButton_Click(object sender, RoutedEventArgs e)
{
if ((bool)Option1.IsChecked)
{
Output.Background = Brushes.Crimson;
}
else
{
Option2.IsChecked = true;
Output.Background = Brushes.DodgerBlue;
}
}
private void RadioButton_Checked(object sender, RoutedEventArgs e)
{
MainButton.Content = "Set output to red";
}
private void RadioButton_Checked_1(object sender, RoutedEventArgs e)
{
MainButton.Content = "Set output to blue";
}
}
}
I can access other things in the UI just fine like radio buttons and text blocks but not the button. Why could this be happening?

During the initialization phase, some variables are going to be null since it hasn't been reached in the call order. RadioButton_Checked is called through event before the button is constructed since it contains the Checked property.
A quick and easy fix is as follows: Check for null in your event calls.
private void RadioButton_Checked (object sender, RoutedEventArgs e)
{
if(MainButton != null)
MainButton.Content = "Set output to red";
}
private void RadioButton_Checked_1 (object sender, RoutedEventArgs e)
{
if (MainButton != null)
MainButton.Content = "Set output to blue";
}
Of course, there are better ways to handle this. You could set checked on a separate event, Initialized, which will handle it much cleaner.

ContentDialog.ShowAsync() result is always None

I have a simple ContentDialog with ContentDialog.XAML:
<ContentDialog x:Class="SampleApp.Dialogs"
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:local="using:SampleApp.Dialog"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
PrimaryButtonClick="OkClick"
PrimaryButtonText="OK"
SecondaryButtonText="Cancel"
SecondaryButtonClick="CancelClick"
mc:Ignorable="d">
<StackPanel>
<TextBox
Text="{x:Bind NameOne, Mode=TwoWay}" />
<TextBox Text="{x:Bind NameTwo, Mode=TwoWay}" />
</StackPanel>
In the code-behind:
private void OkClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
{
this.Hide();
}
When I want to initalize this Dialog by:
Dialog dialog = new Dialog();
var result = await dialog.ShowAsync();
The resultis always of type ContentDialogResult.None. Even if I click "Ok" or "Cancel", but it should be at least ContentDialogResult.Primary when I click "Ok". It this an expected behavior?

The issue was the PrimaryButtonClick="OkClick" , OkClick overriding the default action (which is hide) and therefore the result is always None.
Removing this solved the problem.

private void OkClick(object sender, RoutedEventArgs e)
{
this.Result = MyResult.Yes;
// Close the dialog
dialog.Hide();
}

WPF : Move control c# code to change position from location to another

how can move (change position) label from position to another using wpf **
animation
** in specify event such click using c# code not trigger ??
using System.windows.media.animation;

XAML
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Canvas>
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="Button_Click" Canvas.Left="201" Canvas.Top="116" x:Name="Button"/>
</Canvas>
</Window>
Code
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
var storyboard = new Storyboard();
var pointAnimation = new DoubleAnimation()
{
From = Canvas.GetLeft(Button),
To = Canvas.GetLeft(Button) + 200,
Duration = new Duration(TimeSpan.FromSeconds(10))
};
Storyboard.SetTarget(pointAnimation, Button);
Storyboard.SetTargetProperty(pointAnimation, new PropertyPath(Canvas.LeftProperty));
storyboard.Children.Add(pointAnimation);
storyboard.Begin();
}

Allowing SizeToContent to enlarge the size but not reduce it

I have a window with a tabbed control inside, which contains controls of different sizes in each tab. I'm using SizeToContent="WidthAndHeight" in my Window, but I would like to allow it to only enlarge the window size.
For example, if I move to a 'bigger' tab, I want my control to adapt its size automatically, but if I then go back to the 'smaller' tab, I don't want my control to reduce its size again. I would prefer to not use MinWidth and MinHeight as I would like that my users are able to manually reduce the window size.
Thank you

This is a working example;
The Xaml:
<Window x:Class="WpfApplicationUpper.Window3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window3" Height="300" Width="300" SizeToContent="WidthAndHeight">
<Grid>
<TabControl Name="MainTabControl"
SelectionChanged="MainTabControl_SelectionChanged"
PreviewMouseDown="MainTabControl_PreviewMouseDown">
<TabItem Header="Small Tab" >
<Border Background="AliceBlue" Width="200" Height="200" />
</TabItem>
<TabItem Header="Medium Tab">
<Border Background="Blue" Width="400" Height="400" />
</TabItem>
<TabItem Header="Large Tab">
<Border Background="Navy" Width="600" Height="600" />
</TabItem>
</TabControl>
</Grid>
</Window>
The code behind:
public partial class Window3 : Window
{
public Window3() {InitializeComponent();}
double _currentWidth;
double _currentHeight;
private void MainTabControl_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
TabItem currentItem = MainTabControl.SelectedItem as TabItem;
FrameworkElement content = currentItem.Content as FrameworkElement;
_currentWidth = content.ActualWidth;
_currentHeight = content.ActualHeight;
}
private void MainTabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
TabItem itemAdded = null;
TabItem itemRemoved = null;
if (e.AddedItems.Count > 0)
itemAdded = e.AddedItems[0] as TabItem;
if (e.RemovedItems.Count > 0)
itemRemoved = e.RemovedItems[0] as TabItem;
if (itemAdded != null && itemRemoved != null)
{
FrameworkElement content = itemAdded.Content as FrameworkElement;
double newWidth = content.Width;
double newHeight = content.Height;
if (newWidth < _currentWidth)
content.Width = _currentWidth;
if (newHeight < _currentHeight)
content.Height = _currentHeight;
}
}
}
I know this is a little ugly, but it is better that nothing :)