Sample Callisto Settings Flyout in VB

Question

Does anyone have a sample for adding a Callisto settingsflyout in VB? There are several samples in CS but I can't seem to make sense of them in a VB mode. I want to add one toggle switch and save it for my app to reference. I am using VB and XAML.

Answer 1

This is what I use in my App.XAML.VB:

Private Sub addSettingsScenarioAdd()

    AddHandler SettingsPane.GetForCurrentView.CommandsRequested, AddressOf onCommandsRequested

End Sub

Private Sub onSettingsCommand(command As IUICommand)
    Dim settingsCommand As SettingsCommand = DirectCast(command, SettingsCommand)
    Dim rootFrame As Frame = Window.Current.Content
    rootFrame.Navigate(GetType(Page1))

End Sub

Private Sub onCommandsRequested(sender As SettingsPane, args As SettingsPaneCommandsRequestedEventArgs)
    Dim handler1 As New UICommandInvokedHandler(AddressOf onSettingsCommand)

    Dim about = New SettingsCommand("about", "About", Sub(handler)
                                                          Dim aboutpane = New SettingsFlyout()


                                                          aboutpane.Content = New AboutPanel()
                                                          aboutpane.IsOpen = True
                                                          aboutpane.HeaderText = "About"
                                                          aboutpane.Background = New SolidColorBrush(Colors.White)
                                                          UserSettings.Values("isAboutOpen") = "yes"
                                                      End Sub)
    args.Request.ApplicationCommands.Add(about)
End Sub

And then use the SettingsFlyout controls to collect and store settings (e.g. you could store in isolated storage or setup properties in your App.XAML.VB that can be changed from your flyout controls.

That should get you started (you obviously also need to create the controls for the flyouts, which just need to be usercontrols that are the right size/shape on the page. Here is an example of my 'aboutpanel' control:

<UserControl
x:Class="ThisApp.AboutPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FootballHub"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="480" Width="260" ManipulationMode="None">

<StackPanel >
    <Grid Background="White" Margin="0,0,0,0" ManipulationMode="None">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="250"/>
        </Grid.RowDefinitions>
        <TextBlock x:Name="VersionAndPublisherText" HorizontalAlignment="Left" Margin="10,0,0,0" Foreground="{StaticResource MainColour}" TextWrapping="Wrap"  VerticalAlignment="Top" Height="40" Width="240" FontSize="12" Grid.Row="1" Text="Textblock" />
        <TextBlock x:Name="SupportHeadingText" Grid.Row="2" FontFamily="Global User Interface" FontSize="14" FontWeight="Bold" Foreground="Black" Margin="10,0" Text="Textblock" VerticalAlignment="Bottom" />
        <TextBlock x:Name="SupportText" Grid.Row="3" FontFamily="Global User Interface" FontSize="12" Foreground="#FF045DF6" HorizontalAlignment="Right" Width="240" Margin="0,0,10,0" Height="50" VerticalAlignment="Top" Text="Textblock" TextWrapping="Wrap" FontStyle="Italic" />
        <TextBlock x:Name="MainHeadingText" HorizontalAlignment="Left" Margin="10,0,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Bottom" Width="240" FontWeight="Bold" FontFamily="Global User Interface" Foreground="Black" FontSize="14"/>
        <TextBlock x:Name="PrivacyHeadingText" Grid.Row="4" FontFamily="Global User Interface" FontSize="14" FontWeight="Bold" Foreground="Black" Margin="10,0" Text="Textblock" VerticalAlignment="Bottom" />
        <TextBlock x:Name="PrivacyText" Grid.Row="5" FontFamily="Global User Interface" FontSize="12" Foreground="{StaticResource MainColour}" HorizontalAlignment="Right" Width="240" Margin="0,0,10,0" Height="211" VerticalAlignment="Top" Text="Textblock" TextWrapping="Wrap" />
    </Grid>
</StackPanel>

Add your buttons and options, etc. to that.

I also use handlers to detect when my panels are opening/closing so I can apply settings, etc.:

    AddHandler Me.Unloaded, AddressOf closing_AboutPanel
    AddHandler Me.Loaded, AddressOf opening_AboutPanel

That should cover most of it. When adding code to your panels you can just treat them like any other page or control in terms of getting input and storing settings.