Tuesday 9 December 2014

Styling the PickerFlyout

I recently had a requirement to customise the PickerFlyout for a Windows Phone 8.1 app.  By default the Background color is the chrome color for the selected theme.  We had a requirement to have all of our Flyouts use a white background.

Problem is, PickerFlyout does not appear to be "styleable", and in fact is simply a Popup control.  Using XamlSpy we can see that the child of the Popup is a PickerFlyoutPresenter, which can be styled.  But if you attempt something like:
<Style TargetType="PickerFlyoutPresenter">
<Setter  Property="Background"  Value="White" />
</Style>
 
on a page or control level you will find that it has no effect on your Flyout.  This is because the Flyout is not a child of the page or control.  Simply move it to your App.xaml to have this style applied throughout your app.