Settings charm opening problem

Question

I would like to create a settings charm item to display my app's privacy policy, but my custom panel doesn't show when my settings charm menu item pressed. Here is my code:

public GroupedItemsPage()
{
    this.InitializeComponent();
    Application.Current.Suspending += new SuspendingEventHandler(App_Suspending);

    //Recieve and handle the notification when user opens the settings charm
    Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView().CommandsRequested += GroupedItemsPage_CommandsRequested;
}

void GroupedItemsPage_CommandsRequested(Windows.UI.ApplicationSettings.SettingsPane sender, Windows.UI.ApplicationSettings.SettingsPaneCommandsRequestedEventArgs args)
{
    args.Request.ApplicationCommands.Clear();

    Windows.UI.ApplicationSettings.SettingsCommand privacyInfo = new Windows.UI.ApplicationSettings.SettingsCommand(
				"PrivacyInfo",
				"Privacy Policy",
				(uiCommand) => {
					showSettingsPanel();
    });
    args.Request.ApplicationCommands.Add(privacyInfo);
}

void showSettingsPanel()
{
    this.privacySettings.Margin = new Thickness(0);
}

private void LayoutRoot_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    if (this.privacySettings.Margin.Right == 0)
        this.privacySettings.Margin = new Thickness(0, 0, -346, 0);
    e.Handled = true;
}

And the XAML:

		<!-- PRIVACY SETTINGS -->
		<local:PrivacySettingsControl
			x:Name="privacySettings"
			HorizontalAlignment="Right"
			Margin="0,0,-346,0">
			<local:PrivacySettingsControl.Transitions>
				<TransitionCollection>
					<RepositionThemeTransition />
				</TransitionCollection>
			</local:PrivacySettingsControl.Transitions>
		</local:PrivacySettingsControl>
		<!-- /PRIVACY SETTINGS -->

(The PrivacySettingsControl is inside the LayoutRoot Grid.)

When I open the settings charm the 'Privacy Policy' is there, but when I click it, the default settings charm closes and my PrivacySettingsControl doesn't show, though the showSettingsPanel() function is getting called and the margin of PrivacySettingsControl is set to zero. When I change the LayoutRoot_PointerPressed to toggle the PrivacySettingsControl's margin property, the privacy panel shows.

Do you have any idea what could cause the problem?

Answer 1

When / where is LayoutRoot_PointerPressed fired?  I think this might be the issue.

There is a blog post here which looks like it does what you're trying to do.

Answer 2

I had a similar problem in my project. In my case i didn´t create the style for charmflyout and for charmFrame.

you should use this:

http://charmflyout.codeplex.com/

---

Sara Silva

Answer 3

I've already read that blog post. The  LayoutRoot_PointerPressed function is fired when I click the LayoutRoot grid. It is not getting fired when i click the Settings charm's Privacy Policy entry. Only the showSettingsPanel is getting called.

But I've made a discovery: my app has 3 pages: a Hub page, a Section page, and a Detail page. The issue I described above doesn't involve the Detail page, the settings charm entry works there. "Only" the Hub page and the Section page is problematic. The Hub page is designed to look like a panorama view in wp7, and the Section page has a SemanticZoom. Is it possible that the layout of these pages can cause the problem?

Here is the layout of my Section page:

