We Keep Coding

C# UWP: The parameter is incorrect - NavigationView

I'm building a UWP in C# with Visual Studio, and need to hide and show a NavigationView, named 'navigationView' as required.
I am using the property .IsPaneVisible to achieve this, but am encountering a strange bug:
I can set IsPaneVisible = true or false in the xaml document, but if I set navigationView.IsPaneVisible = false; in the related C# document, and run a debug build of the app from Visual Studio, the app crashes with the error
System.ArgumentException: 'The parameter is incorrect.
Even stranger, if I run the same debug build, but launched directly, outside Visual Studio, the app functions normally without crashing at this line.
Does anyone have an idea of why this might be happening or how I could fix it?
Here's the xaml code:
<Page
x:Class="Sheet_Music_Reader.Views.ShellPage"
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"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:behaviors="using:Sheet_Music_Reader.Behaviors"
xmlns:winui="using:Microsoft.UI.Xaml.Controls"
xmlns:helpers="using:Sheet_Music_Reader.Helpers"
xmlns:views="using:Sheet_Music_Reader.Views"
Loaded="OnLoaded"
mc:Ignorable="d">
<Page.Resources>
<!--This top margin is the height of the custom TitleBar-->
<Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
<Thickness x:Key="NavigationViewContentGridBorderThickness">0</Thickness>
<SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent"></SolidColorBrush>
</Page.Resources>
<Grid>
<Border x:Name="AppTitleBar"
IsHitTestVisible="True"
VerticalAlignment="Top"
Background="Transparent"
Height="40"
Canvas.ZIndex="1"
Margin="48,8,0,0">
<StackPanel Orientation="Horizontal">
<Image x:Name="AppFontIcon"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Source="Assets/Square44x44Logo.png"
Width="16"
Height="16"/>
<TextBlock x:Name="AppTitle"
Text="enScore"
VerticalAlignment="Center"
Margin="12,0,0,0"
Style="{ThemeResource CaptionTextBlockStyle}"/>
</StackPanel>
</Border>
<winui:NavigationView
IsBackButtonVisible="Visible"
IsBackEnabled="{x:Bind IsBackEnabled, Mode=OneWay}"
SelectedItem="{x:Bind Selected, Mode=OneWay}"
ItemInvoked="OnItemInvoked"
IsSettingsVisible="True"
IsTitleBarAutoPaddingEnabled="False"
DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
Canvas.ZIndex="0"
x:Name="navigationView">
<winui:NavigationView.MenuItems>
<winui:NavigationViewItem x:Uid="Shell_Main" Icon="Copy" helpers:NavHelper.NavigateTo="views:MainPage" />
</winui:NavigationView.MenuItems>
<i:Interaction.Behaviors>
<behaviors:NavigationViewHeaderBehavior
DefaultHeader="{x:Bind Selected.Content, Mode=OneWay}">
<behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
<DataTemplate>
<Grid x:Name="headerGrid">
<TextBlock
Text="{Binding}"
Style="{ThemeResource TitleTextBlockStyle}"
Margin="{StaticResource SmallLeftRightMargin}" />
<Button Style="{ThemeResource ButtonRevealStyle}" Content="Refresh Library Contents" HorizontalAlignment="Right" Margin="0,45,8,0" Click="RefreshLibrary"/>
<Button Style="{ThemeResource ButtonRevealStyle}" Content="Import PDF To Current Folder" HorizontalAlignment="Right" Margin="0,-35,140,0" Click="AddScore"/>
<Button Style="{ThemeResource ButtonRevealStyle}" Content="Add New Folder" HorizontalAlignment="Right" Margin="0,-35,8,0" Click="AddFolderAsync"/>
<ToggleButton Style="{ThemeResource ToggleButtonRevealStyle}" x:FieldModifier="public" x:Name="tbtndelete" Content="Delete Items" HorizontalAlignment="Right" Margin="0,45,191,0" Tapped="DeleteItem"/>
</Grid>
</DataTemplate>
</behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
</behaviors:NavigationViewHeaderBehavior>
</i:Interaction.Behaviors>
<Grid>
<Frame x:Name="shellFrame" />
</Grid>
</winui:NavigationView>
</Grid>
</Page>

Try to change the placement of the menu with:
PaneDisplayMode="Top"
For my case with Microsoft.UI.Xaml.Controls for Microsoft.WindowsAppSDK v1.0.0.
the showing/hidding of menu bar works fine.
Left, LeftMinimal, LeftCompact crashes the app.
I know you may expect the menu on the left, but still on the top is not that bad idea ;-) At least it works.. Greetz.

Binding visibility of usercontrol does not collapse control

i do have a problem with binding the visibility of my usercontrol.
The binding to a Dependency Property of type Visibility works fine and the correct value (in this case Collapsed) is held by the DP. The content of my Grid within the UserControl is set to collapsed, but the hole control doesnt collapse. It still keeps the space occupied defined by with and heigth, as referenced in the xaml.
EDIT: i found out, that the problem is that i set width and height in the xaml where i reference my usercontrol. if i don't do this, the control collapses correct (therefore binding works fine). But i need to set width and heigth in case the usercontrol is visible.
Any idea how i can solve this problem?
<my:MenuButtonBase x:Class="bxSuite.Controls.MenuButtonLarge"
xmlns:my="clr-namespace:bxSuite.Controls"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
Background="Black"
>
<Grid Visibility="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, Path=ButtonVisibility}" >
<StackPanel>
<Image Source="{Binding ButtonImageSource}" Margin="5,10,5,5" Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Center" />
<TextBlock Text="{Binding FunctionHeader}" Foreground="White" TextWrapping="Wrap" TextAlignment="Center" Padding="5,5,5,5" FontSize="12" />
</StackPanel>
</Grid>
</my:MenuButtonBase>
In XAML i reference my usercontrol like this (where the Converter produces the visibility-state correctly):
<my:MenuButtonLarge Name="btnInEuqipment" ButtonVisibility="{Binding Path=User, Converter={StaticResource ConverterUserRightVisibility}, ConverterParameter=5}" VerticalAlignment="Top" FunctionHeader="{lex:Loc Key=MenuButton_InEquipment}" Width="130" ButtonImageSource="/bxSuite.RolloutManager;component/Images/inequipment_48x48.png" BackgroundEnabled="#FF0694FD" BackgroundHover="#FF0072C6" MenuButtonClick="btnInEuqipment_MenuButtonClick" Height="95" Margin="5,10,0,0" />

Try set the visibility of the user control instead of the grid, should work.
Your code should be like this.
<my:MenuButtonBase x:Class="bxSuite.Controls.MenuButtonLarge"
xmlns:my="clr-namespace:bxSuite.Controls"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
Visibility="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, Path=ButtonVisibility}"
Background="Black">
<Grid>
<StackPanel>
<Image Source="{Binding ButtonImageSource}"
Margin="5,10,5,5"
Width="48"
Height="48"
VerticalAlignment="Top"
HorizontalAlignment="Center" />
<TextBlock Text="{Binding FunctionHeader}"
Foreground="White"
TextWrapping="Wrap"
TextAlignment="Center"
Padding="5,5,5,5"
FontSize="12" />
</StackPanel>
</Grid>
Dont forget to update the RelativeSource of your bind.

MvvmCross Popup Window

I would like to have a popup window. Even though I am using MvvmCross, it will strictly run on Android. In Windows Store, you can do the following with xaml:
<Popup VerticalOffset="300" HorizontalOffset="200" x:Name="SigPopup" >
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="1">
<StackPanel>
<StackPanel Orientation="Horizontal" >
<Button x:Name="btnAccept" Content="Accept" Click="btnAccept_Click"/>
<Button x:Name="btnCancel" Grid.Column="1" Content="Cancel" Click="btnCancel_Click"/>
<TextBlock x:Name="txtSigner" Text="Shipper" Style="{StaticResource SubheaderTextBlockStyle}" Margin="25,3,0,0" />
</StackPanel>
<!-- Inking area -->
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="750" Height="175">
<Grid x:Name="inkPanel" Margin="5">
<!-- Inking area -->
<Canvas x:Name="InkCanvas" Background="White" Margin="5" />
</Grid>
</Border>
</StackPanel>
</Border>
</Popup>
You can use this to popup a window to collect a Signature. There is an accept and cancel button you can wire up accordingly. Is there any way to do this using MvvmCross? I have watched the ViewModel demo and saw where you could draw rectangles and put data in them and it was bound, but it didn't show how to make them go away once you were done. I had this vision of being able to popup some sort of child ViewModel with a SignatureWidget in it and collect a signature then close the popup. Can this be done using MvvmCross?

there is a Xamarin Component available.
Is this something that fits your need?
http://components.xamarin.com/view/signature-pad
Regards,
Benjamin

Can a DataTemplate be placed inside another DataTemplate of different Template Structure?

I want a DataTemplate for ListBox having the ItemsSource as Collection of Borders. Inside each Border i want to display another ListBox containg set of some items having its own ItemsSource.
But, when i try to acheive this structure i am not able to populate any data.
My XAML code -
<Grid x:Name="RightPanel" Grid.Column="2" Background="Beige">
<Border BorderBrush="Black" Margin="4" BorderThickness="1.5">
<ScrollViewer Margin="2" Focusable="False">
<ListBox x:Name="MainRightListBox" ItemsSource="{Binding ListBoxCollection,Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBox x:Name="ChildListBox" ItemsSource="{Binding CurrentPage.ClonedVectorImages,Mode=TwoWay}" SelectedItem="{Binding ImageVectorSelected}" BorderBrush="Transparent" Background="Transparent">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="canvas" Background="Transparent" Orientation="Horizontal" Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}, Mode=FindAncestor}}">
<StackPanel.ContextMenu>
<ContextMenu>
<MenuItem Header="Delete" CommandParameter="{Binding}"
Command="{Binding PlacementTarget.Tag.DataContext.DeleteCloneCommand, RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}, Mode=FindAncestor}}"/>
</ContextMenu>
</StackPanel.ContextMenu>
<Viewbox Width="35" Height="35" >
<Canvas Width="35" Height="35">
<Canvas>
<Path Fill="#ffda2526" Data="F1 M 0.000,112.500 C 0.000,50.369 50.368,0.000 112.500,0.000 C 174.632,0.000 225.000,50.369 225.000,112.500 C 225.000,174.633 174.632,225.000 112.500,225.000 C 50.368,225.000 0.000,174.633 0.000,112.500 Z" Height="30.667" Stretch="Fill" Width="31"/>
<TextBlock x:Name="tb1" Text="{Binding CountId}" Foreground="WhiteSmoke" FontSize="20" FontFamily="Arial Bold" Height="20" RenderTransformOrigin="1.588,1.224" Canvas.Left="9.322" Canvas.Top="3.335"></TextBlock>
</Canvas>
</Canvas>
</Viewbox>
<TextBox Text="Enter Text Here" Height="20" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Border>
</Grid>

"Can a DataTemplate be placed inside another DataTemplate of different Template Structure?"
The answer is yes, it can. Your XAML structure is fine.
But what possibly wrong is binding path/expression used. You need to be aware that DataContext of the inner ListBox (the one inside DataTemplate) is corresponding item in ListBoxCollection. So if that item mentioned before has property CurrentPage.ClonedVectorImages, this way of binding should work fine to populate the inner ListBox :
<ListBox x:Name="ChildListBox"
ItemsSource="{Binding CurrentPage.ClonedVectorImages,Mode=TwoWay}"
........>

You need to put DataTemplates in resources with the corresponding keys, because otherwise an exception may occur:
Markup.IStyle.Connector.Connect error
This is bug of studio, which is described as follows link:
A good way to look at this problem “Templating is like parentheses, quoting parentheses” the Template XAML is not created but saved and run later. The bug is therefore: We have a problem with nested parentheses.
In any case as I think, should be avoided nesting templates and use him via resources, it will be easier and clearer.

How do you bind Commands to jump lists LongListSelector in MVVM

I have the following xaml which is bound to a command... but I have no idea how I can pass information to the command to know which item was tapped:
<DataTemplate x:Key="OrganisationsItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button ... Command = "{Binding LoadPage}">
<Grid Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="Transparent">
<Border Background="White" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Center" Background="Transparent">
<TextBlock Text="{Binding name}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" />
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
These items in the jump list will hopefully open a new xaml page up which will show details specific to the item I chose. for example if I select Coca Cola as the organisation, it should then show the Detail.xaml which will list details on the Coca Cola organisation (fetched by the organisation ID).
If you recommend me using a hyperlinkbutton instead, do you have an example, If I put one in, I get the following error:
+ ExceptionObject {System.ArgumentException: Value does not fall within the expected range.} System.Exception {System.ArgumentException}
I assume that this is because I am nesting other elements within it... which, is kinda.. what I need to do?

You should pass a CommandParameter to your Command and give it the relevant object.
<Button Command="{Binding LoadPage}" CommandParameter={Binding ElementName=ParentItem Path=DataContext}">