如何在用户控件之间进行通信

Question

我正在尝试创建主/详细 UI，例如在 Win10 电子邮件应用程序中。我已将我的应用拆分为user controls，我的问题是如何在它们之间进行通信。

当用户从主列表中选择项目时（在枢轴项目内 usercontrol），我想在右侧显示详细信息 主列表。

MainView.xaml（简化版）

<Page>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="GridMainColumn" Width="400" />
            <ColumnDefinition x:Name="GridDetailColumn" Width="*" />
        </Grid.ColumnDefinitions>

        <!-- Pivot -->
        <Grid x:Name="GridPivot" Grid.Row="0" Grid.Column="0">
            <Pivot SelectedIndex="{Binding Path=SelectedPivotIndex, Mode=TwoWay}" 
                   Margin="0,0,0,0">
                <PivotItem>
                    <view:CarsPivotItemView/>
                </PivotItem>
                <PivotItem>
                    <view:HotelsivotItemView/>
                </PivotItem>
            </Pivot>
        </Grid>

        <!-- Detailed view -->
        <Grid x:Name="GridDetail" Grid.Column="1" Grid.Row="0">
            <view:CarDetailsView 
                  Visibility="{x:Bind ViewModel.CarSelected, 
                  Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}"/>
            <view:HotelDetailsView 
                  Visibility="{x:Bind ViewModel.HotelSelected, 
                  Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}"/>
        </Grid>
    </Grid>
<Page>

注意* CarsPivotItemView 是用户控件，有自己的视图模型。

CarsPivotItemView.xaml（简化版）

<UserControl>
    <RelativePanel>
        <TextBox x:Name="SearchBox" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" Text="{Binding SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
            <interactivity:Interaction.Behaviors>
                <behaviors:TextBoxEnterKeyBehavior>
                    <core:InvokeCommandAction Command="{Binding EnterKeyDownCommand}"/>
                </behaviors:TextBoxEnterKeyBehavior>
            </interactivity:Interaction.Behaviors>
        </TextBox>

        <ListView ItemsSource="{x:Bind ViewModel.Cars}" SelectedItem="{Binding SelectedCar, Mode=TwoWay}" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True" RelativePanel.Below="SearchBox" Margin="0,0,0,0">
            <interactivity:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="SelectionChanged">
                    <core:InvokeCommandAction Command="{Binding CarSelectedCommand}" />
                </core:EventTriggerBehavior>
            </interactivity:Interaction.Behaviors>
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="models:ICar">
                    <StackPanel Margin="0,10,0,10">
                        <TextBlock Text="{x:Bind Name}"/>
                        <TextBlock Text="{x:Bind FullMakeModel}"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </RelativePanel>
</UserControl>

现在当用户从 CarsPivotItemView ListView 中选择汽车时，我想在 MainView 上显示 CarDetailsView。

我应该如何将这个选定的汽车从 CarsPivotItemView 绑定到 CarDetailsView？

我应该使用例如MVVM light Messenger 将消息从 CarsPivotItemViewViewModel 发送到 CarDetailsViewModel？

总的来说，将这些部分拆分给用户控制是个好主意吗？

我在我的应用上使用了 MVVM light 和 Template10。

Answer 1

Windows App Studio 团队在两个方面拥有优秀的 UWP 示例：

1. 您可以在他们的门户 (http://appstudio.windows.com) 中获得生成的代码，在那里您可以找到好的实现模式，
2. 他们有一个 github 帐户，您可以在其中找到一堆响应式控件和使用示例 (https://github.com/wasteam/waslibs)

Answer 2

在 Cars ListView 上，SelectedItem 绑定似乎指向与其他所有内容不同的绑定源。

应该是{x:Bind ViewModel.SelectedCar, Mode=TwoWay}。然后在setter for SelectedCar中，你可以设置ViewModel.CarSelected = true，它应该会显示在详情视图中