Set Full Page Height for Flyout - xaml

Question

I want to display flyout-panel on the right side of my page and this panel must have the full height of the page.
Here is a XAML:
<Button Content="One" Grid.Column="0" Click="Button_Click_1" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" />
<Button x:Name="TestButton" Content="TestButton" Grid.Column="1" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
<Button.Flyout>
<Flyout>
<StackPanel x:Name="FlyoutPanel" Margin="0 0 0 0">
<TextBlock>Some text</TextBlock>
<Button Click="Button_Click">Press me</Button>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<StackPanel x:Name="FlyoutPlacement" Grid.Column="2" Margin="0 0 0 0"/>
And here is a code to display the flyout panel on the right side of my page:
private void Button_Click_1(object sender, RoutedEventArgs e)
{
FlyoutPanel.Height = Window.Current.Bounds.Height;
FlyoutPlacement.Height = Window.Current.Bounds.Height;
TestButton.Flyout.ShowAt(FlyoutPlacement);
}
Now my flyout-panel have a vertical scrollbar and the size which is smaller then the page size. How can I remove scrollbar and set the flyout-panel the full page size?

Answer 1

You need to edit the default FlyoutPresenterStyle:
<SolidColorBrush x:Key="FlyoutBackgroundThemeBrush" Color="#FF000000"/>
<SolidColorBrush x:Key="FlyoutBorderThemeBrush" Color="#FFFFFFFF"/>
<x:Double x:Key="FlyoutThemeMaxHeight">718</x:Double> <!-- Change to NaN -->
<x:Double x:Key="FlyoutThemeMaxWidth">450</x:Double> <!-- Change to NaN -->
<x:Double x:Key="FlyoutThemeMinHeight">54</x:Double>
<x:Double x:Key="FlyoutThemeMinWidth">70</x:Double>
<Thickness x:Key="FlyoutBorderThemeThickness">2</Thickness>
<Thickness x:Key="FlyoutContentThemePadding">20,17,20,20</Thickness> <!-- Change to 0 -->
<Style x:Key="FlyoutStyle" TargetType="FlyoutPresenter">
<Setter Property="RequestedTheme" Value="Light" />
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Background" Value="{ThemeResource FlyoutBackgroundThemeBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource FlyoutBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}"/>
<Setter Property="Padding" Value="{ThemeResource FlyoutContentThemePadding}"/>
<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}"/>
<Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource FlyoutThemeMinHeight}"/>
<Setter Property="MaxHeight" Value="{ThemeResource FlyoutThemeMaxHeight}"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> <!-- Change to Hidden -->
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="FlyoutPresenter">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer x:Name="ScrollViewer"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
AutomationProperties.AccessibilityView="Raw">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The main resources for your problem are FlyoutThemeMaxHeight, FlyoutThemeMaxWidth and FlyoutContentThemePadding. You need to set the max values to a very big number like I have put it for example NaN.
Then you set it as the FlyoutPresenterStyle:
<Flyout FlyoutPresenterStyle="{StaticResource FlyoutStyle}">
Also to hide the vertical scroll bar set ScrollViewer.VerticalScrollBarVisibility to Hidden.