如何让 OnPropertyChanged 触发用户的方向更改？

Question

我可以获得设备方向并在构造函数中为其设置一个值。 它按预期工作。 但是当用户改变设备的方向时，OnChanged 事件不会触发。 我可能对这一切的运作方式有误。 但是我有点期待 OnChanged 事件在方向改变时触发和更新显示的信息？

TabletPodcastViewModel.cs

namespace NerdNewsNavigator2.ViewModel.Tablet;

public partial class TabletPodcastViewModel : ObservableObject
{
    #region Properties
    readonly TwitService _twitService;
    [ObservableProperty]
    int _orientation;
    public ObservableCollection<Podcast> Podcasts { get; set; } = new();
    #endregion
    public TabletPodcastViewModel(TwitService twit)
    {
        this._twitService = twit;
        _ = GetPodcasts();
        this._orientation = OnDeviceOrientationChange();
        System.Diagnostics.Debug.WriteLine("Device orientation is: " + Orientation);
        OnPropertyChanged(nameof(Orientation));
    }

    #region Get the Podcast and set the Podcast List
    async Task GetPodcasts()
    {
        var podcastList = await TwitService.GetListOfPodcasts();
        foreach (var item in podcastList)
        {
            var temp = await Task.FromResult(FeedService.GetFeed(item));
            Podcasts.Add(temp);
        }
    }
    #endregion
    public int OnDeviceOrientationChange()
    {
        if (DeviceDisplay.Current.MainDisplayInfo.Orientation == DisplayOrientation.Portrait) { return 2; }
        else return 3;
    }

    [RelayCommand]
    async Task Tap(string url)
    {
        var encodedUrl = HttpUtility.UrlEncode(url);
        await Shell.Current.GoToAsync($"{nameof(TabletShowPage)}?Url={encodedUrl}");
    }
}

这是 TAbletPodcastPage.xaml.cs

namespace NerdNewsNavigator2.View.Tablet;

public partial class TabletPodcastPage : ContentPage
{
   public TabletPodcastPage(TabletPodcastViewModel viewModel)
    {
        InitializeComponent();
        BindingContext = viewModel;
    }
}

这是 TabletPodcastPage.xaml：

<?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"
             xmlns:model="clr-namespace:NerdNewsNavigator2.Model"
             xmlns:viewmodel="clr-namespace:NerdNewsNavigator2.ViewModel.Tablet"
             x:Class="NerdNewsNavigator2.View.Tablet.TabletPodcastPage"
             x:DataType="viewmodel:TabletPodcastViewModel"
               Shell.NavBarIsVisible="True"
             Title="{Binding Orientation}">
    <Shell.BackButtonBehavior>
        <BackButtonBehavior IsEnabled="True" IsVisible="False"></BackButtonBehavior>
    </Shell.BackButtonBehavior>
    <CollectionView ItemsSource="{Binding Podcasts}" Margin="5" BackgroundColor="White" SelectionMode="None">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="{Binding Orientation}"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="model:Podcast">
                <Grid RowDefinitions="30,400,*" ColumnDefinitions="400">
                    <Grid.GestureRecognizers>
                        <TapGestureRecognizer 
                            Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:TabletPodcastViewModel}}, Path=TapCommand}"
                            CommandParameter="{Binding Url}"/>
                    </Grid.GestureRecognizers>
                    <Label  Grid.Row="0"
                        Text="{Binding Title}" 
                        TextColor="Black" 
                            HorizontalTextAlignment="Center"
                        FontSize="16" 
                            FontAttributes="Bold"
                        LineBreakMode="WordWrap"/>
                    <Image Grid.Row="1"
                    Aspect="AspectFit" 
                    MaximumHeightRequest="400" 
                    MaximumWidthRequest="400" 
                    Source="{Binding Image}">
                    </Image>
                    <Label Grid.Row="2"
                           Margin="5"
                           Text="{Binding Description}" 
                           FontSize="12" 
                           TextColor="Black" 
                           LineBreakMode="WordWrap"/>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

Answer 1

在阅读了 ToolkitmakerSteve 的评论后，我找到了 Orientation changes 的文档，然后我想出了如何让它工作的方法！

这是固定的 TabletPodcastViewModel.cs：

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.


