Question

我想在Shell视图中使用该模式中的按钮关闭Template 10的模态。 Shell.xaml.cs中的close函数被触发，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();

这给了我相同的结果，模态对话框保持打开状态。因此，我认为使用不同的线程看起来有些问题。有人知道这个问题的解决方案吗？顺便说一句：我使用的是最新版本的Template 10 在这里输入代码

Answer 1

要关闭模板10的模态，我们需要将ModalDialog.IsModal属性设置为＆＃34; false＆＃34;。由于您的XAML代码不完整，我猜您使用的是Template 10 Minimal模板。在模板中，它使用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;
    });
}

Dispatcher非常重要，因为它是静态的，可以从任何线程调用。请注意，我自定义了Busy视图的busyText和isBusy值 - 但这对您的方法来说是独一无二的。重要的部分是Instance.ModalContainer.IsModal设置为true和false的位置。这是唯一控制ModalDialog控件状态的东西。

希望我的完整样本会有所帮助。

http://aka.ms/template10

祝你好运。

模板10：模态未关闭

2 个答案: