XAML 如何将ViewModel一致地绑定到View?

zynd9foi  于 2023-04-03  发布在  其他
关注(0)|答案(1)|浏览(193)

在WinUI或UWP XAML中,如何将特定类型的ViewModel一致地绑定到特定的View?(这是Should UserControls expose arbitrary properties or just a ViewModel?的后续内容)。

示例

例如,让我们从Material UI中获取这张基本卡片:

根据Should UserControls expose arbitrary properties or just a ViewModel?中的建议,我做了一个这样的控件:

<Card
    Subtitle="Word of the Day"
    Title="Be*nev*o*lent"
    LowerSubtitle="adjective"
    Description="well meaning and kindly. 'a benevolent smile'"
    LinkText="Learn more"
    LinkUri="http://example.com" />

我还知道我的团队将使用这个Card与一个特定的ViewModel,WordOfTheDayViewModel,很多:

runtimeclass WordOfTheDayViewModel: Windows.UI.Xaml.Data.INotifyPropertyChanged
{
    WordOfTheDayViewModel();
    String Word{ get; };
    String PartOfSpeech{ get; };
    String Definition{ get; };
    Uri DefinitionUri{ get; };
}

它会像这样绑定:

<Card
    Subtitle="Word of the Day"
    Title="{x:Bind ViewModel.Word}"
    LowerSubtitle="{x:Bind ViewModel.PartOfSpeech}"
    Description="{x:Bind ViewModel.Definition}"
    LinkText="Learn more"
    LinkUri="{x:Bind ViewModel.DefinitionUri}" />

在这个假设的例子中,这种情况会在很多地方发生--我们需要在很多地方显示绑定到同一类型的视图模型(具有不同示例)的卡片。我可以编写代码来标准化这个绑定吗,这样我的团队就不必每次都重写这7行了?

潜在答案

从我收集的信息来看,有几个可能的答案,但我不确定如何选择:

*不标准化此绑定:我让团队在每次使用WordOfTheDayViewModel时将其绑定到Card。“您可能需要重复的代码比您想象的要少,而且每次绑定时可能会有 * 必需的 * 细微差异。”
*新建一个UserControl:创建一个新的UserControl,比如<WordOfTheDayCard Word="">,它接受一个WordOfTheDayViewModel并在后台执行此绑定。
*一些奇怪的功能绑定的东西,我不能fathom:在React中,我只需编写一个转换器函数,将我的WordOfTheDayViewModelMap到格式良好的Card s(参见下面的示例)。开销很简单:一个额外的函数调用。“WinUI也可以这样做,只是你不知道而已。”
*我的ResourceDictionary中有一个标准的ItemTemplate:甚至不确定这是否可能?
*完全不同:当然可以!

(Here这是我在React中写的):

// wow, so cheap! much virtual DOM
function WordCard(word: WordOfTheDayViewModel): JSX.Element {
    return <Card
        Subtitle="Word of the Day"
        Title={word.Word}
        LowerSubtitle={word.PartOfSpeech}
        Description={word.Definition}
        LinkText={Learn more}
        LinkUri={word.DefinitionUri}>;
}
imzjd6km

imzjd6km1#

您可以创建CardInfoclassrecord

record CardInfo(string Title, string SubTitle, string Description, string Uri);

然后创建一个Style,这样就不需要重复SubTitleLinkText设置,

<Page.Resources>
    <Style TargetType="Card">
        <Setter Property="SubTitle" Value="Word of the day" />
        <Setter Property="LinkText" Value="Learn more" />
    </Style>
</Page.Resources>

最后在您的Card控件中添加一个CardInfo``DependencyProperty,使用方法如下:

<Card CardInfo="{x:Bind ViewModel.CardInfo}" />

相关问题