Change the content screen while leaving the top level as it is

Question

I have the following picture.
I would like it to change from a blue page to a red page when the button is clicked while maintaining the yellow color on the top.

Is it possible to implement it in this form?

Answer 1

Hello @영훈 정 ,

There are two elements on the view, you can find the second one by specifying the x:Name, then change the background color of this element.
For example:

<StackLayout >   
        <!-- this view is a customized control called FirstContentView which derived from ContentView.   
        You could use any other element according to your needs -->  
        <views:FirstContentView >  
        </views:FirstContentView>  
        <!--set name for the second view, the default color is CadetBlue-->  
        <views:SecondContentView x:Name="SecondView" BackgroundColor="CadetBlue">  
        </views:SecondContentView>   
</StackLayout >  

Change color when clicking button : SecondView.BackgroundColor = Colors.Red;

It's recommended that you can use interactive MVVM and two-way data bindings. Please create a ViewModel as the BindingContext of your page, then add Color property and implement the INotifyPropertyChanged interface, you can check the HslViewModel source code in the sample. The command interface is supported by Button, you can use the command interface and change the color.

In addition, you said "blue page" and "red page", if you want to push to a new ContentPage and change the background color of the second ContentPage, you can try Navigation and change the background color in the constructor.

Best Regards,
Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.