compile binding help

Eduardo Gomez Romero 1,235

So I am trying to follow the docs

<HorizontalStackLayout BindingContext="{x:Reference slider}" x:DataType="Slider">
    <Label Text="{Binding Value}" />
    <Label Text="{Binding Text, Source={x:Reference entry}, x:DataType=Entry}" />
</HorizontalStackLayout>

I have this page

xmlns:vm="clr-namespace:METROWIND.ViewModel"
x:Name="stationsMapPage"
x:DataType="vm:ChargingStationsMapPageViewModel">

<Grid x:DataType="vm:ChargingStationsMapPageViewModel">
    <Border
        x:Name="MobileContent"
        Style="{x:StaticResource ChargeStationBorderStyle}">
        <expander:SfExpander
            AnimationDuration="200"
            IsExpanded="{x:Binding IsExpanded}">
            <expander:SfExpander.Header>
                <Grid RowDefinitions="48">
                    <Label Style="{x:StaticResource ChooseStationLabelStyle}" />
                </Grid>
            </expander:SfExpander.Header>
            <expander:SfExpander.Content>
                <Grid
                    Padding="10,0,0,0"
                    RowDefinitions="Auto">
                    <CollectionView ItemsSource="{x:Binding TurbinePins}">
                        <CollectionView.ItemTemplate>
                            <DataTemplate x:DataType="model:TurbinePin">
                                <Border Stroke="Transparent">
                                    <HorizontalStackLayout Spacing="10">
                                        <Label Style="{x:StaticResource ElectricBoltLabelStyle}" />
                                        <Label
                                            Style="{x:StaticResource AddressLabelStyle}"
                                            Text="{x:Binding Turbine.Name}" />
                                    </HorizontalStackLayout>
                                    <Border.Behaviors>
                                        <mct:TouchBehavior
                                            DefaultBackgroundColor="White"
                                            PressedBackgroundColor="CornflowerBlue" />
                                    </Border.Behaviors>
                                    <Border.GestureRecognizers>
                                        <TapGestureRecognizer
                                            Command="{x:Binding Source={x:Reference stationsMapPage},
                                                                Path=BindingContext.ItemSelectedCommand}"
                                            CommandParameter="{x:Binding Turbine}" />
                                    </Border.GestureRecognizers>

                                </Border>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                </Grid>
            </expander:SfExpander.Content>
        </expander:SfExpander>
    </Border>

    <maps:Map
        x:Name="ChargingStationMap"
        ItemsSource="{x:Binding TurbinePins}"
        VerticalOptions="FillAndExpand">
        <maps:Map.ItemTemplate>
            <DataTemplate x:DataType="model:TurbinePin">
                <controls:CustomMapPin
                    Address="{x:Binding Turbine.Address}"
                    Images="{x:Binding Turbine.ImagesURLs}"
                    Label="{x:Binding Turbine.Name}"
                    Location="{x:Binding Turbine.Location}"
                    MarkerClickedCommand="{x:Binding PinClickedCommand}"
                    MarkerClickedCommandParameter="{x:Binding}" />
            </DataTemplate>
        </maps:Map.ItemTemplate>
    </maps:Map>

    <Button
        x:Name="mapLayers"
        Command="{x:Binding OpenMapLayerOptionsCommand}"
        Style="{x:StaticResource MapButtonStyle}">
        <Button.ImageSource>
            <FontImageSource
                FontFamily="ma"
                Glyph="{x:Static constant:MaterialFonts.Layers}" />
        </Button.ImageSource>
    </Button>

    <popup:SfPopup
        WidthRequest="{Binding Source={x:Reference mapLayers}, Path=Width}"
        x:Name="MapChangeTypuPopUp"
        RelativeView="{x:Reference mapLayers}"
        Style="{x:StaticResource ChargeStationPopupStyle}">
        <popup:SfPopup.PopupStyle>
            <popup:PopupStyle CornerRadius="8" />
        </popup:SfPopup.PopupStyle>
        <popup:SfPopup.ContentTemplate>
            <DataTemplate>
                <VerticalStackLayout Spacing="10">
                    <VerticalStackLayout BindableLayout.ItemsSource="{x:Binding MapTypeButtons}">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate x:DataType="model:MapTypeButton">
                                <controls:CustomImageButton
                                    BorderColor="{Binding SelectedColor}"
                                    Caption="{Binding Caption}"
                                    ClickCommand="{x:Binding ChangeMapTypeCommand,
                                                             Source={x:RelativeSource AncestorType={x:Type vm:ChargingStationsMapPageViewModel}}}"
                                    ImageName="{Binding ImageName}"
                                    MapNumber="{x:Binding MapNumber}"
                                    Parameter="{Binding}" />
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </VerticalStackLayout>
                </VerticalStackLayout>
            </DataTemplate>
        </popup:SfPopup.ContentTemplate>
    </popup:SfPopup>
