XAML Popup sample

This sample demonstrates how to create and use the XAML Popup element in your projects. Specifically, this sample covers: Fundamentals of a Popup , including positioning one using the HorizontalOffset and VerticalOffset properties, and displaying or ...

 
 
 
 
 
(1)
661 times
Add To Favorites
9/19/2012
E-mail Twitter del.icio.us Digg Facebook
<!--
//*********************************************************
//
// Copyright (c) Microsoft. All rights reserved.
// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
//
//*********************************************************
-->

<common:LayoutAwarePage
    x:Class="SDKSample.XAMLPopup.Scenario1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SDKSample.XAMLPopup"
    xmlns:common="using:SDKSample.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name="Input" Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock x:Name="InputTextBlock1"  TextWrapping="Wrap" Grid.Row="0" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" >
                The <Bold>Popup</Bold> class in XAML is a general purpose container for hosting child content (other UIElements) but serves primarily to host these 
                child elements <Bold>on top of existing</Bold> content within your current Window. The Popup itself is not a UIElement and has no 
                visual default template.  Instead it relies on the developer setting the content.
                <LineBreak /><LineBreak />
                The developer sets the positioning of the Popup by setting the HorizontalOffset and VerticalOffset values or by using the 
                Canvas.Left/Top attached properties to position specifically on the Window.  Setting the Offset values will make the Popup offset 
                from the Parent control hosting it.
                <LineBreak /><LineBreak />
                Below the Button opens a Popup which is already in the XAML markup and sets its IsOpen property to True, which opens the Popup. 
                In this example, the Popup.Child element is a StackPanel of some UIElements, but this could be any FrameworkElement in XAML (i.e., a custom UserControl).
                <LineBreak /><LineBreak />
                Closing a Popup is as simple as changing the IsOpen property to False as demonstrated in the Button hosted within the Popup example below.
            </TextBlock>
        </Grid>

        <Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
            <StackPanel>
                <Button Content="Show Popup (using Offset)" Click="ShowPopupOffsetClicked"/>
            </StackPanel>
            <Popup VerticalOffset="10" HorizontalOffset="200" x:Name="StandardPopup">
                <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="2" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Width="200" Height="200">
                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="Simple Popup" FontSize="24.667" HorizontalAlignment="Center" />
                        <Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center" />
                    </StackPanel>
                </Border>
            </Popup>
        </Grid>

    </Grid>

</common:LayoutAwarePage>