Question

If I have a user setting ToggleThis

I want to have this setting availabe to the user in a menu, say Settings/ToggleSettings. clicking it. Each click should toggle the user setting true/false but also update the menuItem icon to display the actual setting.

I can do this using

XAML

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Grid>
        <Menu IsMainMenu="True">
            <MenuItem Header="_Settings">
                <MenuItem Header="_Toggle" Name="ToggleSettings" Click="MenuItem_Click">
                    <MenuItem.Icon>
                        <Image Source="Images/Toggle.png" />
                    </MenuItem.Icon>
                </MenuItem>
            </MenuItem>            
        </Menu>
    </Grid>
</Window>

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void MenuItem_Click(object sender, RoutedEventArgs e)
        {
            if (ToggleSettings.Icon == null)
            {
                Uri Icon = new Uri("pack://application:,,,/Images/" + "Toggle.png");
                ToggleSettings.Icon = new Image
                {
                    Source = new BitmapImage(Icon)
                };
                Properties.Settings.Default.toggleThis = true;
            }
            else
            {
                ToggleSettings.Icon = null;
                Properties.Settings.Default.toggleThis = false;
            }
        }


    }
}

However, I know this isn’t the correct way of doing it as for example, on launch the menu probably won’t be in the correct state based on previous settings. Trouble is, I don’t know the right way. Can anyone give me some pointers on the right way to do this?

I’m assuming I need to use binding on both the icon and/or some value in the MenuItem but don’t really know where to start.

Thank you

Answer 1

Actually there is no “right” way, there is only what works best, and what is most appropriate given the context.

Your example looks fine, it seems, so far at least, the only issue you have, is that you will not have the selected option in sync with what the user chose/didn’t choose, the last time they used the software.

This requires only two small pieces of your code to be in two particular places.

• Austin pointed out one of them already: Save your settings. This you should do right after your if/else in your method: MenuItem_Click. Just make sure the method does not exit somehow before the call to Settings.Save is made… a try/catch with a graceful way of ensuring a consistent settings state would be prudent.
• The other is at the “time” you yourself mentioned: Initialization, or startup of the app. Somewhere in your app, before the initial loading is completed, you must access the setting you created (toggleThis) and use it to set the initial state of your menu item.

The best way to facilitate this, is to have a private method, which is responsible for both changing what icon is showing on the menu item, as well as storing the most recent state in the settings of the app. A method called Toggle() perhaps, which you call within your MenuItem_Click method. You need to give the menu item in question and ID though, that can be used to access the menu item in your code-behind though. As well, this code example assumes you have your icons stored in settings as well, although the icons can be coming from wherever, as long as you can reference them.

So your code could be something like this, although not exactly this:

public MainWindow() 
    { 
        InitializeComponent();
        this.SetToggleIcon(Properties.Settings.Default.toggleThis);
    } 

    private void Toggle()
    {
        this.StoreToggleState(!Properties.Settings.Default.toggleThis);
        this.SetToggleIcon(Properties.Settings.Default.toggleThis);
    }

    private void SetToggleIcon(bool state)
    {
      this.menuItem_ToggleSettings.Icon = (Properties.Settings.Default.toggleThis) ? Properties.Settings.Default.IconTrue : Properties.Settings.Default.IconFalse;
    }

    private void StoreToggleState(bool state)
    {
       Properties.Settings.Default.toggleThis = state;
       Properties.Settings.Default.Save();
    }

    private void MenuItem_Click(object sender, RoutedEventArgs e) 
    { 
      this.Toggle();
    }