模板10:模态未关闭

Question

我想关闭该模式中的一个按钮在Shell视图上的模板10的模式。Shell.xaml.cs中的关闭函数被触发，IsModal和HasError被切换为false，但是模态对话框保持活动状态。

我使用的代码：

LandingpageViewModel:

public override async void OnNavigatedTo(object parameter, NavigationMode mode, IDictionary<string, object> state)
{
    var i = await getMuscleScores();
    if(i == null)
        ShowError();
}

public void ShowError()
{
    Views.Shell.SetError(true);
}

Shell.xaml.cs:

public bool IsModal { get; set; } = false;
public bool HasError { get; set; } = false;
public string ErrorText { get; set; } = "Something went wrong...";
public static void SetError(bool error, string text = null)
{
    WindowWrapper.Current().Dispatcher.Dispatch(() =>
    {
        if (error)
            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
        else
            BootStrapper.Current.UpdateShellBackButton();

        Instance.IsModal = error;
        Instance.IsBusy = !error;
        Instance.HasError = error;
        Instance.ErrorText = text == null ? "Something went wrong..." : text;

        Instance.PropertyChanged?.Invoke(Instance, new PropertyChangedEventArgs(nameof(IsModal)));
        Instance.PropertyChanged?.Invoke(Instance, new PropertyChangedEventArgs(nameof(HasError)));
        Instance.PropertyChanged?.Invoke(Instance, new PropertyChangedEventArgs(nameof(ErrorText)));
    });
}

public void HideError(object sender, TappedRoutedEventArgs e)
{
    SetError(false);
}

Shell.xaml:

<Controls:ModalDialog.ModalContent>
    <Grid>
        <Viewbox Height="32">
            <StackPanel Orientation="Horizontal" Visibility="{x:Bind IsBusy, Mode=OneWay, Converter={StaticResource visibilityConv}}">
                <ProgressRing Width="16" Height="16"
                        Margin="12,0" Foreground="White"
                        IsActive="{x:Bind IsBusy, Mode=OneWay}" />
                <TextBlock VerticalAlignment="Center" Foreground="White" Text="{x:Bind BusyText, Mode=OneWay}" />
            </StackPanel>
        </Viewbox>
        <StackPanel Visibility="{x:Bind HasError, Mode=OneWay, Converter={StaticResource visibilityConv}}" VerticalAlignment="Center" Margin="12,0">
            <TextBlock Text="Oops!" Style="{ThemeResource HeaderTextBlockStyle}"/>
            <TextBlock Text="{x:Bind ErrorText, Mode=OneWay}"/>
            <Button Content="Continue" Style="{StaticResource ButtonStyle}" HorizontalAlignment="Center" Tapped="HideError"/>
        </StackPanel>
    </Grid>
</Controls:ModalDialog.ModalContent>

另一件我试图发现的问题是在LandingPageViewModel:中

ShowError();
await Task.Delay(5000);
HideError();

这给了我同样的结果，模态对话框保持打开。因此，我认为使用不同的线程似乎出了问题。有人知道解决这个问题的办法吗？顺便说一句:我正在使用最新版本的模板10，在这里输入代码。

Answer 1

要关闭模板10的模式，需要将ModalDialog.IsModal属性设置为"false“。由于XAML代码不完整，我猜您使用的是模板10最小模板。在模板中，它使用IsBusy设置ModalDialog.IsModal属性。但是，您似乎在代码隐藏中使用IsModal来控制ModalDialog，因此您可以将该属性绑定到ModalDialog.IsModal，如下所示：

<Controls:ModalDialog IsModal="{x:Bind IsModal, Mode=OneWay}">
    <Controls:ModalDialog.Content>
    ...
    </Controls:ModalDialog.Content>
    <Controls:ModalDialog.ModalContent>
        <Grid>
            <Viewbox Height="32">
                <StackPanel Orientation="Horizontal" Visibility="{x:Bind IsBusy, Mode=OneWay, Converter={StaticResource visibilityConv}}">
                    <ProgressRing Width="16" Height="16"
                        Margin="12,0" Foreground="White"
                        IsActive="{x:Bind IsBusy, Mode=OneWay}" />
                    <TextBlock VerticalAlignment="Center" Foreground="White" Text="{x:Bind BusyText, Mode=OneWay}" />
                </StackPanel>
            </Viewbox>
            <StackPanel Visibility="{x:Bind HasError, Mode=OneWay, Converter={StaticResource visibilityConv}}" VerticalAlignment="Center" Margin="12,0">
                <TextBlock Text="Oops!" Style="{ThemeResource HeaderTextBlockStyle}"/>
                <TextBlock Text="{x:Bind ErrorText, Mode=OneWay}"/>
                <Button Content="Continue" Style="{StaticResource ButtonStyle}" HorizontalAlignment="Center" Tapped="HideError"/>
            </StackPanel>
        </Grid>
    </Controls:ModalDialog.ModalContent>
</Controls:ModalDialog>

然后，当你点击Continue按钮，模态应该消失。

Answer 2

下面是一个基本的对话框实现。

<Controls:ModalDialog x:Name="ModalContainer" 
                      CanBackButtonDismiss="False"
                      DisableBackButtonWhenModal="True" 
                      IsModal="False" 
                      ModalBackground="Blue">

    <!-- content -->
    <Controls:ModalDialog.Content>
        <Controls:HamburgerMenu />
    </Controls:ModalDialog.Content>

    <!-- modal content -->
    <Controls:ModalDialog.ModalContent>
        <views:Busy x:Name="BusyView" />
    </Controls:ModalDialog.ModalContent>

    <!-- optional transition -->
    <Controls:ModalDialog.ModalTransitions>
        <ContentThemeTransition />
    </Controls:ModalDialog.ModalTransitions>

</Controls:ModalDialog>

您可以根据自己的喜好来实现这一点，但我是这样做的。

public static void SetBusy(bool busy, string text = null)
{
    WindowWrapper.Current().Dispatcher.Dispatch(() =>
    {
        Instance.BusyView.BusyText = text;
        Instance.ModalContainer.IsModal = Instance.BusyView.IsBusy = busy;
    });
}

调度程序很重要，因为它是静态的，可以从任何线程调用。请注意，我自定义了繁忙视图的busyText和isBusy值，但这对于您的方法来说是唯一的。重要的部分是将Instance.ModalContainer.IsModal设置为true和false。这是唯一控制ModalDialog控件状态的东西。

希望我的完整样本能帮上忙。

http://aka.ms/template10

祝你好运。