How to allow user change interface of Windows store application

Question

Consider this Example code

        <Grid Name="MyParentGrid">

        <Grid.Background>
            <ImageBrush ImageSource="Test.jpg"/>
        </Grid.Background>

            <HyperlinkButton Name="Play" Click="Play_Click" Background="Black"/>
            <HyperlinkButton Name="Personalize"Click="Personalize_Click" Background="Black"/>
            <HyperlinkButton Name="LeaderBoard" Click="LeaderBoard_Click" Background="Black"/>

        </Grid>

All I have now is three buttons inside a grid that has a background which is a photo.

Now If I Want to let the user when Click on a Button to View another Background instead of Test.jpg , also change the Buttons Background colors,

In my source code I have a lot of grids, a lot of canvas inside them a lot of hyberlinkbuttons and sliders... etc, a lot of colors, Margins "places of this buttons" and properties and content need to be changed when the user change them by choosing another interface

I tried to make multiple grids "ParentGrid1" and "ParentGrid2" then start to change visibility of each, and a lot of copied and paste code "spaghetti code", How can I allow the user to change the interface totally by clicking button with good written code??

Answer 1

For illustration, I modified your xaml:

<Grid Name="MyParentGrid">
        <Grid.Background>
            <ImageBrush ImageSource="ms-appx:///Assets/Test.jpg"/>
        </Grid.Background>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <HyperlinkButton Name="Play" Click="Play_Click" Background="Black" Content="Play"/>
            <HyperlinkButton Name="Personalize" Click="Personalize_Click" Background="Black" Content="Personalize"/>
            <HyperlinkButton Name="LeaderBoard" Click="LeaderBoard_Click" Background="Black" Content="Leaderboard"/>
        </StackPanel>
    </Grid>

And did the following in the code behind:

    private static BitmapImage first;
    private static BitmapImage second;
    private static ImageBrush backBrush;

    public MainPage()
    {
        this.InitializeComponent();
        first = new BitmapImage(new Uri("ms-appx:///Assets/Test.jpg"));
        second = new BitmapImage(new Uri("ms-appx:///Assets/NewBackground.jpg"));

        backBrush = new ImageBrush();
        SetBackground();
    }

    private void SetBackground()
    {
        if(backBrush.ImageSource == first)
        {
            backBrush.ImageSource = second;
        }
        else
        {
            backBrush.ImageSource = first;
        }

        MyParentGrid.Background = backBrush;
    }

    private void Personalize_Click(object sender, RoutedEventArgs e)
    {
        SetBackground();
    }

The first two (Type BitmapImage) are used to represent the different background images. And the third is a brush that will be used to set the Background property of the Grid. Each one is initialized in the constructor. The SetBackground() method simply switches to the second image if the current background image is the first and switches to the second otherwise.