</Grid>

and the vm

 public partial class ChargingStationsMapPageViewModel: AppShellViewModel
 {
     public SfPopup? MapDialogPopUp;

     public Map? MapView;

     [ObservableProperty]
     bool isExpanded;

     public ChargingStationsMapPageViewModel(
         ITurbineService turbineService, IAppService
         appService, IServiceProvider serviceProvider,
         NoInternetPopUp noInternetPopUp,
         ICommandHandler commandHandler, IConnectivity connectivity)
         : base(turbineService, appService, serviceProvider, commandHandler, connectivity, noInternetPopUp)
     {
         MapDialogButtons();

     }


     public ObservableCollection<MapTypeButton> MapTypeButtons { get; set; } = [];

     private void MapDialogButtons()
     {
         MapTypeButtons.Add(new MapTypeButton
         {
             Caption = AppResource.Default,
             ImageName = MaterialFonts.Map,
             Selected = true,
             MapNumber = 1
         });
         MapTypeButtons.Add(new MapTypeButton
         {
             Caption = AppResource.Satelite,
             MapNumber = 2,
             ImageName = MaterialFonts.Satellite,
         });
     }

     [RelayCommand]
     void ItemSelected(Turbine Turbine)
     {
         if (Turbine == null || MapView == null)
         {
             return;
         }
         var mapSpan = MapSpan.FromCenterAndRadius(Turbine.Location,
             Distance.FromKilometers(2));

         MapView!.MoveToRegion(mapSpan);
     }

     [RelayCommand]

     void OpenMapLayerOptions()
     {
         MapDialogPopUp!.IsOpen = true;
     }

     [RelayCommand]
     void ChangeMapType(MapTypeButton mapTypeCustomButton)
     {
         if (mapTypeCustomButton == null)
         {
             return;
         }

         foreach (var mapTypeButton in MapTypeButtons)
         {
             mapTypeButton.Selected = false;
         }

         mapTypeCustomButton.Selected = true;

         switch (mapTypeCustomButton.MapNumber)
         {
             case 1:
                 MapView!.MapType = MapType.Street;
                 break;
             case 2:
                 MapView!.MapType = MapType.Satellite;
                 break;
         }

         MapDialogPopUp!.IsOpen = false;
     }
 }

and because of this change that Microsoft made, nothing works, if I click on the pin it doesn't do anything

also, in the turbinecollectiopage

x:Name="CollectionPage"
x:DataType="vm:TurbinesCollectionPageViewModel"
HideSoftInputOnTapped="True">

<VerticalStackLayout Spacing="-20">
    <inputLayout:SfTextInputLayout
        x:Name="MobileContent"
        Style="{x:StaticResource TurbineCollectionComboBoxStyle}">
        <editors:SfComboBox
            x:Name="combobox"
            DisplayMemberPath="Turbine.Name"
            ItemsSource="{x:Binding TurbinePins}"
            Style="{x:DynamicResource ComboBoxStyle}">
            <editors:SfComboBox.Behaviors>
                <mct:EventToCommandBehavior
                    Command="{x:Binding SelectedItemChangeCommand}"
                    EventName="SelectionChanged" />
            </editors:SfComboBox.Behaviors>
        </editors:SfComboBox>
    </inputLayout:SfTextInputLayout>

    <CollectionView
        x:Name="TurbineCollection"
        Grid.Row="1"
        ItemsSource="{x:Binding TurbinePins}"
        SelectionMode="None"
        Style="{x:StaticResource TurbineCollectionViewStyle}">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="model:TurbinePin">
                <Border BackgroundColor="#578D57">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="8" />
                    </Border.StrokeShape>
                    <Grid
                        ColumnDefinitions="*,Auto"
                        RowDefinitions="Auto,Auto,Auto">
                        <Label
                            Style="{x:StaticResource TurbineDataLabelStyleStyle}"
                            Text="{x:Binding Turbine.Name}" />
                        <Label
                            Grid.Row="1"
                            Style="{x:StaticResource TurbineDataLabelStyleStyle}"
                            Text="{x:Binding Turbine.Address}" />
                        <Label
                            Grid.Row="2"
                            Style="{x:StaticResource C02LabelStyle}"
                            Text="{x:Binding Turbine.FinalCo2Removed,
                                             StringFormat='{0:F5} kg CO₂'}" />

                        <Button
                            Grid.RowSpan="3"
                            Grid.Column="1"
                            BackgroundColor="#63B62B"
                            Command="{x:Binding GotoLocationCommand,
                                                Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                            CommandParameter="{x:Binding}"
                            FontFamily="ma"
                            FontSize="Large"
                            Text="{x:Static fonts:MaterialFonts.Directions}" />
                    </Grid>

                    <Border.GestureRecognizers>
                        <TapGestureRecognizer
                            Command="{x:Binding PinClickedCommand,
                                                Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                            CommandParameter="{x:Binding}" />
                    </Border.GestureRecognizers>
                </Border>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

</VerticalStackLayout>

the pinclickcommend doesn't work

and my news page

  xmlns:rex="clr-namespace:METROWIND.Resources"
  xmlns:vm="clr-namespace:METROWIND.ViewModel"
  x:DataType="vm:NewsPageViewModel">

  <Grid
      Padding="5,0,5,0"
      RowDefinitions="Auto,*">

      <CollectionView
          x:Name="NewsList"
          Grid.Row="1"
          ItemsSource="{x:Binding ArticleList}"
          SelectionMode="None">

          <CollectionView.ItemsLayout>
              <LinearItemsLayout
                  ItemSpacing="10"
                  Orientation="Vertical" />
          </CollectionView.ItemsLayout>

          <CollectionView.EmptyViewTemplate>
              <DataTemplate>
                  <VerticalStackLayout
                      HorizontalOptions="CenterAndExpand"
                      VerticalOptions="CenterAndExpand">
                      <ActivityIndicator IsRunning="True" />
                      <Label
                          HorizontalOptions="Center"
                          Text="{x:Static rex:AppResource.Loading}" />
                  </VerticalStackLayout>
              </DataTemplate>
          </CollectionView.EmptyViewTemplate>

          <CollectionView.ItemTemplate>
              <DataTemplate x:DataType="models:Article">
                  <Border
                      Padding="10"
                      StrokeShape="RoundRectangle 20"
                      StrokeThickness="1">
                      <Grid
                          Padding="10"
                          ColumnDefinitions="Auto,*"
                          RowDefinitions="250,Auto,Auto,Auto,Auto"
                          RowSpacing="10">
                          <ffimageloading:CachedImage
                              Grid.ColumnSpan="2"
                              Aspect="AspectFill"
                              BitmapOptimizations="True"
                              CacheDuration="30"
                              ErrorPlaceholder="no_image.png"
                              LoadingPlaceholder="loading.gif"
                              Source="{x:Binding UrlToImage,
                                                 TargetNullValue=no_image.png}" />
                          <!--  Title  -->
                          <Label
                              Grid.Row="1"
                              Grid.ColumnSpan="2"
                              FontAttributes="Bold"
                              FontSize="Large"
                              Text="{x:Binding Title}" />
                          <!--  Source and Icon  -->
                          <HorizontalStackLayout
                              Grid.Row="2"
                              Grid.ColumnSpan="2"
                              Spacing="10">
                              <Label
                                  FontFamily="ma"
                                  FontSize="Large"
                                  Text="{x:Static constants:MaterialFonts.Newspaper}"
                                  VerticalTextAlignment="Center" />
                              <Label
                                  Text="{x:Binding Source.Name}"
                                  VerticalTextAlignment="Center" />
                          </HorizontalStackLayout>
                          <!--  Author and Date  -->
                          <Grid
                              Grid.Row="3"
                              Grid.ColumnSpan="2"
                              ColumnDefinitions="Auto,*,Auto"
                              ColumnSpacing="10">
                              <Label
                                  FontFamily="ma"
                                  FontSize="Large"
                                  Text="{x:Static constants:MaterialFonts.Person}" />
                              <Label
                                  Grid.Column="1"
                                  Text="{x:Binding Author,
                                                   TargetNullValue='Author unknown'}"
                                  VerticalTextAlignment="Center" />
                              <Label
                                  Grid.Column="2"
                                  Text="{x:Binding PublishedAt}" />
                          </Grid>
                      </Grid>
                      <Border.GestureRecognizers>
                          <TapGestureRecognizer
                              Command="{x:Binding ShowNewsDetailCommand,
                                                  Source={x:RelativeSource AncestorType={x:Type vm:NewsPageViewModel}}}"
                              CommandParameter="{x:Binding .}" />
                      </Border.GestureRecognizers>
                  </Border>
              </DataTemplate>
          </CollectionView.ItemTemplate>
      </CollectionView>

