Windows 8.1 (Preview): Flyout, MaxWidth and FlyoutPresenter

A simple thing, if you create a XAML UI you’ll find it pretty easy in Visual Studio 2013 to make something like a CommandBar button which has a Flyout associated with it. For example;

image

and then;

image

followed by changing the icon on that button;

image

and adding a Flyout;

image

and putting some content into it;

image

then that’s all fine but one thing that might be a bit tricky is getting that Flyout to display its full width. Both at design-time above and at runtime as below;

image

Now, it’s possible that this is against design guidelines but, either way, it wasn’t immediately obvious how to get that Flyout to size to content rather than scrolling/clipping. There’s another entity in play here, the FlyoutPresenter. It’s possible to see this;

image

and then tweak;

image

and that seems to do the trick;

image