如何让所有视图都可以访问共享的 ProgressCircle 控件？

Question

我是一名 Android 开发人员，正在尝试学习 UWP 开发，并尝试使用 Prism Library and Windows Template Studio 来帮助我实现样板功能。

我的目标是拥有一个所有视图都可以访问的 ProgressCircle 控件，这样每当我执行异步调用时，我都可以弹出 ProgressCircle。为了让事情保持干燥，我不想在每个视图中都有一个 ProgressCircle。我怎样才能做到这一点？

据我了解，由 Windows Template Studio 构建的 (Prism) 有一个 ShellPage 视图，其中包含所有其他视图，并且它有自己的 viewModel。这似乎有点类似于 Androids Activity/Fragment 模型。我最初的想法是将 ProgressCircle 放在 ShellPage 视图中，然后在需要时从我的子视图 (MainPage) 调用它。但是我还没有弄清楚如何从 child/other view/viewModel 调用另一个视图 viewModel 方法。这是正确的方法吗？如果是，我该如何实现？

我的另一个想法是创建一个可以添加到 viewModel 基础的 Progress 应用服务class，但我还没有了解应用服务。

Answer 1

好的，所以我不确定它与 Prism 是否有任何不同，因为我正在使用代码行为模式（我对此一无所知，但据我所知，它是'那不同）。无论如何，由 Windows Template Studio 创建的 Shell 页面应该与此类似：

<Page
    x:Class="MyProject.Views.ShellPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:behaviors="using:armada_vpn.Behaviors"
    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
    xmlns:helpers="using:MyProject.Helpers"
    xmlns:views="using:MyProject.Views"
    Loaded="OnLoaded"
    mc:Ignorable="d" Background="Black">

    <winui:NavigationView
        x:Name="navigationView"
        IsBackButtonVisible="Visible"
        IsBackEnabled="{x:Bind IsBackEnabled, Mode=OneWay}"
        SelectedItem="{x:Bind Selected, Mode=OneWay}"
        ItemInvoked="OnItemInvoked"
        IsSettingsVisible="False"
        Background="White" RequestedTheme="Light"
        OpenPaneLength="200">

        <winui:NavigationView.MenuItems>
            <!--
            TODO WTS: Change the symbols for each item as appropriate for your app
            More on Segoe UI Symbol icons: https://docs.microsoft.com/windows/uwp/style/segoe-ui-symbol-font
            Or to use an IconElement instead of a Symbol see https://github.com/Microsoft/WindowsTemplateStudio/blob/master/docs/projectTypes/navigationpane.md
            Edit String/en-US/Resources.resw: Add a menu item title for each page
            -->

            <winui:NavigationViewItem x:Uid="Shell_Main" Icon="Home" helpers:NavHelper.NavigateTo="views:MainPage" />
        </winui:NavigationView.MenuItems>
        <i:Interaction.Behaviors>
            <behaviors:NavigationViewHeaderBehavior
                x:Name="navigationViewHeaderBehavior"
                DefaultHeader="{x:Bind ViewModel.Selected.Content, Mode=OneWay}">
                <behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                    <DataTemplate>
                        <Grid>
                            <TextBlock
                                Text="{Binding}"
                                Style="{ThemeResource TitleTextBlockStyle}"
                                Margin="{StaticResource SmallLeftRightMargin}" />
                        </Grid>
                    </DataTemplate>
                </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
            </behaviors:NavigationViewHeaderBehavior>
            <ic:EventTriggerBehavior EventName="ItemInvoked">
                <ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
            </ic:EventTriggerBehavior>
        </i:Interaction.Behaviors>
        <Grid> #This here is important for you
            <Frame x:Name="shellFrame"/>
        </Grid>
    </winui:NavigationView>
</Page>

页面 XAML 中指定的网格区域将显示您的不同视图，因为 Shell 页面控制此框架中显示的内容。

无论如何，您要做的就是将您的进度环添加到此框架的顶部（并使用透明背景）。为此，您可以为两个元素指定一个 ZIndex（具有最高 ZIndex 的元素将显示在顶部：

<Grid>
    <ProgressRing x:Name="ProgressRing" Canvas.ZIndex="2" Background="Transparent"/>
    <Frame x:Name="shellFrame" Canvas.ZIndex="1"/>
</Grid>

或者，您可以简单地将 ProgressRing 定义为此处的最后一个元素（因为，没有指定任何 ZIndex，渲染顺序是从上到下）：

<Grid>
    <Frame x:Name="shellFrame"/>
    <ProgressRing x:Name="ProgressRing" Background="Transparent"/>
</Grid>

然后，可以使用您为 ProgressRing 指定的名称在您的 Shell 页面中访问它，但是从其他视图访问它可能会很棘手，因为您需要访问 Shell 页面实例直接来自他们。您可以做的一件事是实现用于激活和停用可以从代码中的任何位置引发的 ProgressRing 的事件，并实现将在 ShellPage class.[=13 中订阅这些事件的处理程序=]

希望对您有所帮助。

如何让所有视图都可以访问共享的 ProgressCircle 控件？

How can I have a shared ProgressCircle control accessible to all views?

c#

.net

prism

windows-template-studio