Windows 8地鐵應用程序進行設置彈出

Question

我正在製作遊戲，我希望用戶能夠從右側滑動並在Windows 8中打開魅力欄中的設置。
我嘗試了很多東西，但我還沒有設法使它工作。如果有人做到了，請告訴我你是如何做到的。我正在使用Visual Studio 2012 express。

Answer 1

更新：

在Windows 8.1及以後一個SettingsFlyout控件添加到Windows Store應用控件集合。

添加=>新建=> SettingsFlyout

然後將其添加像這樣：

sealed partial class App 
{ 

    public App() 
    { 
     this.InitializeComponent(); 
     this.Suspending += OnSuspending; 
    } 

    protected override void OnWindowCreated(WindowCreatedEventArgs args) 
    { 
     SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested; 
    } 

    private void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args) 
    { 
     var setting = new SettingsCommand("MySetting", "MySetting", handler => 
      new MySettingsFlyout().Show()); 
     args.Request.ApplicationCommands.Add(setting); 
    } 

結果：

做舊方式：

這裏是你如何使用XAML和C＃這樣做在Windows 8

1.創建一個XAML用戶控件

<UserControl 
    x:Class="CSharp_Settings.Settings.Help_Settings" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    d:DesignHeight="300" 
    d:DesignWidth="646"> 
    <Border BorderBrush="#FF590151" BorderThickness="1"> 
     <Grid Background="White" VerticalAlignment="Stretch"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="80"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <Grid Background="#FFFF00F2" Grid.Row="0"> 
       <Grid Margin="40,20,17,13"> 
        <Grid.Transitions> 
         <TransitionCollection> 
          <EntranceThemeTransition FromHorizontalOffset="50" /> 
         </TransitionCollection> 
        </Grid.Transitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="50" /> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
        <Button Click="Button_Click_1" Margin="0,3,0,0" Grid.Column="0" 

HorizontalAlignment="Left" Style="{StaticResource BackButtonStyle}"/> 
        <TextBlock Margin="10,5,0,0" Grid.Column="1" FontFamily="Segoe UI" 

FontWeight="SemiLight" FontSize="24.6667" Text="Help" HorizontalAlignment="Left" /> 
        <Image Source="/Assets/icon.png" HorizontalAlignment="Right" Grid.Column="2" 

Margin="0,0,6,0" /> 
       </Grid> 
      </Grid> 
      <Grid Grid.Row="1" Margin="40,24,23,0" VerticalAlignment="Top"> 
       <Grid.Transitions> 
        <TransitionCollection> 
         <EntranceThemeTransition FromHorizontalOffset="120" /> 
        </TransitionCollection> 
       </Grid.Transitions> 
       <TextBlock Text="Something" Foreground="Black"/> 
      </Grid> 
     </Grid> 
    </Border> 
</UserControl> 

代碼隱藏的用戶控件

using Windows.UI.ApplicationSettings; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls.Primitives; 
namespace CSharp_Settings.Settings 
{ 
    public sealed partial class Help_Settings 
    { 
     public Help_Settings() 
     { 
      InitializeComponent(); 
     } 

     private void Button_Click_1(object sender, RoutedEventArgs e) 
     { 
      if (Parent is Popup) 
       ((Popup)Parent).IsOpen = false; 
      SettingsPane.Show(); 
     } 
    } 
} 

註冊設置窗格中應用程序

using CSharp_Settings.Settings; 
using Windows.Foundation; 
using Windows.UI.ApplicationSettings; 
using Windows.UI.Core; 
using Windows.UI.Popups; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 

namespace CSharp_Settings 
{ 
    public sealed partial class MainPage 
    { 
     public MainPage() 
     { 
      InitializeComponent(); 
      _window = Window.Current.Bounds; 
      Window.Current.SizeChanged += OnWindowSizeChanged; 
      SettingsPane.GetForCurrentView().CommandsRequested += CommandsRequested; 
     } 

     private Rect _window; 
     private Popup _popUp; 
     private const double WIDTH = 646; 

     private void OnWindowSizeChanged(object sender, WindowSizeChangedEventArgs e) 
     { 
      _window = Window.Current.Bounds; 
     } 

     private void CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args) 
     { 
      args.Request.ApplicationCommands.Add(new SettingsCommand("help", "Help", Handler)); 
     } 

     private void Handler(IUICommand command) 
     { 
      _popUp = new Popup 
         { 
          Width = WIDTH, 
          Height = _window.Height, 
          IsLightDismissEnabled = true, 
          IsOpen = true 
         }; 
      _popUp.Closed += OnPopupClosed; 
      Window.Current.Activated += OnWindowActivated; 
      _popUp.Child = new Help_Settings {Width = WIDTH, Height = _window.Height}; 
      _popUp.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (_window.Width - WIDTH) : 0); 
      _popUp.SetValue(Canvas.TopProperty, 0); 
     } 

     private void OnWindowActivated(object sender, WindowActivatedEventArgs e) 
     { 
      if (e.WindowActivationState == CoreWindowActivationState.Deactivated) 
       _popUp.IsOpen = false; 
     } 

     private void OnPopupClosed(object sender, object e) 
     { 
      Window.Current.Activated -= OnWindowActivated; 
     } 
    } 
} 

而在JavaScript和HTML你在HTML創建：

<!doctype HTML> 
<html> 
<body> 
    <div style="border: 1px solid #AB00A5" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'help', width:'narrow'}"> 
     <div class="win-ui-dark win-header" style="background-color:#FF00F7"> 
      <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button> 
      <div class="win-label"> Help</div> 
      <img src="../images/icon.png" style="position: absolute; right: 40px; width:35px; height:35px"/> 
     </div> 
     <div class="win-content win-settings-section"> 
      <h3>Help!</h3> 
      <p> No help for you muahahaha</p> 
     </div> 
    </div> 
</body> 
</html> 

Function to register the settings pane: 

    (function() { 
    "use strict"; 
    WinJS.Application.onsettings = function (e) { 
     e.detail.applicationcommands = { 
      "about": { 
       title: "About", 
       href: "/html/settings_about.html" 
      }, 
      "help": { 
       title: "Help", 
       href: "/html/settings_help.html" 
      } 
     }; 
     WinJS.UI.SettingsFlyout.populateSettings(e); 
    }; 

    WinJS.Application.start(); 
})(); 

請記住以下幾點：

• 用一個字標籤的入口點
  • 最多4切入點推薦使用
  • 窄= 346像素
  • 寬= 646像素。
  • 高度與屏幕相同。
  • 標題：backbutton +入口點名稱+應用程序圖標，背景顏色與應用程序瓦片相同
  • Settingspanel邊框顏色應比標題顏色深20％，背景應爲白色。
  • 滾動OK，但最大高度的兩倍
  • 沒有按鈕導航命令或更改提交
  • 如果點擊入口點沒有直接的行動權限的命令是系統控制
  • 應符合進口動畫
  一個彈出窗口
  • 輕輕可取消應該是在同一側設置（使用SettingsEdgeLocation屬性）

Answer 2

這裏是什麼你需要SettingsPane類

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.applicationsettings.settingspane.aspx

Answer 3

最好的辦法可能是使用助手類從木衛四。