Snackbar on top of ContentDialog?

[bhdryzgn]

Hello,

I have a Content Dialog opened and i want to show the snackbar. But since its designed to work on NavigationView.ContentOverlay it doesnt seem to show on top of my content dialog. I tried different things like playing with the Panel.ZIndex property and trying to make a ContentDialog.ContentOverlay etc. but it didnt work.

Appreciate a help.

[releaseStars]

我也遇到了同样的问题，虽然我没有找到同类型的答案，但是我观察源码发现，可以针对“SnackbarPresenter”类型创建扩展方法show来实现这个功能。就像SnackbarServices中一样:

SnackBarPresenterExt 创建扩展方法

public static class SnackBarPresenterExt
{
    public static TimeSpan _defaultTimeOut = TimeSpan.FromSeconds(5);

    public static void Show(
        this SnackbarPresenter presenter,
        string title,
        string message,
        ControlAppearance appearance,
        TimeSpan timeout,
        IconElement? icon = null)
    {
        if (presenter is null)
        {
            throw new InvalidOperationException($"The SnackbarPresenter was never set");
        }

        var snackbar = new Snackbar(presenter);

        snackbar.SetCurrentValue(Snackbar.TitleProperty, title);
        snackbar.SetCurrentValue(System.Windows.Controls.ContentControl.ContentProperty, message);
        snackbar.SetCurrentValue(Snackbar.AppearanceProperty, appearance);
        snackbar.SetCurrentValue(Snackbar.IconProperty, icon);
        snackbar.SetCurrentValue(
            Snackbar.TimeoutProperty,
            timeout.TotalSeconds == 0 ? _defaultTimeOut : timeout
        );

        snackbar.Show(true);
    }
}