<!-- LAYOUT -->
    <Grid Style="{StaticResource LayoutRootStyle}" Background="{StaticResource AppBackground}" VerticalAlignment="Stretch" x:Name="LayoutRoot" PointerPressed="LayoutRoot_PointerPressed">

		<Grid.ChildrenTransitions>
			<TransitionCollection>
				<ContentThemeTransition/>
			</TransitionCollection>
		</Grid.ChildrenTransitions>

		<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Stretch" VerticalContentAlignment="Center">
			<SemanticZoom.ZoomedOutView>
				<GridView Foreground="{x:Null}"
							Margin="0"
						    Width="auto"
						    Grid.Row="1"
						    SelectionMode="None"
						    IsItemClickEnabled="True"
						    ScrollViewer.IsHorizontalScrollChainingEnabled="True"
						    ItemTemplateSelector="{StaticResource SeriesTemplateSelector}"
							VerticalAlignment="Center"
						    x:Name="FullGridViewSeries">
					<GridView.ItemContainerStyle>
						<Style TargetType="GridViewItem">
							<Setter Property="Margin" Value="0,0,10,0"/>
							<Setter Property="Padding" Value="0"/>
							<Setter Property="HorizontalContentAlignment" Value="Center" />
							<Setter Property="VerticalContentAlignment" Value="Center" />
						</Style>
					</GridView.ItemContainerStyle>
					<GridView.ItemsPanel>
						<ItemsPanelTemplate>
							<WrapGrid ItemWidth="220" ItemHeight="540" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" />
						</ItemsPanelTemplate>
					</GridView.ItemsPanel>
				</GridView>
			</SemanticZoom.ZoomedOutView>
			
			<SemanticZoom.ZoomedInView>
				<GridView SelectionMode="None"
						  IsItemClickEnabled="True"
						  ItemClick="TaleItem_Click"
						  ItemTemplate="{StaticResource TalesItemTemplate}"
						  ItemsSource="{Binding Source={StaticResource GroupedTales}}"
						  IsSwipeEnabled="True"
						  x:Name="ZoomedInGridView"
						  VerticalAlignment="Center"
                          Margin="0,20,0,0">
					<GridView.ItemsPanel>
						<ItemsPanelTemplate>
							<StackPanel Orientation="Horizontal" Margin="55,10,0,10" />
						</ItemsPanelTemplate>
					</GridView.ItemsPanel>
					<GridView.GroupStyle>
						<GroupStyle HidesIfEmpty="True">
							<GroupStyle.HeaderTemplate>
								<DataTemplate>
                                    <TextBlock Text="{Binding Path=Key, Converter={StaticResource textToUpperConverter}}" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontFamily="Segoe UI Semibold" FontWeight="Bold" FontSize="88" />
								</DataTemplate>
							</GroupStyle.HeaderTemplate>
							<GroupStyle.ContainerStyle>
								<Style TargetType="GroupItem">
									<Setter Property="Template">
										<Setter.Value>
											<ControlTemplate TargetType="GroupItem">
												<StackPanel Orientation="Vertical">
													<ContentPresenter Content="{TemplateBinding Content}" />
													<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" />
												</StackPanel>
											</ControlTemplate>
										</Setter.Value>
									</Setter>
								</Style>
							</GroupStyle.ContainerStyle>
							<GroupStyle.Panel>
								<ItemsPanelTemplate>
									<StackPanel Orientation="Horizontal" />
								</ItemsPanelTemplate>
							</GroupStyle.Panel>
						</GroupStyle>
					</GridView.GroupStyle>
					<GridView.ItemContainerStyle>
						<Style TargetType="GridViewItem">
							<Setter Property="Margin" Value="0"/>
							<Setter Property="Padding" Value="10"/>
						</Style>
					</GridView.ItemContainerStyle>
				</GridView>
			</SemanticZoom.ZoomedInView>
		</SemanticZoom>

		<!-- PRIVACY SETTINGS -->
		<local:PrivacySettingsControl
			x:Name="privacySettings"
			HorizontalAlignment="Right"
			Margin="0,0,-646,0">
			<local:PrivacySettingsControl.Transitions>
				<TransitionCollection>
					<RepositionThemeTransition />
				</TransitionCollection>
			</local:PrivacySettingsControl.Transitions>
		</local:PrivacySettingsControl>
		<!-- /PRIVACY SETTINGS -->

		<!-- SNAP VIEW -->
		<Grid
            x:Name="SnapPanelSeries"
            AutomationProperties.AutomationId="SnapPanelSeriesItemGridView"
            AutomationProperties.Name="Grouped Items"
			HorizontalAlignment="Left"
            Visibility="Collapsed"
			Width="320"
            Background="{StaticResource AppBackground}">
			<Grid.RowDefinitions>
				<RowDefinition Height="120"/>
				<RowDefinition Height="*"/>
			</Grid.RowDefinitions>
			
				<TextBlock Margin="30,70,0,0" Grid.Row="0" TextWrapping="Wrap" Text="Tales" VerticalAlignment="Top" Width="280" FontSize="29.333" FontWeight="Bold" Foreground="White" HorizontalAlignment="Left" Height="35"/>
				<ListView Grid.Row="2"
						  Margin="30,0,0,0"
						  Width="260"
						  HorizontalAlignment="Left"
						  IsItemClickEnabled="True"
						  SelectionMode="None"
						  ScrollViewer.VerticalScrollBarVisibility="Auto"
						  ItemsSource="{Binding Source={StaticResource cvsSnapSource}}"
                          ItemClick="TaleItem_Click">
					<ListView.ItemContainerStyle>
						<Style TargetType="ListViewItem">
							<Setter Property="Margin" Value="0"/>
							<Setter Property="Padding" Value="0"/>
						</Style>
					</ListView.ItemContainerStyle>
					<ListView.ItemTemplate>
						<DataTemplate>
							<Grid  HorizontalAlignment="Left" VerticalAlignment="Top" Width="260" Height="60" Background="#FF197BA1">
								<TextBlock Grid.Column="1" Text="{Binding Name}" HorizontalAlignment="Left" Height="30" Margin="20,15,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="210" FontSize="20" LineHeight="10" />
							</Grid>
						</DataTemplate>
					</ListView.ItemTemplate>
				</ListView>
			<AppBar x:Name="SnapAppBar" Padding="10,0,10,0" VerticalAlignment="Bottom">
				<Grid>
					<StackPanel x:Name="SnapLeftCommands" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
						<Button x:Name="SnapAppBtn01" AutomationProperties.Name="Label" Style="{StaticResource AppBarButtonStyle}" HorizontalAlignment="Left"/>
						<Button x:Name="SnapAppBtn02" AutomationProperties.Name="Label" Style="{StaticResource AppBarButtonStyle}" HorizontalAlignment="Left"/>
						<Button x:Name="SnapAppBtn03" AutomationProperties.Name="Label" Style="{StaticResource AppBarButtonStyle}" HorizontalAlignment="Left"/>
					</StackPanel>
				</Grid>
			</AppBar>
		</Grid>
		
        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"></VisualState>
                <VisualState x:Name="Filled"></VisualState>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait" />
                    
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapPanelSeries" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FullGridViewSeries" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ZoomedInGridView" Storyboard.TargetProperty="Visibility">
							<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
						</ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>

Answer 4

What is happen to you is the same that i had! One more time, you should use

http://charmflyout.codeplex.com/

See the example that is changed the frame in app.xaml.cs.

In source code they have 2 samples:

- using only one charmflyout

- using a charmFrame that contains a control with charmflyouts (is this case that you need to use!!)

Note: Don´t forgot the style for charmflyout and for charmFrame.

---

Sara Silva

Answer 5

Thank you, it solved the problem.