Partager via

Change Application Background using Visual States through Settings Charm

  • Article

Today we will be looking at how we can change application background using Visual States through The Settings Charm.

Step1 : Create a project for Windows 8.1 in Visual Studio 2013 

Step2: Right click the Project and click Add > New Item

Select Settings Flyout from and Window as shown

 

Name this Theme.xaml

Step3: once the flyout is in the solution, open it and insert two button in the flyout as shown below

 

Step4: open the Code behind file for Theme.xaml (Theme.xaml.cs) and declare a string by the name ButtonSelection that should be Public Static

 public sealed partial class Theme : SettingsFlyout
 {
 
 public static string ButtonSelection = string.Empty;
 public Theme()
 {
 this.InitializeComponent();
 }

Step5: Create Events for the Buttons in the Flyout by double clicking on them and write the following code inside the Events

 private void Yellow_Click(object sender, RoutedEventArgs e)
 {
 ButtonSelection = "Yellow";
 }

 private void Yellow_Click(object sender, RoutedEventArgs e)
 {
 ButtonSelection = "Red";
 }

Step6: Right click on the project and click open in Blend... from the Menu

Once the project is open in Blend, make sure the mainPage.xaml is open, Goto the States Tab as shown and define three States for the Page, DefaultState, YellowState and RedState

 

Step7: click the YellowState, its Recording will be on as shown in the Picture, Select the Grid you want to change the color, from the Brush Menu in the right hand side, change the color to Yellow, as shown

Step8: do the same for the other states as well and click save all, Move back to Visual Studio, it will prompt to reload the Solution, Click "Yes to all"

Step9: open MainPage.xaml.cs and create DispatcherTimer object. Also create Tick event for the timer and defin the interval for it as well.

  public sealed partial class MainPage : Page
 {
 DispatcherTimer timer = new DispatcherTimer();
 public MainPage()
 {
 this.InitializeComponent();
 timer.Tick += timer_Tick;
 timer.Interval = TimeSpan.FromMilliseconds(0.1);
 timer.Start();
 }

 Step10: In the timer_tick Method, write the following code

 void timer_Tick(object sender, object e)
 {
 //mygrid.Background = Theme.Colour;
 if (Theme.ButtonSelection == "Yellow")
 {
 VisualStateManager.GoToState(this, "YellowState", true);
 }
 else if (Theme.ButtonSelection == "Red")
 {
 VisualStateManager.GoToState(this, "RedState", true);
 }
 }

 Step11: Click Save All, and Run the Project, if everything goes rite you will see that upon clicking the Buttons in the settings Panel, the App will change its background color using visual States. You can also further modify and add animations to the Visual States defined in Blend

changeAppwithVisualStates.rar

Comments

  • Anonymous
    April 13, 2014
    Nice!! very helpful :)

  • Anonymous
    July 01, 2014
    Nice tutorial of visual states

  • Anonymous
    December 02, 2014
    Thank you sir!

  • Anonymous
    December 04, 2014
    Nice Post Sir Keep it Up