There are two methods for changing and customizing the available settings through the Windows 8 Settings Charm - XAML and HTML. The XAML method is designed to work on the Native modules, while the HTML is for the JavaScript module, but it can also be used for Native as long as you do not use anything that accesses WinJS.UI (ie: only use simple HTML with this option for Native).
XAML
Below is a short example of some correctly formatted XAML for use with the Windows 8 Native target platform. For a full list of all available commands, plus visual representations of them, please see the Microsoft Control List.
<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" >
<!-- custom content here -->
<TextBlock
Text="Dynamic xaml!"
FontWeight="Bold"
TextWrapping="Wrap"
Style="{StaticResource BasicTextStyle}"
HorizontalAlignment="Left" />
<TextBlock
Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
Name="IntroText"
TextWrapping="Wrap"
HorizontalAlignment="Left"
Style="{StaticResource BasicTextStyle}" />
<TextBlock
Text="Please enter a value:"
Margin="0,25, 0, 0"
TextWrapping="Wrap"
HorizontalAlignment="Left"
Style="{StaticResource BasicTextStyle}" />
<StackPanel
Margin="0, 7, 0, 0"
Orientation="Horizontal">
<TextBox
Name="Setting"
HorizontalAlignment="Left"
Width="300" />
<Button
Name="CommitButton"
Content="Commit"
Margin="20,0, 0, 0" />
</StackPanel>
<ToggleSwitch
Name="Toggle2"
OffContent="No Chips"
OnContent="Chips"
IsOn="True"/>
<StackPanel>
<RadioButton Name="rb1" >Yes</RadioButton>
<RadioButton Name="rb2" IsChecked="True">No</RadioButton>
<RadioButton Name="rb3" >No opinion</RadioButton>
</StackPanel>
<!-- end custom content -->
</StackPanel>
HTML
Below you can find an example of the correctly formatted HTML that is needed to create a custom Settings Charm panel for the Windows 8 JavaScript target. You can find further information on this from the Microsoft Help page Adding App Settings.
<html>
<head>
<title>App settings flyout</title>
</head>
<body>
<!-- BEGINSETTINGSFLYOUT -->
<div data-win-control="WinJS.UI.SettingsFlyout" aria-label="App Settings Flyout" data-win-options="{settingsCommandId:'defaults',width:'wide'}">
<!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
<div class="win-ui-dark win-header" style="background-color:#00b2f0">
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
<div class="win-label">Defaults</div>
</div>
<div class="win-content">
<div class="win-settings-section">
<h3>Toggle switch</h3>
<p>Use toggle switches to let users set Boolean values.</p>
<div id="Toggle1" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title:'Download updates automatically',checked:true}">
</div>
<div id="Toggle2" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title:'Install updates automatically'}">
</div>
</div>
<div class="win-settings-section">
<h3>Push button</h3>
<p>With a push button, users initiate an immediate action.</p>
<label>Button Label</label>
<button type="button" onclick="setSoundVolume()">Set Sound Volume</button>
</div>
<div class="win-settings-section">
<h3>Select control</h3>
<p>Use the select control to allow users to select one item from a set of text-only items.</p>
<label>State</label>
<select aria-label="State select control">
<option value="AK">Alaska</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="KS">Kansas</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="OR">Oregon</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="WA" selected>Washington</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="win-settings-section">
<h3>Hyperlink</h3>
<p>Use a hyperlink when the associated action will take the user out of this flyout.</p>
<a href="http://go.microsoft.com/fwlink/?LinkID=190175" target="fix_link_too">View privacy statement</a>
</div>
<div class="win-settings-section">
<h3>Text input box</h3>
<p>Use a text input box to allow users to enter text. Set the type of the text input box according to the type of text you’re capturing from the user (e.g. email or password).</p>
<label>Email account</label>
<input type="text" aria-label="Enter email account" />
<button type="button" onclick="WinJS.log && WinJS.log('Add email account button pressed', 'samples', 'status')">Add</button>
</div>
<div class="win-settings-section">
<h3>Radio button group</h3>
<p>Lets users choose one item from a small set of mutually exclusive, related options.</p>
<label>Video quality</label>
<label><input type="radio" name="video" value="High" checked />High</label>
<label><input type="radio" name="video" value="Medium" />Medium</label>
<label><input type="radio" name="video" value="Low" />Low</label>
</div>
</div>
</div>
<!-- ENDSETTINGSFLYOUT -->
</body>
</html>
Please note that the data-win-options settingsCommandId must be the same as the id argument in the GameMaker:Studio function win8_settingscharm_add_html_entry.