public ObservableCollection<Article> ArticleList { get; set; } = [];

readonly IHttpService _httpService;
readonly IDeviceLanguageService _deviceLanguageService;
readonly IAppService _appService;

public NewsPageViewModel(IDeviceLanguageService deviceLanguageService,
    IHttpService httpService,
    IAppService appService)
{
    _deviceLanguageService = deviceLanguageService;
    _httpService = httpService;
    _appService = appService;
    LoadNews();

}

public async void LoadNews()
{
    var language = _deviceLanguageService.GetDeviceCultureInfo();
    var newsUrl = AppConstants.GetNewsUrl(language.TwoLetterISOLanguageName);

    var newsObj = await _httpService.GetAsync<News>(newsUrl);

    if (newsObj != null && newsObj.Articles != null)
    {
        foreach (var article in newsObj.Articles)
        {
            ArticleList.Add(article);
        }
    }
}

[RelayCommand]
async Task ShowNewsDetail(Article article)
{
    if (article != null)
    {
        await _appService.NavigateToPage($"{nameof(ArticleDetailsPage)}",
             new Dictionary<string, object> {{ "articleObj", article }
        });
    }
}

it docent work when I click the news

I know I am probably asking too much, but the Docs are not very clear to me

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 79,156 Reputation points Microsoft Vendor

2025-01-16T08:09:42.7433333+00:00
because of this change that Microsoft made, nothing works, if I click on the pin it doesn't do anything

You set MarkerClickedCommand="{x:Binding PinClickedCommand}" in the ChargingStationsMapPage.xaml, but your above ChargingStationsMapPageViewModel.cs, PinClickedCommand did not add in it. You can add it like following code.

