Windows 8.1 : Flyouts

In windows 8 apps development if wants to integrate flyout for app you don't have any straight forward way to do it. For this kind of a things I used popup control as flyout or third party library like callisto. But in windows 8.1 app development you don't need to be struggle like that way. Because now its integrate with base control library. 

Let's get a scenario like needs to get information from the button click. Now you can do this very simply way setting up the flyout property in the button. 

        <Button x:Name="AddButton" Content="Add" Foreground="Black" Height="66" Margin="-3" Width="157" BorderBrush="Black" VerticalAlignment="Top" HorizontalAlignment="Right" FontSize="26.667">
                <Button.Flyout>
                    <Flyout Placement="Bottom">
                        <StackPanel Height="439" Width="294" HorizontalAlignment="Right" Margin="0,5,0,0">
                            <TextBlock Style="{StaticResource BaseTextBlockStyle}" Text="Add Task" Height="29" FontWeight="Bold" SelectionHighlightColor="{x:Null}" FontSize="21.333" Margin="10,0,10,20"/>
                            <TextBlock HorizontalAlignment="Left" Height="24" Margin="10,0,0,10" TextWrapping="Wrap" Width="145" Text="Projects" FontSize="18.667"/>
                            <ComboBox Height="35" Margin="10,0,10,10"/>
                            <TextBlock HorizontalAlignment="Left" Height="20" Margin="10,0,0,10" TextWrapping="Wrap" Text="Task" Width="199" FontSize="18.667"/>
                            <ComboBox Height="35" Margin="10,0,10,10"/>
                            <TextBlock HorizontalAlignment="Left" Height="30" Margin="111,0,0,10" TextWrapping="Wrap" Text="Hours" Width="77" FontSize="18.667"/>
                            <Slider Height="42" Margin="10,0"/>
                            <TextBox Height="30" Margin="111,0,106,20" TextWrapping="Wrap" Text="1" TextAlignment="Center" BorderThickness="2"/>
                            <CheckBox Content="Billable" Height="37" Margin="7,0,54,10" VerticalAlignment="Stretch" FontSize="18.667"/>
                            <Button Margin="0,5,0,0" Content="Done" Width="120"/>
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>

When you click on the add button flyout will shows up like below.

The place where flyout shows up can change using the placment property in the flyout. In above example I used placement position as bottom. You can select top, right, left, full or bottom as placement options. But this depends on the space available on the screen. 

This flyout can have one content item, because of that reason complex UI component must wrapped with StackPanel or Grid item. In this example I used StackPanel. Adding the click event to the button inside the flyout you can perform the action and hide the flyout programmatically.