StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>So, finally I've got an appropriate solution and maybe it can be helpful to anybody else.</p> <p>The idea is to use Popup object and fit all the screen (however the details seemed like some kind of magic :) ) </p> <p>One thing: I used UserControl (in Visual Studio right click on project -> Add -> new item.. -> UserControl) template as in this scenario it is easy to manage popups's content</p> <p>Here is the full source for C#:</p> <p><strong>CustomCaptureUI.xaml:</strong></p> <pre><code><UserControl x:Class="Family.CustomCaptureUI" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Family" 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" x:Name="Root"> <Grid> <Border BorderBrush="Gray" BorderThickness="1"> <Grid x:Name="Panel" Background="Gray"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <StackPanel Grid.Column="1" VerticalAlignment="Center"> <TextBlock Text="New text" Foreground="LightGray" FontSize="18"/> <TextBox x:Name="ToDoText" Width="Auto" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center"/> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button x:Name="SubmitButton" Background="Gray" Content="Submit" HorizontalAlignment="Center"/> <Button x:Name="CancelButton" Background="Gray" Content="Cancel" HorizontalAlignment="Center"/> </StackPanel> </StackPanel> </Grid> </Border> </Grid> </UserControl> </code></pre> <p><strong>CustomCaptureUI.xaml.cs:</strong></p> <pre><code>public sealed partial class CustomCaptureUI : UserControl { public enum ResultStatuses { Canceled, Ok, None } public CustomCaptureUI() { _resultStatus = ResultStatuses.None; // force content's size to preferable value Root.Width = Window.Current.Bounds.Width; Root.Height = Window.Current.Bounds.Width * 0.3; // Init popup's Content _popup.Child = this; // Init popups's position _popup.SetValue(Canvas.LeftProperty, (Window.Current.Bounds.Width - Root.Width) * 0.5); _popup.SetValue(Canvas.TopProperty, (Window.Current.Bounds.Height - Root.Height) * 0.5); } public async Task<string> ShowDialog() { string result = string.Empty; if (_semaphore != null) { DismissAddToDoPopup(); } // Init a Task for block the ShowDialog-method until user presses Cancel or Submit _semaphore = new Task(() => { }); CancelButton.Click += (sender, e) => { _resultStatus = ResultStatuses.Canceled; DismissAddToDoPopup(); }; SubmitButton.Click += (sender, e) => { result = ToDoText.Text; _resultStatus = ResultStatuses.Ok; DismissAddToDoPopup(); }; ShowAddToDoPopup(); // actual blocking of ShowDialog await _semaphore; return result; } public void DismissDialog() { _resultStatus = ResultStatuses.Canceled; DismissAddToDoPopup(); } private void ShowAddToDoPopup() { ToDoText.Text = string.Empty; _popup.IsOpen = true; } private void DismissAddToDoPopup() { if (_semaphore != null) { // starts the task and allows awaited ShowDialog-method to be released // after _semaphore is finishing _semaphore.Start(); _semaphore = null; } _popup.IsOpen = false; } public ResultStatuses ResultStatus { get { return _resultStatus; } } private Popup _popup = new Popup(); private Task _semaphore; private ResultStatuses _resultStatus; } </code></pre> <p>And then it can be used like this:</p> <pre><code> var dialog = new CustomCaptureUI(); string result = await dialog.ShowDialog(); if (dialog.ResultStatus == AddToDoDialog.ResultStatuses.Ok) { // Useful stuff if (!string.IsNullOrWhiteSpace(result)) { ... } } </code></pre> <p>Hope it can save someone's time a little</p>

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