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

Question

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

When user selects item from main list (which is inside pivot item usercontrol), I want to display detailed info on the right side of the main list.

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 是用户控件，它有自己的 View 模型。

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 绑定(bind)到 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)