locked
How to add help to windows store app RRS feed

  • Question

  • I'm trying to add Help into Settings charm using SettingsFlyout, but I still use VS 2012 not VS 2013. So the sample in Dev center is no good because it uses VS 2013,

    I think SettingsFlyout is not available in VS 2012 because I get an error.

    Can anyone point me to a sample to add Help in VS 2012.

    Thanks

    Friday, December 13, 2013 3:58 AM

Answers

  • Search for 'Callisto'. It's an add-on that replicates the settings flyout for Windows 8.0 (among other things). I have used it in several apps.

    I'm a self-taught noob amateur. Please take this into account when responding to my posts or when taking advice from me.

    • Marked as answer by Anne Jing Thursday, December 19, 2013 1:37 AM
    Friday, December 13, 2013 5:54 AM
  • If you don't want to go with 3rd party solution try my code to create Setting flyout.

    In App.xaml.cs

    public App()
    {
    	this.InitializeComponent();
    	this.Suspending += OnSuspending;
    	_window = Window.Current.Bounds;
    	Window.Current.SizeChanged += OnWindowSizeChanged;
    	SettingsPane.GetForCurrentView().CommandsRequested += CommandsRequested;
    }
    
    private Rect _window;
    private Popup _popUp;
    private const double WIDTH_WIDE = 646;
    private const double WIDTH_NARROW = 346;
    
    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", "Large Setting", Handler));
    	args.Request.ApplicationCommands.Add(new SettingsCommand("help", "Small Setting", Handler1));
    }
    
    private void Handler(IUICommand command)
    {
    	_popUp = new Popup
    	{
    		Width = WIDTH_WIDE,
    		Height = _window.Height,
    		IsLightDismissEnabled = true,
    		IsOpen = true
    	};
    	_popUp.Closed += OnPopupClosed;
    	Window.Current.Activated += OnWindowActivated;
    	_popUp.Child = new HelpSettings { Width = WIDTH_WIDE, Height = _window.Height };
    	_popUp.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (_window.Width - WIDTH_WIDE) : 0);
    	_popUp.SetValue(Canvas.TopProperty, 0);
    }
    
    private void Handler1(IUICommand command)
    {
    	_popUp = new Popup
    	{
    		Width = WIDTH_NARROW,
    		Height = _window.Height,
    		IsLightDismissEnabled = true,
    		IsOpen = true
    	};
    	_popUp.Closed += OnPopupClosed;
    	Window.Current.Activated += OnWindowActivated;
    	_popUp.Child = new HelpSettings { Width = WIDTH_NARROW, Height = _window.Height };
    	_popUp.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (_window.Width - WIDTH_NARROW) : 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;
    }

    Create usercontrol called HelpSettings and add below given content, also change according to your requirement.

    <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>

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

    • Marked as answer by Anne Jing Thursday, December 19, 2013 1:37 AM
    Friday, December 13, 2013 10:20 AM

All replies

  • Search for 'Callisto'. It's an add-on that replicates the settings flyout for Windows 8.0 (among other things). I have used it in several apps.

    I'm a self-taught noob amateur. Please take this into account when responding to my posts or when taking advice from me.

    • Marked as answer by Anne Jing Thursday, December 19, 2013 1:37 AM
    Friday, December 13, 2013 5:54 AM
  • If you don't want to go with 3rd party solution try my code to create Setting flyout.

    In App.xaml.cs

    public App()
    {
    	this.InitializeComponent();
    	this.Suspending += OnSuspending;
    	_window = Window.Current.Bounds;
    	Window.Current.SizeChanged += OnWindowSizeChanged;
    	SettingsPane.GetForCurrentView().CommandsRequested += CommandsRequested;
    }
    
    private Rect _window;
    private Popup _popUp;
    private const double WIDTH_WIDE = 646;
    private const double WIDTH_NARROW = 346;
    
    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", "Large Setting", Handler));
    	args.Request.ApplicationCommands.Add(new SettingsCommand("help", "Small Setting", Handler1));
    }
    
    private void Handler(IUICommand command)
    {
    	_popUp = new Popup
    	{
    		Width = WIDTH_WIDE,
    		Height = _window.Height,
    		IsLightDismissEnabled = true,
    		IsOpen = true
    	};
    	_popUp.Closed += OnPopupClosed;
    	Window.Current.Activated += OnWindowActivated;
    	_popUp.Child = new HelpSettings { Width = WIDTH_WIDE, Height = _window.Height };
    	_popUp.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (_window.Width - WIDTH_WIDE) : 0);
    	_popUp.SetValue(Canvas.TopProperty, 0);
    }
    
    private void Handler1(IUICommand command)
    {
    	_popUp = new Popup
    	{
    		Width = WIDTH_NARROW,
    		Height = _window.Height,
    		IsLightDismissEnabled = true,
    		IsOpen = true
    	};
    	_popUp.Closed += OnPopupClosed;
    	Window.Current.Activated += OnWindowActivated;
    	_popUp.Child = new HelpSettings { Width = WIDTH_NARROW, Height = _window.Height };
    	_popUp.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (_window.Width - WIDTH_NARROW) : 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;
    }

    Create usercontrol called HelpSettings and add below given content, also change according to your requirement.

    <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>

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

    • Marked as answer by Anne Jing Thursday, December 19, 2013 1:37 AM
    Friday, December 13, 2013 10:20 AM
  • Thanks for the suggestion

    I used the custom code instead of Callisto because I like to learn things by coding.

    The only other thing I had to do to get it work is that I had to have OnWindowsCreated Event to add the lines in App() constructor

    _window = Window.Current.Bounds;
    Window.Current.SizeChanged += OnWindowSizeChanged;
    SettingsPane.GetForCurrentView().CommandsRequested += CommandsRequested;

    Setting the _window and calling the GetForCurrentView() were failing when they were in App Constructor as suggested. Otherwise it is a pretty good suggestion to get the Settings Flyout

    Saturday, December 21, 2013 5:09 PM