Loop through image resources with key press

Question

I would like to iterate through resource images upon keyboard press.

 

For example, when keyboard key F8 is pressed the images associated in that respective folder (Folder 1) changes live in all six views.

 

Curently I have six .xaml theme files which I change the image manually by editing Image Source=, see structure below:

• Game.xaml (Game Theme)
• Option.xaml (Option Theme)
• Pause.xaml (Pause Theme)
• Platform.xaml (Platform Theme)
• Startup.xaml (Startup Theme)
• Shutdown.xaml (Startup Theme)

<Image Source="/imageChanger;Component/Images/Themes/Folder 1/Game Theme/Background.png" />

<Image Source="/imageChanger;Component/Images/Themes/Folder 1/Option Theme/Background.png" />

<Image Source="/imageChanger;Component/Images/Themes/Folder 1/Pause Theme/Background.png" />

<Image Source="/imageChanger;Component/Images/Themes/Folder 1/Platform Theme/Background.png" />

<Image Source="/imageChanger;Component/Images/Themes/Folder 1/Startup Theme/Startup.png" />

<Image Source="/imageChanger;Component/Images/Themes/Folder 1/Startup Theme/Shutdown.png" />

I was thinking something like a settings.ini or settings.json file and retain and changes, see example below.

#
# CONFIGURATION
#

{
"Set Default": "F1",
"Next": "F2", (Folder 1 is default but 'Next' starts the cycle in sequence from whichever is selected)
"Previous": "F3"
}

#
# CYCLE BACKGROUND IMAGE
#

{
"Folder 1": true, (Set as default first)
"Folder 2": false,
"Folder 3": false,
"Folder 4": false,
"Folder 5": false,
"Folder 6": false,
"Folder 7": false,
"Folder 8": false,
"Folder 9": false,
"Folder 10": false,
"Folder 11": false,
"Folder 12": false,
"Folder 13": false,
"Folder 14": false,
"Folder 15": false,
"Folder 16": false,
"Folder 17": false,
"Folder 18": false
}