WinRT ListPickerFlyout crashes App if background color changed

Question

If I put the following code in a skeleton WinRT app, it won't construct the Main Page:

<Page
x:Class="TestApp1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="Blue">

<Page.Resources>
    <ListPickerFlyout x:Key="btnfly"/>
</Page.Resources>

<Grid>

</Grid>
</Page>

The error is:

An exception of type 'Windows.UI.Xaml.Markup.XamlParseException' occurred in TestApp1.WindowsPhone.exe but was not handled in user code WinRT information: Cannot create instance of type '%0' [Line: 12 Position: 42]

Changing the Background tag back to {ThemeResource ApplicationPageBackgroundThemeBrush} fixes the problem.

Any ideas how I can change the background color of my page and still use a ListPickerFlyout?

score 0 · Accepted Answer · answered Feb 08 '15 at 08:24

The easy solution is to set the background colour inside the constructor, after the call to InitializeComponent:

public MainPage()
{
  this.InitializeComponent();

  // Or the colour of your choice...
  Background = new SolidColorBrush(Windows.UI.Colors.Blue);

  this.NavigationCacheMode = NavigationCacheMode.Required;
}

The interesting question is "why?" - my guess is that because the ListPickerFlyout is not actually a UIElement there is something strange interaction going on during Initialization.

score 0 · Answer 2 · answered Feb 08 '15 at 17:30

Yes, "why" is an interesting question, and Peter's answer is good.

I also found another answer from another StackOverflow question.

First, override the FlyoutBackgroundThemeBrush by adding the following to App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="FlyoutBackgroundThemeBrush" Color="Blue" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="FlyoutBackgroundThemeBrush" Color="Blue" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

Then change the background of the page to Background="{ThemeResource FlyoutBackgroundThemeBrush}"

WinRT ListPickerFlyout crashes App if background color changed

2 Answers2