XAML 如何在.NET MAUI中绑定布局更改的窗口宽度?

kmb7vmvb  于 2023-05-27  发布在  .NET
关注(0)|答案(1)|浏览(237)

绑定到窗口宽度,以便根据窗口大小更改布局。
我正在使用基于WPF的This github存储库的概念,但我一直在尝试将其适用于MAUI。这也是我获得“IsGreaterThanConverter”和“IsLessThanConverter”的地方。“TemplatedContentPresenter”的实现被发现Here
我知道有“DataTemplateSelector”,但我没有与他们合作过,不知道如何在这种情况下实现它。
我得到这个错误:
找不到“AncestorType”的属性、BindableProperty或事件,或者值和属性之间的类型不匹配。
MainWindow.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"
             x:Class="Local.MainPage"
             xmlns:viewModels="clr-namespace:Local.ViewModels"
             xmlns:local="clr-namespace:Library;assembly=Library">
    
    <ContentPage.BindingContext>
        <viewModels:MainWindowViewModel/>
    </ContentPage.BindingContext>

    <ContentPage.Resources>
    </ContentPage.Resources>

    <local:TemplatedContentPresenter x:Name="Main" Data="{Binding}">
        <local:TemplatedContentPresenter.Style>

            <Style TargetType="local:TemplatedContentPresenter">

                <!--// Default Layout //-->

                <Setter Property="DataTemplate"
                            Value="{StaticResource Desktop_Layout}" />

                <Style.Triggers>

                    <!--// Desktop Layout // {width > 1400px}-->

                    <DataTrigger TargetType="local:TemplatedContentPresenter" Binding="{Binding Path=Width, Source={RelativeSource AncestorType=ContentPage}, Converter={x:Static local:IsGreaterThanConverter.Instance}, ConverterParameter=1400}"
                                     Value="True">

                        <Setter Property="DataTemplate"
                                    Value="{StaticResource Desktop_Layout}" />

                    </DataTrigger>

                    <!--// Tablet Landscape Layout // {width < 1200px}-->

                    <DataTrigger TargetType="local:TemplatedContentPresenter" Binding="{Binding Path=Width, Source={RelativeSource AncestorType=ContentPage}, Converter={x:Static local:IsLessThanConverter.Instance}, ConverterParameter=1200}"
                                     Value="True">

                        <Setter Property="DataTemplate"
                                    Value="{StaticResource Tablet_Layout}" />

                    </DataTrigger>

                    <!--// Mobile Landscape Layout // {width < 812px}-->

                    <DataTrigger TargetType="local:TemplatedContentPresenter" Binding="{Binding Path=Width, Source={RelativeSource AncestorType=ContentPage}, Converter={x:Static local:IsLessThanConverter.Instance}, ConverterParameter=812}"
                                     Value="True">

                        <Setter Property="DataTemplate"
                                    Value="{StaticResource Mobile_Layout}" />

                    </DataTrigger>

                </Style.Triggers>

            </Style>

        </local:TemplatedContentPresenter.Style>
    </local:TemplatedContentPresenter>

</ContentPage>

***编辑:***对于任何可能试图完成类似绑定的人,我意识到我没有将RealativeSource“模式”设置为“FindAncestor”。

我的DataTrigger行应如下所示:

<DataTrigger TargetType="local:TemplatedContentPresenter" Binding="{Binding Path=Width, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type ContentPage}}, Converter={x:Static local:IsGreaterThanConverter.Instance}, ConverterParameter=1400}" Value="True">
hs1ihplo

hs1ihplo1#

你为什么不使用不同的页面?
MVVM和绑定的好处是,您的代码(ViewModel)不知道是谁呈现数据(Views)。
你唯一需要修改的是你的导航服务,以考虑到你使用的是什么操作系统,并相应地转到Win/Android页面。
现在,如果您希望在手动调整窗口大小时看到更改,这是另一回事。
但我所做的是将视图分开。

相关问题