Question

我正在尝试创建主/详细信息用户界面，就像在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灯和Template10。

Answer 1

在Cars ListView上，看起来SelectedItem绑定指向的是与其他所有绑定源不同的绑定源。

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

Answer 2

Windows App Studio团队在两个方面拥有良好的UWP样本：

您可以在其门户网站（http://appstudio.windows.com）中获取的生成代码，您可以在其中找到良好的实施模式，
他们有一个github帐户，您可以在其中找到一堆响应控件和使用示例（https://github.com/wasteam/waslibs）

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

2 个答案: