atomui/samples/AtomUI.Demo.Desktop/ShowCase/InfoFlyoutShowCase.axaml

<UserControl
    x:Class="AtomUI.Demo.Desktop.ShowCase.InfoFlyoutShowCase"
    xmlns="https://github.com/avaloniaui"
    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"
    xmlns:atom="https://atomui.net"
    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
    mc:Ignorable="d">
    <showcase:ShowCasePanel>
        <showcase:ShowCaseItem
            Title="Basic"
            Description="The most basic example. The size of the floating layer depends on the contents region.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:FlyoutHost Trigger="Hover">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button ButtonType="Primary">Hover me</atom:Button>
                </atom:FlyoutHost>
            </StackPanel>
        </showcase:ShowCaseItem>

        <showcase:ShowCaseItem
            Title="Three ways to trigger"
            Description="Mouse to click, focus and move in.">
            <StackPanel Orientation="Horizontal" Spacing="10">
                <atom:FlyoutHost Trigger="Hover">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button>Hover me</atom:Button>
                </atom:FlyoutHost>
                <atom:FlyoutHost Trigger="Focus">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button>Focus me</atom:Button>
                </atom:FlyoutHost>
                <atom:FlyoutHost Trigger="Click">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button>Click me</atom:Button>
                </atom:FlyoutHost>
            </StackPanel>
        </showcase:ShowCaseItem>
        
        <showcase:ShowCaseItem
            Title="Placement"
            Description="There are 12 placement options available.">
            <Grid>
                <Grid.Styles>
                    <Style Selector="atom|Button">
                        <Setter Property="Margin" Value="5" />
                        <Setter Property="Width" Value="80" />
                    </Style>
                </Grid.Styles>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>
        
                <atom:FlyoutHost Grid.Row="1" Grid.Column="0" Trigger="Hover" Placement="LeftEdgeAlignedTop">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="LT"/>
                </atom:FlyoutHost>
        
                <atom:FlyoutHost Grid.Row="2" Grid.Column="0" Trigger="Hover" Placement="Left">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="Left"/>
                </atom:FlyoutHost>
        
                <atom:FlyoutHost Grid.Row="3" Grid.Column="0" Trigger="Hover" Placement="LeftEdgeAlignedBottom">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="LB"/>
                </atom:FlyoutHost>
        
                <atom:FlyoutHost Grid.Row="0" Grid.Column="1" Trigger="Hover" Placement="TopEdgeAlignedLeft">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="TL"/>
                </atom:FlyoutHost>
        
                <atom:FlyoutHost Grid.Row="0" Grid.Column="2" Trigger="Hover" Placement="Top">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="Top"/>
                </atom:FlyoutHost>
        
                <atom:FlyoutHost Grid.Row="0" Grid.Column="3" Trigger="Hover" Placement="TopEdgeAlignedRight">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="TR"/>
                </atom:FlyoutHost>
        
                <atom:FlyoutHost Grid.Row="1" Grid.Column="4" Trigger="Hover" Placement="RightEdgeAlignedTop">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="RT"/>
                </atom:FlyoutHost>
                
                <atom:FlyoutHost Grid.Row="2" Grid.Column="4" Trigger="Hover" Placement="Right">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="Right"/>
                </atom:FlyoutHost>
                
                <atom:FlyoutHost Grid.Row="3" Grid.Column="4" Trigger="Hover" Placement="RightEdgeAlignedBottom">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="RB"/>
                </atom:FlyoutHost>
                
                <atom:FlyoutHost Grid.Row="4" Grid.Column="1" Trigger="Hover" Placement="BottomEdgeAlignedLeft">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="BL"/>
                </atom:FlyoutHost>
                
                <atom:FlyoutHost Grid.Row="4" Grid.Column="2" Trigger="Hover" Placement="Bottom">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="Bottom"/>
                </atom:FlyoutHost>
                
                <atom:FlyoutHost Grid.Row="4" Grid.Column="3" Trigger="Hover" Placement="BottomEdgeAlignedRight">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="BR"/>
                </atom:FlyoutHost>
        
            </Grid>
        </showcase:ShowCaseItem>
        
        <showcase:ShowCaseItem
            Title="Arrow"
            Description="Support show, hide or keep arrow in the center.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:Segmented x:Name="ArrowSegmented">
                    <atom:SegmentedItem>Show</atom:SegmentedItem>
                    <atom:SegmentedItem>Hide</atom:SegmentedItem>
                    <atom:SegmentedItem>Center</atom:SegmentedItem>
                </atom:Segmented>
                <Grid>
                    <Grid.Styles>
                        <Style Selector="atom|Button">
                            <Setter Property="Margin" Value="5" />
                            <Setter Property="Width" Value="80" />
                        </Style>
                    </Grid.Styles>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
        
        
                  <atom:FlyoutHost Grid.Row="1" Grid.Column="0" 
                                   Trigger="Hover" 
                                   Placement="LeftEdgeAlignedTop"
                                   IsShowArrow="{Binding  ShowArrow}"
                                   IsPointAtCenter="{Binding  IsPointAtCenter}">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="LT"/>
                </atom:FlyoutHost>
        
                <atom:FlyoutHost Grid.Row="2" Grid.Column="0"
                                 Trigger="Hover"
                                 Placement="Left"
                                 IsShowArrow="{Binding  ShowArrow}"
                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="Left"/>
                </atom:FlyoutHost>
        
                <atom:FlyoutHost Grid.Row="3" Grid.Column="0"
                                 Trigger="Hover"
                                 Placement="LeftEdgeAlignedBottom"
                                 IsShowArrow="{Binding  ShowArrow}"
                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="LB"/>
                </atom:FlyoutHost>
        
                <atom:FlyoutHost Grid.Row="0" Grid.Column="1"
                                 Trigger="Hover"
                                 Placement="TopEdgeAlignedLeft"
                                 IsShowArrow="{Binding  ShowArrow}"
                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="TL"/>
                </atom:FlyoutHost>
        
                <atom:FlyoutHost Grid.Row="0" Grid.Column="2"
                                 Trigger="Hover"
                                 Placement="Top"
                                 IsShowArrow="{Binding  ShowArrow}"
                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="Top"/>
                </atom:FlyoutHost>
        
                <atom:FlyoutHost Grid.Row="0" Grid.Column="3"
                                 Trigger="Hover" 
                                 Placement="TopEdgeAlignedRight"
                                 IsShowArrow="{Binding  ShowArrow}"
                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="TR"/>
                </atom:FlyoutHost>
        
                <atom:FlyoutHost Grid.Row="1" Grid.Column="4" 
                                 Trigger="Hover"
                                 Placement="RightEdgeAlignedTop"
                                 IsShowArrow="{Binding  ShowArrow}"
                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="RT"/>
                </atom:FlyoutHost>
                
                <atom:FlyoutHost Grid.Row="2" Grid.Column="4" 
                                 Trigger="Hover" 
                                 Placement="Right"
                                 IsShowArrow="{Binding  ShowArrow}"
                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="Right"/>
                </atom:FlyoutHost>
                
                <atom:FlyoutHost Grid.Row="3" Grid.Column="4" 
                                 Trigger="Hover" 
                                 Placement="RightEdgeAlignedBottom"
                                 IsShowArrow="{Binding  ShowArrow}"
                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="RB"/>
                </atom:FlyoutHost>
                
                <atom:FlyoutHost Grid.Row="4" Grid.Column="1"
                                 Trigger="Hover" 
                                 Placement="BottomEdgeAlignedLeft"
                                 IsShowArrow="{Binding  ShowArrow}"
                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="BL"/>
                </atom:FlyoutHost>
                
                <atom:FlyoutHost Grid.Row="4" Grid.Column="2"
                                 Trigger="Hover" 
                                 Placement="Bottom"
                                 IsShowArrow="{Binding  ShowArrow}"
                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="Bottom"/>
                </atom:FlyoutHost>
                
                <atom:FlyoutHost Grid.Row="4" Grid.Column="3" 
                                 Trigger="Hover" 
                                 Placement="BottomEdgeAlignedRight"
                                 IsShowArrow="{Binding  ShowArrow}"
                                 IsPointAtCenter="{Binding  IsPointAtCenter}">
                    <atom:FlyoutHost.Flyout>
                        <atom:Flyout>
                            <TextBlock Width="200" Height="100" Padding="20">The most basic example.</TextBlock>
                        </atom:Flyout>
                    </atom:FlyoutHost.Flyout>
                    <atom:Button Text="BR"/>
                </atom:FlyoutHost>
        
                </Grid>
            </StackPanel>
        </showcase:ShowCaseItem>

    </showcase:ShowCasePanel>
</UserControl>