Create Popup Window message in C#

In Engineering i have a subject called C# ( pronounced as C Sharp ), one of my most favorite Subject.

Because it Involve coding and didn't contains any of the boring theory I alhways try to learn and explore new things in it and also try to create good apps with it, but most of the time it results in the faulty application and it result "system hang" :P

Getting the popup was easy, XAML provides us the <Popup> tag for doing just this.  But it doesn’t really provide the built in ability to darken the background or even center the popup, so I had to take things a bit further.

The first thing you need to do, is start off with some XAML code on your page.  We need to create a popup, and a rectangle, and of course we want the rectangle to be “behind” the popup, so we put it in first.

<Rectangle x:Name=”rectBackgroundHide” Fill=”#FF1D1D1D” HorizontalAlignment=”Left” Height=”117″ Margin=”0,319,0,0″ Stroke=”Black” VerticalAlignment=”Top” Width=”117″ Visibility=”Collapsed” Opacity=”0.7″/>

        <Popup  x:Name=”popError”>

            <Border BorderThickness=”2″ BorderBrush=”LightGray”>

                <Grid Height=”150″ Width=”400″ Background=”#FF1D1D1D”>

                    <TextBlock HorizontalAlignment=”Left” Margin=”10,10,0,0″ TextWrapping=”Wrap” Text=”Some Message Goes Here!” VerticalAlignment=”Top” Height=”68″ Width=”380″ FontSize=”14″/>

                    <Button x:Name=”btnAccept” Content=”Accept” HorizontalAlignment=”Left” Margin=”111,92,0,0″ VerticalAlignment=”Top” Width=”180″ Height=”48″ Click=”btnAccept_Click” />

                </Grid>

            </Border>

        </Popup>

As you can see here, I have created a Rectangle that has a background color matching that of my application, and made it 30% transparent.  I have also created a popup which contains a grid of the same color, with a light gray boarder, a text block to display my message, and a button that will close the popup.  I also have a button on my page that will show the popup.

Now that I have my XAML in place, I need to create the code on the backside, which is actually pretty easy once you get the hang of it.

        private void btnAccept_Click(object sender, RoutedEventArgs e)

        {

            //Close it all down

            rectBackgroundHide.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

            popMessage.IsOpen = false;

        }

        private void btnShowPopup_Click(object sender, RoutedEventArgs e)

        {

            //First we need to find out how big our window is, so we can center to it.

            CoreWindow currentWindow = Window.Current.CoreWindow;

            //Set our background rectangle to fill the entire window

            rectBackgroundHide.Height = currentWindow.Bounds.Height;

            rectBackgroundHide.Width = currentWindow.Bounds.Width;

            rectBackgroundHide.Margin = new Thickness(0, 0, 0, 0);

            //Make sure the background is visible

            rectBackgroundHide.Visibility = Windows.UI.Xaml.Visibility.Visible;

            //Now we figure out where the center of the screen is, and we 

            //move the popup to that location.

            popMessage.HorizontalOffset = (currentWindow.Bounds.Width / 2) – (400 / 2);

            popMessage.VerticalOffset = (currentWindow.Bounds.Height / 2) – (150 / 2);

            popMessage.IsOpen = true;

        }

That’s about it, now you have a working popup with a darkened background.