namespace NerdNewsNavigator2.ViewModel.Tablet;

public partial class TabletPodcastViewModel : ObservableObject
{
    #region Properties
    readonly TwitService _twitService;
    [ObservableProperty]
    int _orientation;
    private DisplayInfo MyMainDisplay { get; set; } = new();

    public ObservableCollection<Podcast> Podcasts { get; set; } = new();
    #endregion
    public TabletPodcastViewModel(TwitService twit)
    {
        this._twitService = twit;
        _ = GetPodcasts();
        DeviceDisplay.MainDisplayInfoChanged += DeviceDisplay_MainDisplayInfoChanged;
        this._orientation = OnDeviceOrientationChange();
      //  System.Diagnostics.Debug.WriteLine("Device orientation is: " + Orientation);
        OnPropertyChanged(nameof(Orientation));
    }

    #region Get the Podcast and set the Podcast List
    async Task GetPodcasts()
    {
        var podcastList = await TwitService.GetListOfPodcasts();
        foreach (var item in podcastList)
        {
            var temp = await Task.FromResult(FeedService.GetFeed(item));
            Podcasts.Add(temp);
        }
    }
    #endregion
    private void DeviceDisplay_MainDisplayInfoChanged(object? sender, DisplayInfoChangedEventArgs e)
    {
        MyMainDisplay = DeviceDisplay.Current.MainDisplayInfo;
        OnPropertyChanged(nameof(MyMainDisplay));
        Orientation = OnDeviceOrientationChange();
        OnPropertyChanged(nameof(Orientation));
        System.Diagnostics.Debug.WriteLine("Device orientation is: " + Orientation);
    }
    public int OnDeviceOrientationChange()
    {
        if (DeviceDisplay.Current.MainDisplayInfo.Orientation == DisplayOrientation.Portrait) { return 2; }
        else return 3;
    }

    [RelayCommand]
    async Task Tap(string url)
    {
        var encodedUrl = HttpUtility.UrlEncode(url);
        await Shell.Current.GoToAsync($"{nameof(TabletShowPage)}?Url={encodedUrl}");
    }
}

这是 TabletPodcastPage.xaml：

<?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"
             xmlns:model="clr-namespace:NerdNewsNavigator2.Model"
             xmlns:viewmodel="clr-namespace:NerdNewsNavigator2.ViewModel.Tablet"
             x:Class="NerdNewsNavigator2.View.Tablet.TabletPodcastPage"
             x:DataType="viewmodel:TabletPodcastViewModel"
               Shell.NavBarIsVisible="False"
             Title="">
    <Shell.BackButtonBehavior>
        <BackButtonBehavior IsEnabled="True" IsVisible="False"></BackButtonBehavior>
    </Shell.BackButtonBehavior>
    <CollectionView ItemsSource="{Binding Podcasts}" Margin="5" BackgroundColor="White" SelectionMode="None">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="{Binding Orientation}"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="model:Podcast">
                <Grid RowDefinitions="30,400,*" ColumnDefinitions="400">
                    <Grid.GestureRecognizers>
                        <TapGestureRecognizer 
                            Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:TabletPodcastViewModel}}, Path=TapCommand}"
                            CommandParameter="{Binding Url}"/>
                    </Grid.GestureRecognizers>
                    <Label  Grid.Row="0"
                        Text="{Binding Title}" 
                        TextColor="Black" 
                            HorizontalTextAlignment="Center"
                        FontSize="16" 
                            FontAttributes="Bold"
                        LineBreakMode="WordWrap"/>
                    <Image Grid.Row="1"
                    Aspect="AspectFit" 
                    MaximumHeightRequest="400" 
                    MaximumWidthRequest="400" 
                    Source="{Binding Image}">
                    </Image>
                    <Label Grid.Row="2"
                           Margin="5"
                           Text="{Binding Description}" 
                           FontSize="12" 
                           TextColor="Black" 
                           LineBreakMode="WordWrap"/>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

这用于检测设备方向变化并将数值变化应用于 GridItemsLayout 中的跨度。 非常感谢 TY 的建议。 我一直在用头撞虚拟墙试图解决这个问题。 我不知道如何 go 弄清楚我需要做什么。