Windows 10 Universal app flyout, how to remove scrollbars?

Question

I've got a Flyout view with a TextBlock in it. The text block has more than one line's amount of text and I'd like it to wrap to the next line like it usually does, but when used in a Flyout it scrolls off the screen... How do you disable the scroll view in a Flyout?

Flyout XAML:

...
  <AppBarButton.Flyout>
    <Flyout Placement="Full">
      <local:MyView/>
    </Flyout>
  </AppBarButton.Flyout>
...

My View XAML:

<UserControl ...>
  <Grid>
    ...
    <TextBlock Text="Loading..." Style="{ThemeResource SubtitleTextBlockStyle}" Margin="10,0,10,20" Grid.Row="1" TextWrapping="Wrap"/>
  </Grid>
</UserControl>

It comes out like this:

Answer 1

To set properties of Flyout like width or scrollbar's visibility, we need to customize the style of FlyoutPresenter. Here is how I do it:

            <Flyout Placement="Full" >
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"></Setter>
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <Grid>
                <TextBlock Text="This is an informational flyout. Click outside to dismiss.xxxjfdalisfsadpfuaspdfoia" Grid.Row="1" TextWrapping="Wrap"/>
                </Grid>
            </Flyout>

Directly copy the into your Flyout element will meet your requirement.

Answer 2

You can 1) make a maxwidth to your flyout

or

2) try this :

<Flyout Placement="full" >                 
<Grid   ScrollViewer.VerticalScrollBarVisibility="Disabled"  ScrollViewer.HorizontalScrollBarVisibility="Disabled">
........
  </Grid>
 </Flyout>

best of luck !