1

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

我使用的代码：

登陆页面视图模型：

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 在此处输入代码

4

2 回答 2

2

要关闭模板 10 的模态，我们需要将ModalDialog.IsModal属性设置为“false”。由于您的 XAML 代码不完整，我猜您使用的是 Template 10 Minimal 模板。在它IsBusy用来设置ModalDialog.IsModal属性的模板中。但是您似乎IsModal在代码隐藏中使用 control 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按钮时，模态应该消失。

于 2015-12-18T08:07:13.343 回答
1

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

<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

祝你好运。

于 2016-01-29T19:05:42.703 回答