[RelayCommand] void PinClicked(object turbine) { if (turbine != null) { // Handle the pin click event Shell.Current.GoToAsync(); }; }

it docent work when I click the news

Is this ShowNewsDetailCommand not executed? Please open a new thread about this issue.

Eduardo Gomez Romero 1,235

Oh, I am sorry

this command, comes from my appshellviewmodel, via inheritance, look

appshellview model

    public partial class AppShellViewModel: ObservableObject, IPinClickHandler
    {
        private AppShell? _shell;
        private readonly NoInternetPopUp _noInternetPopUp;
        private readonly IServiceProvider _serviceProvider;
        private readonly ITurbineService _turbineService;
        private readonly ICommandHandler _commandHandler;
        private readonly IConnectivity _connectivity;
        private readonly IAppService _appService;
        private bool isInitializing = false;
        public ObservableCollection<TurbinePin> TurbinePins => _turbineService.TurbinePins;
        public ICommand PinClickedCommand => _turbineService.PinClickedCommand;
        public const string FLYOUT_KEY = "flyout_key";
        public const string SWITCH_KEY = "switch_key";
        [ObservableProperty]
        bool isLoadFinished;
        [ObservableProperty]
        bool isCompactMode;
        [ObservableProperty]
        bool isMenuPopUpOpen;
        public AppShellViewModel(ITurbineService turbineService, IAppService appService,
            IServiceProvider serviceProvider, ICommandHandler commandHandler,
            IConnectivity connectivity, NoInternetPopUp noInternetPopUp)
        {
            _serviceProvider = serviceProvider;
            _turbineService = turbineService;
            _appService = appService;
            _commandHandler = commandHandler;
            _connectivity = connectivity;
            _noInternetPopUp = noInternetPopUp;
            _turbineService.NoInternet += TurbineService_NoInternet;
            InitializeCommand();
            _turbineService.SetPinClickHandler(this);
            _connectivity.ConnectivityChanged += Connectivity_ConnectivityChanged;
        }
        private void TurbineService_NoInternet()
        {
            _noInternetPopUp.Show();
        }
        private void InitializeCommand()
        {
            _commandHandler.SetPinClickedCommand(new Command<TurbinePin>(async (pin) =>
            await PinMarkerClicked(pin)));
        }
        [RelayCommand]
        async Task Appearing(AppShell appShell)
        {
            _shell = appShell;
            try
            {
                if (TurbinePins.Count == 0 && !isInitializing)
                {
                    isInitializing = true;
                    await _turbineService.InitializeAsync();
                    isInitializing = false;
                }
            }
            catch (Exception ex)
            {
                Debug.WriteLine($"Initialization failed: {ex.Message}");
                isInitializing = false;
            }
        }
        private void Connectivity_ConnectivityChanged(object? sender, ConnectivityChangedEventArgs e)
        {
            Debug.WriteLine(_connectivity.NetworkAccess);
            HandleConnectivityChangeAsync();
        }
        private async void HandleConnectivityChangeAsync()
        {
            if (_connectivity.NetworkAccess == NetworkAccess.Internet)
            {
                _noInternetPopUp.IsOpen = false;
                try
                {
                    if (TurbinePins.Count == 0 && !isInitializing)
                    {
                        isInitializing = true;
                        await _turbineService.InitializeAsync();
                        isInitializing = false;
                    }
                }
                catch (Exception ex)
                {
                    Debug.WriteLine($"Initialization failed: {ex.Message}");
                    isInitializing = false;
                }
            }
            else
            {
                TurbineService_NoInternet();
            }
        }
        [RelayCommand]
        void OpenMenu()
        {
            IsMenuPopUpOpen = true;
        }
        [RelayCommand]
        void ToggleSwitch()
        {
            if (IsCompactMode)
            {
                _shell!.FlyoutWidth = 65;
            }
            else
            {
                _shell!.FlyoutWidth = 300;
            }
            IsMenuPopUpOpen = false;
        }
        public async Task PinMarkerClicked(TurbinePin turbine)
        {
            if (turbine != null)
            {
#if ANDROID || IOS
                await _appService.NavigateToPage(nameof(TurbineDetailPage),
            new Dictionary<string, object> { { "SelectedTurbine", turbine } });
#elif WINDOWS || MACCATALYST
                var viewModel = _serviceProvider.GetRequiredService<TurbineDetailPageViewModel>();
                viewModel.SelectedTurbine = turbine;
                var page = _serviceProvider.GetRequiredService<TurbineDetailPage>();
                page.BindingContext = viewModel;
                var secondWindow = new Window(page);
                var existingWindow = Application.Current!.Windows.FirstOrDefault(
                    w => w.Page is TurbineDetailPage);
                if (existingWindow != null)
                {
                    Application.Current?.ActivateWindow(existingWindow);
                }
                else
                {
                    Application.Current!.OpenWindow(secondWindow);
                }
#endif
            }

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 79,156 Reputation points Microsoft Vendor

2025-01-17T10:00:06.16+00:00

I find this issue is related to this line <DataTemplate x:DataType="model:TurbinePin"> in TurbinesCollectionPage.xaml. If I remove the x:DataType="model:TurbinePin" , the click command will be working, but the item context will be missing. This issue is related to Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel} cannot find the parent viewmodel.

Eduardo Gomez Romero 1,235

Yes I had the same problem, so I cannot increase the performance of my bindings?

viewModel

    public partial class TurbinesCollectionPageViewModel(
        ITurbineService turbineService,
        IAppService appService,
        IServiceProvider serviceProvider,
        ICommandHandler commandHandler,
        IConnectivity connectivity,
        NoInternetPopUp noInternetPopUp):
        AppShellViewModel(turbineService, appService, serviceProvider,
            commandHandler, connectivity, noInternetPopUp)
    {
        public CollectionView? TurbinesCollection;
        public SfComboBox? ColletionComboBox;
        [ObservableProperty]
        Turbine? turbine;
        [RelayCommand]
        async Task SelectedItemChange()
        {
            if (ColletionComboBox!.SelectedIndex == -1)
            {
                return;
            }
            var item = TurbinePins.ElementAt(
                ColletionComboBox.SelectedIndex);
            TurbinesCollection?.ScrollTo(ColletionComboBox.SelectedIndex,
                -1, ScrollToPosition.Center);
            var inputView = ColletionComboBox.Children[1] as Entry;
#if ANDROID || IOS
            if (KeyboardExtensions.IsSoftKeyboardShowing(inputView!))
            {
                await Task.Delay(200);
                await inputView!.HideKeyboardAsync(default);
            }
#else
            await Task.CompletedTask;
#endif
        }
        [RelayCommand]
        static async Task GotoLocation(TurbinePin turbinePin)
        {
            await Navigate(turbinePin);
        }
        public static async Task Navigate(TurbinePin turbinePin)
        {
            var location = new Location(turbinePin.Turbine!.Latitude, turbinePin.Turbine.Longitude);
            var options = new MapLaunchOptions
            {
                Name = turbinePin.Turbine.Name,
                NavigationMode = NavigationMode.Driving
            };
            try
            {
                await Map.OpenAsync(location, options);
            }
            catch (Exception)
            {
                // No map application available to open
            }
        }
    }
}

this is the app, if you could take a look

https://github.com/eduardoagr/METROWIND/tree/MetroWind-1-2

Eduardo Gomez Romero 1,235 Reputation points

2025-01-17T12:50:09.44+00:00
Everything is working now. thanks

The only thing you have to do is this

for example

Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:OverdueInquiringViewModel}}, Path=EditPersonCommand, x:DataType=viewmodels:OverdueInquiringViewModel}"
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 79,156 Reputation points Microsoft Vendor

2025-01-20T01:02:58.89+00:00

Thanks for your update. I summarize an answer.

1 answer

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 79,156 Reputation points Microsoft Vendor

2025-01-20T01:01:34.25+00:00
Hello,

because of this change that Microsoft made, nothing works, if I click on the pin it doesn't do anything

this issue is related to this line <DataTemplate x:DataType="model:TurbinePin"> in TurbinesCollectionPage.xaml. If you set x:DataType=viewmodels:OverdueInquiringViewModel in the Command, the click command will be working.

Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:OverdueInquiringViewModel}}, Path=EditPersonCommand, x:DataType=viewmodels:OverdueInquiringViewModel}"

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 79,156 Reputation points Microsoft Vendor

2025-01-21T06:07:17.13+00:00

Everything is working now. thanks

Eduardo Gomez Romero If this issue is solved, please accept this answer, it will help others who have similar issue.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

compile binding help

1 answer

Your answer