Binding to properties in my MainWindow to settings in a SettingsFlyout

Question

I've got a SettingsFlyout which contains a toggle button for "ShowFormatBar". When toggled, I'd like this to show or hide a StackPanel on my main window.

I have the toggle bound to my settings correctly, but I can't get the main window to refresh the content. I have to close and reopen the app to see the change.

Here's my settings class:

public class AppSettings : INotifyPropertyChanged 
{
    Windows.Storage.ApplicationDataContainer localSettings = Windows.Storage.ApplicationData.Current.LocalSettings;

    private bool _showFormatBar;
    public bool ShowFormatBar
    {
        get
        {
            if (localSettings.Values["showFormatBar"] == null)
                localSettings.Values["showFormatBar"] = true;

            _showFormatBar = (bool)localSettings.Values["showFormatBar"];
            return _showFormatBar;
        }
        set
        {
            _showFormatBar = value;
            localSettings.Values["showFormatBar"] = _showFormatBar;
            NotifyPropertyChanged("ShowFormatBar"); 
            NotifyPropertyChanged("FormatBarVisibility");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

MySettingsFlyout.xaml.cs

public sealed partial class MySettingsFlyout: SettingsFlyout
{
    public MySettingsFlyout()
    {
        this.InitializeComponent();
        AppSettings settings = new AppSettings();
        this.DataContext = settings;
    }
}

Editor.xaml.cs

public sealed partial class Editor : Page
{
    public AppSettings settings = new AppSettings();

    public Editor()
    {
        this.InitializeComponent();
        this.DataContext = this;
    }

    public Visibility FormatBarVisibility
    {
        get { return settings.ShowFormatBar ? Visibility.Visible : Visibility.Collapsed; }
    }
}

Editor.xaml

<StackPanel x:Name="FormatBar" Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Left" Grid.Row="0" Visibility="{Binding FormatBarVisibility}">

I've tried putting a separate call to NotifyPropertyChanged into MySettings.xaml.cs when the toggle is clicked.

I also tried setting the Visibility of the StackPanel to Visibility="{Binding Source=Settings, Path=FormatBarVisibility}" but that also didn't work.

I have a feeling I'm creating two separate, unconnected instances of AppSettings, but I'm not sure how to address this. Is this the issue? And if so, where can I declare AppSettings where both the Main Editor window and MySettings can access it?

Answer 1

Found the answer here. I should have googled a little more before posting this question!

The Settings class needs to be instantiated in App.xaml.cs.

public AppSettings Settings = new AppSettings();

I can then set the DataContext to that instance from anywhere else using this code.

this.DataContext = (Application.Current as MyNamespace.App).Settings;