CODEWITHSUNDEEP
c#xamluwpwindows-10-universaluwp-xaml
Yvder
Yvder

Reputation: 252

XAML UWP Flyout positioning

I am implementing a Flyout in a UWP app as you can see on the image below. I want the AutoSuggestBox in the Flyout to appear in (and fill) the PageHeader, but it appears below it. Screenshot

This is my XAML:

<Button x:Name="searchButton" Margin="0" Padding="0" BorderThickness="0" RelativePanel.AlignBottomWith="pageHeader">
        <Button.Content>
            <FontIcon Height="48" Width="48" Glyph="&#xE094;"/>
        </Button.Content>
        <Button.Flyout>
            <Flyout>
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="Padding" Value="0"/>
                        <Setter Property="BorderThickness" Value="0"/>
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                        <Setter Property="Height" Value="40"/>
                        <Setter Property="VerticalAlignment" Value="Top"/>
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <StackPanel Margin="0" VerticalAlignment="Top">
                    <AutoSuggestBox x:Name="innerSearchBox" PlaceholderText="Search" VerticalAlignment="Top"/>
                </StackPanel>
            </Flyout>
        </Button.Flyout>
    </Button>

How can I make the AutoSugesstBox appear in and fill the PageHeader?

Upvotes: 3

Views: 4375

Answers (1)

Vijay Nirmal
Vijay Nirmal

Reputation: 5837

Set Placement as Left for Flyout.

<Flyout Placement="Left">

If you want to make the AutoSuggestBox to cover the entire width of the application, set the width of the AutoSuggestBox to ApplicationView width.

You can do this by

public MainPage()
{
    this.InitializeComponent();
    ApplicationView.GetForCurrentView().VisibleBoundsChanged += MainPage_VisibleBoundsChanged;
    var bound = ApplicationView.GetForCurrentView().VisibleBounds;
    innerSearchBox.Width = (int)bound.Width - 48;        //48 is the size of the button
}

private void MainPage_VisibleBoundsChanged(ApplicationView sender, object args)
{
    var bound = ApplicationView.GetForCurrentView().VisibleBounds;
    innerSearchBox.Width = (int)bound.Width - 48;
}

Upvotes: 3

Related Questions