Disply a Dialog box for user input in a Win 8 Store XAML app

Question

Is there a way to achieve the Dialog like effect in a Win 8 Store XAML app; similar to the one indicated in this post where the content of the dialog is a custom control to gather user input.

Here is some sample XAML content that I would like to display centered similar to the one indicated in the post above.

<common:LayoutAwarePage
x:Class="App1.UserControls.Control1"
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"
>

<Grid HorizontalAlignment="Stretch" Background="Gold" VerticalAlignment="Center">
    <StackPanel  VerticalAlignment="Center" HorizontalAlignment="Center" AreScrollSnapPointsRegular="True" Margin="20">
        <TextBlock Text="This is sample text" FontSize="20" Style="{StaticResource HeaderTextStyle}"/>            
        <Button Content="Close" Click="btnClose_Click" Margin="0,20,0,0" HorizontalAlignment="Right"/>
    </StackPanel>
</Grid></common:LayoutAwarePage>

I am using the Popup control to display this from a Main page like so:

<common:LayoutAwarepage>
<Grid Style="{StaticResource LayoutRootStyle}">
   <Popup x:Name="ParentedPopup" VerticalOffset="300" HorizontalOffset="200" 
    HorizontalAlignment="Stretch">
            <usercontrols:CreateCategory/>
   </Popup>
 </Grid>
<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Button Style="{StaticResource AddAppBarButtonStyle}" Click="AddButton_Click"/>

            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar></common:LayoutAwarePage>

private void AddButton_Click(object sender, RoutedEventArgs e)
{
    if (!ParentedPopup.IsOpen) { ParentedPopup.IsOpen = true; }
}

However, this is not displaying as I intend it to, the popup does not show the xaml content centered, it shows up at the top and is not centered and stretched as I would like.

Is there a simple way to achieve this? Note: I do not want to take dependencies on any libraries.

score 1 · Answer 1 · answered Aug 15 '13 at 04:17

Why would you not want to take a dependency on any binaries if they solve your problem? Take a look at Callisto which has a CustomDialog that will do this for you as shown in the documentation - https://github.com/timheuer/callisto/wiki/CustomDialog. It is Open Source so you could also use the source. But you are either way taking a dependency on someone's code answer to you or a binary :-)

score 0 · Answer 2 · edited Aug 14 '13 at 13:55

assign the vertical offset to the height of the screen

popup.VerticalOffset = (Window.Current.Bounds.Height / 2) - popup.ActualHeight / 2;
Width = Window.Current.Bounds.Width;

VerticalAlignment="Center";

Also

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" x:Name="ContentColumn"/>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

//Place content in "ContentColumn" to center it
<Grid>

put the content in ContentColumn to center it.

Disply a Dialog box for user input in a Win 8 Store XAML app

2 Answers2