xaml 代码

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="1" Orientation="Vertical" 
                HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel.Resources>
            <ObjectDataProvider x:Key="ERestoreDBType"
                                    MethodName="GetValues"
                                    ObjectType="{x:Type sys:Enum}">
                <ObjectDataProvider.MethodParameters>
                    <x:Type TypeName="enums:ERestoreDBType"/>
                </ObjectDataProvider.MethodParameters>
            </ObjectDataProvider>
            <Style x:Key="WrapTextBox" TargetType="ui:TextBox" BasedOn="{StaticResource {x:Type ui:TextBox}}">
                <Setter Property="TextWrapping" Value="Wrap"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Width" Value="300"/>
            </Style>
            <Style TargetType="StackPanel">
                <Setter Property="Orientation" Value="Horizontal"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Margin" Value="10"/>
                <Style.Resources>
                    <Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
                        <Setter Property="VerticalAlignment" Value="Center"/>
                        <Setter Property="Width" Value="120"/>
                        <Setter Property="Margin" Value="10,0"/>
                    </Style>
                    <Style TargetType="ComboBox"  BasedOn="{StaticResource {x:Type ComboBox}}">
                        <Setter Property="VerticalAlignment" Value="Center"/>
                        <Setter Property="Width" Value="300"/>
                        <Setter Property="ItemTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <TextBlock Text="{Binding .}"/>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                    <Style TargetType="TextBox"  BasedOn="{StaticResource {x:Type TextBox}}">
                        <Setter Property="VerticalAlignment" Value="Center"/>
                        <Setter Property="Width" Value="300"/>
                    </Style>
                    <Style TargetType="ui:TextBox" BasedOn="{StaticResource WrapTextBox}"/>
                </Style.Resources>
            </Style>
        </StackPanel.Resources>
        <StackPanel>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Column="0" Grid.Row="0" Text="File"/>
                <ui:Button Grid.Column="1" Grid.Row="0"
                        Command="{Binding ViewModel.OpenFileCommand}"
                        Content="Sel a bak file" />
                <ui:TextBlock Grid.Column="1" Grid.Row="1"
                        FontSize="12"
                        Width="200" Margin="3 5 0 0"
                        Visibility="{Binding ViewModel.OpenedFilePathVisibility}"
                        FontTypography="BodyStrong"
                        Text="{Binding ViewModel.OpenedFilePath}"
                        ToolTip="{Binding ViewModel.OpenedFilePath}"
                        TextTrimming="CharacterEllipsis"
                        />
            </Grid>
        </StackPanel>
        <StackPanel Visibility="{Binding ViewModel.MoreVisibility}">
            <TextBlock Text="Title"/>
            <TextBox Text="{Binding ViewModel.Title, Mode=TwoWay}" />
        </StackPanel>
        <StackPanel Visibility="{Binding ViewModel.MoreVisibility}">
            <TextBlock Text="Factory"/>
            <ui:AutoSuggestBox Icon="{x:Null}"
                    Text="{Binding ViewModel.Factory, Mode=TwoWay, UpdateSourceTrigger=LostFocus}"
                    OriginalItemsSource="{Binding ViewModel.Factories, Mode=OneWay}" />
        </StackPanel>
        <StackPanel Visibility="{Binding ViewModel.MoreVisibility}">
            <TextBlock Text="Machine Model"/>
            <ui:AutoSuggestBox Icon="{x:Null}" 
                    Text="{Binding ViewModel.MachineModel, Mode=TwoWay}"
                    OriginalItemsSource="{Binding ViewModel.Machines, Mode=OneWay}" />
        </StackPanel>
        <StackPanel>
            <TextBlock Text="Instance Name"/>
            <ComboBox ItemsSource="{Binding ViewModel.Instances, Mode=TwoWay}" 
                          SelectedItem="{Binding ViewModel.SelInstance, Mode=TwoWay}" />
        </StackPanel>
        <StackPanel>
            <TextBlock Text="Database Name"/>
            <ComboBox ItemsSource="{Binding ViewModel.DbNames, Mode=TwoWay}"
                          SelectedItem="{Binding ViewModel.SelDbName, Mode=TwoWay}"/>
        </StackPanel>
        <StackPanel>
            <TextBlock Text="Option Type"/>
            <ComboBox ItemsSource="{Binding Source={StaticResource ERestoreDBType}}"
                          SelectedItem="{Binding ViewModel.OptionType, Mode=TwoWay}"/>
        </StackPanel>
        <StackPanel Visibility="{Binding ViewModel.MoreVisibility}">
            <TextBlock Text="Remark"/>
            <ui:TextBox Text="{Binding ViewModel.Remark, Mode=TwoWay}"
                            AcceptsReturn="True"
                            TextWrapping="Wrap"
                            PlaceholderText="填写描述..."
                            MinHeight="100"
                            />
        </StackPanel>
    </StackPanel>
    <ui:SnackbarPresenter Name="snackbarPresenter" />
</Grid>

xaml.cs代码

protected override void OnButtonClick(ContentDialogButton button)
{
    if (button != ContentDialogButton.Primary)
    {
        base.OnButtonClick(button);
        return;
    }

    ViewModel.CheackPrimaryData()
        .MatchTap(
        _ => base.OnButtonClick(button),
        _ =>
        {
            snackbarPresenter.Show(
                title: "警告",
                message: ViewModel.ErrInfo!,
                appearance: ControlAppearance.Caution,
                timeout: _snackbarTimeout);
        });
}

[releaseStars]

我找了更好的方法，来实现我想要的效果，代码如下:

在你的自定义ContentDialog中修改TitleTemplate

<ui:ContentDialog.TitleTemplate>
    <DataTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <StackPanel>
                <TextBlock Text="{Binding}" FontSize="20" FontWeight="SemiBold" />
            </StackPanel>
            <ui:InfoBar Margin="0,20"
                Title="警告"
                Grid.Row="1"
                IsOpen="{Binding ViewModel.InfoBarOpened, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=ui:ContentDialog}}"
                Message="{Binding ViewModel.ErrInfo, RelativeSource={RelativeSource AncestorType=ui:ContentDialog}}"
                Severity="Warning" />
        </Grid>
    </DataTemplate>
</ui:ContentDialog.TitleTemplate>

实现效果