StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Yes, you can use the Popup control, but you need to set the Child property to a content control which covers the full App window AND resizes when the window size is changed. It is not hard to create your own.</p> <p>Create a Templated Control based on a ContentControl:</p> <pre class="lang-cs prettyprint-override"><code>public sealed class PopoverView : ContentControl { public PopoverView() { this.DefaultStyleKey = typeof(PopoverView); Loaded += OnLoaded; Unloaded += OnUnloaded; } /// <summary> /// Measure the size of this control: make it cover the full App window /// </summary> protected override Size MeasureOverride(Size availableSize) { Rect bounds = Window.Current.Bounds; availableSize = new Size(bounds.Width, bounds.Height); base.MeasureOverride(availableSize); return availableSize; } private void OnLoaded(object sender, RoutedEventArgs e) { Window.Current.SizeChanged += OnSizeChanged; } private void OnSizeChanged(object sender, WindowSizeChangedEventArgs e) { InvalidateMeasure(); } private void OnUnloaded(object sender, RoutedEventArgs e) { Window.Current.SizeChanged -= OnSizeChanged; } } </code></pre> <p>Add this code to the Generic.xaml:</p> <pre class="lang-xaml prettyprint-override"><code><SolidColorBrush x:Key="PopoverViewBackgroundThemeBrush">White</SolidColorBrush>  <SolidColorBrush x:Key="PopoverViewOverlayThemeBrush">#80000000</SolidColorBrush> <Style TargetType="local:PopoverView"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:PopoverView"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Border Grid.Row="0" Background="{StaticResource PopoverViewOverlayThemeBrush}" /> <Border Grid.Row="1" Child="{TemplateBinding Content}" Background="{StaticResource PopoverViewBackgroundThemeBrush}" /> <Border Grid.Row="2" Background="{StaticResource PopoverViewOverlayThemeBrush}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </code></pre> <p>Now you can create a UserControl with the PopoverView as content. Example:</p> <pre class="lang-xaml prettyprint-override"><code><UserControl x:Class="PopoverCustomControlTest.MyUserControl1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:PopoverCustomControlTest" xmlns:custom="using:MyCustomControls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <custom:PopoverView>  <Button Content="Close PopoverView" Click="Button_Click_1" Background="Black" HorizontalAlignment="Center" Margin="40" /> </custom:PopoverView> </UserControl> </code></pre> <pre class="lang-cs prettyprint-override"><code>public sealed partial class MyUserControl1 : UserControl { private Popup popup; public MyUserControl1(Popup popup) { if (popup == null) throw new ArgumentNullException("popup"); this.popup = popup; this.InitializeComponent(); } private void Button_Click_1(object sender, RoutedEventArgs e) { this.popup.IsOpen = false; } } </code></pre> <p>And show it when you need it:</p> <pre class="lang-cs prettyprint-override"><code>Popup popup = new Popup(); popup.Child = new MyUserControl1(popup); popup.IsOpen = true; </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload