I have an app with a main page called OPMain where I was previously displaying data inside of 3 Pickers just fine. I ended up realizing that the screen was getting quite cluttered and decided that it would be best to move this into a Flyout sidebar. Once I've moved it, the data is no longer being displayed in the Pickers at all.
Previous Working Code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="OrderProMobile.Views.OPMain"
xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
ios:Page.UseSafeArea="true"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:viewmodels="clr-namespace:OrderProMobile.ViewModels"
xmlns:model="clr-namespace:OrderProMobile.Models"
xmlns:enums="clr-namespace:OrderProMobile.Models.Enums"
x:DataType="viewmodels:OPMainViewModel">
<Grid BackgroundColor="{AppThemeBinding Light={StaticResource LightBackground}, Dark={StaticResource DarkBackground}}" RowDefinitions="Auto, *" ColumnDefinitions="*">
<!-- Top header grid for accounts and searching -->
<Grid x:Name="SearchGrid" Grid.Row="0" RowDefinitions="Auto, Auto, Auto, Auto" ColumnDefinitions="*"
BackgroundColor="{StaticResource Primary}">
<Grid Grid.Row="0" ColumnDefinitions="*, *, *" Margin="5,5,0,0" VerticalOptions="Center">
<Label HorizontalOptions="Start" TextColor="White" Grid.Column="0">Account:</Label>
<Label HorizontalOptions="Start" TextColor="White" Grid.Column="1">Category:</Label>
<Label HorizontalOptions="Start" TextColor="White" Grid.Column="2">Subcategory:</Label>
</Grid>
<Grid Grid.Row="1" ColumnDefinitions="*, *, *" VerticalOptions="Center">
<Border Stroke="Black" Background="White" StrokeThickness="2" Grid.Column="0">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10,10,10,10"/>
</Border.StrokeShape>
<Picker TextColor="Black" Grid.Column="0" Margin="5,0,0,0" HorizontalTextAlignment="Start" ios:Picker.UpdateMode="WhenFinished" x:Name="CustomerPicker" ItemsSource="{Binding OrderGuideHeaders}" SelectedIndex="{Binding SelectedOrderGuideIndex, Mode=TwoWay}" Title="Select an Account" ItemDisplayBinding="{Binding CustomerName}" VerticalOptions="Center"/>
</Border>
<Border Stroke="Black" Background="White" StrokeThickness="2" Grid.Column="1">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10,10,10,10"/>
</Border.StrokeShape>
<Picker TextColor="Black" Margin="5,0,0,0" HorizontalTextAlignment="Start" ios:Picker.UpdateMode="WhenFinished" Grid.Column="1" x:Name="CategoryPicker" IsEnabled="{Binding CustomerSelected}" ItemsSource="{Binding Categories}" SelectedIndex="{Binding SelectedCategoryIndex, Mode=TwoWay}" Title="Select a Category" VerticalOptions="Center" ItemDisplayBinding="{Binding CategoryDescription}"/>
</Border>
<Border Stroke="Black" Background="White" StrokeThickness="2" Grid.Column="2" HorizontalOptions="CenterAndExpand">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10,10,10,10"/>
</Border.StrokeShape>
<Picker TextColor="Black" Margin="5,0,0,0" HorizontalTextAlignment="Start" ios:Picker.UpdateMode="WhenFinished" x:Name="SubcategoryPicker" IsEnabled="{Binding CustomerSelected}" ItemsSource="{Binding SubCategories}" SelectedIndex="{Binding SelectedSubcategoryIndex, Mode=TwoWay}" Title="Select a Subcategory" VerticalOptions="Center" ItemDisplayBinding="{Binding SubcategoryDescription}"/>
</Border>
</Grid>
</Grid>
</Grid>
</ContentPage>
Inside of OPMainViewModel.cs, I have the values that fill each of the Pickers that I retrieved from
[QueryProperty(nameof(OrderGuideHeaders), "OrderGuideHeaders")]
[QueryProperty(nameof(SelectedOrderGuideIndex), "SelectedOrderGuideIndex")]
and then also from methods inside of the class.
I moved this into the AppShell.xaml file so that I could use it in the sidebar instead.
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="OrderProMobile.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:OrderProMobile.Views"
xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:viewmodels="clr-namespace:OrderProMobile.ViewModels"
xmlns:model="clr-namespace:OrderProMobile.Models"
xmlns:enums="clr-namespace:OrderProMobile.Models.Enums"
x:DataType="viewmodels:OPMainViewModel"
Shell.FlyoutBehavior="Flyout">
<Shell.FlyoutContent>
<VerticalStackLayout BackgroundColor="{StaticResource Primary}">
<ImageButton Source="gear.png" HorizontalOptions="Start" HeightRequest="30" Margin="0,10,0,0" Clicked="HandleSettings"/>
<Image Source="newlogo.png" Margin="0,-50,0,-25"/>
<Label HorizontalOptions="Start" TextColor="White" Margin="5,0,0,0">Account:</Label>
<Border Stroke="Black" Background="White" StrokeThickness="2">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10,10,10,10"/>
</Border.StrokeShape>
<Picker TextColor="Black" Margin="5,0,0,0" HorizontalTextAlignment="Start" ios:Picker.UpdateMode="WhenFinished" x:Name="CustomerPicker" ItemsSource="{Binding OrderGuideHeaders}" SelectedIndex="{Binding SelectedOrderGuideIndex, Mode=TwoWay}" Title="Select an Account" ItemDisplayBinding="{Binding CustomerName}" VerticalOptions="Center"/>
</Border>
<Label HorizontalOptions="Start" TextColor="White" Margin="5,0,0,0">Order:</Label>
<Border Stroke="Black" Background="White" StrokeThickness="2">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10,10,10,10"/>
</Border.StrokeShape>
<Picker TextColor="Black" Margin="5,0,0,0" HorizontalTextAlignment="Start" ios:Picker.UpdateMode="WhenFinished" x:Name="OrderPicker" ItemsSource="{Binding OrderGuideHeaders}" SelectedIndex="{Binding SelectedOrderGuideIndex, Mode=TwoWay}" Title="Select an Order" ItemDisplayBinding="{Binding CustomerName}" VerticalOptions="Center"/>
</Border>
<Label HorizontalOptions="Start" TextColor="White" Margin="5,0,0,0">Category:</Label>
<Border Stroke="Black" Background="White" StrokeThickness="2">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10,10,10,10"/>
</Border.StrokeShape>
<Picker TextColor="Black" Margin="5,0,0,0" HorizontalTextAlignment="Start" ios:Picker.UpdateMode="WhenFinished" x:Name="CategoryPicker" IsEnabled="{Binding CustomerSelected}" ItemsSource="{Binding Categories}" SelectedIndex="{Binding SelectedCategoryIndex, Mode=TwoWay}" Title="Select a Category" VerticalOptions="Center" ItemDisplayBinding="{Binding CategoryDescription}"/>
</Border>
<Label HorizontalOptions="Start" TextColor="White" Margin="5,0,0,0">Subcategory:</Label>
<Border Stroke="Black" Background="White" StrokeThickness="2" Margin="0,0,0,15">
<Border.StrokeShape>
<RoundRectangle CornerRadius="10,10,10,10"/>
</Border.StrokeShape>
<Picker TextColor="Black" Margin="5,0,0,0" HorizontalTextAlignment="Start" ios:Picker.UpdateMode="WhenFinished" x:Name="SubcategoryPicker" IsEnabled="{Binding CustomerSelected}" ItemsSource="{Binding SubCategories}" SelectedIndex="{Binding SelectedSubcategoryIndex, Mode=TwoWay}" Title="Select a Subcategory" VerticalOptions="Center" ItemDisplayBinding="{Binding SubcategoryDescription}"/>
</Border>
</VerticalStackLayout>
</Shell.FlyoutContent>
</Shell>
In the Shell properties, I've added the viewmodels and DataType from OPMain.xaml that link to OPMainViewModel where the values are being grabbed from. The Pickers show up but when I click on them, they are completely empty. I am not getting any errors, it's just blank and I am not sure why.
We are in the process of upgrading to .NET 7 from .NET 6, but I don't think that is going to solve my problem.
