如何在Template10中将UWP ShellBackButton显示为按钮？

Question

我需要在Template10的用户控件中将UWP ShellBackButton显示为按钮。

ShellBackButton是应用程序左上方的后退按钮，但是我需要在主屏幕上将其显示为按钮，以便用户可以单击它。

我已经对此进行了研究，但是找不到如何执行此操作。

App.xaml.cs有一个属性可在左上角显示按钮，即ShowShellBackButton ，我想在用户控件视图中将其作为按钮。

Answer 1

Template10通过Bootstrapper提供导航服务（并通过ViewModelBase.NavigationService属性将其浮出水面），您可以使用该服务来处理按钮中的向后导航：

if ( NavigationService.CanGoBack ) NavigationService.GoBack();

有关INavigationService和Bootstrapper的更多详细信息，请参见https://github.com/Windows-XAML/Template10/wiki/Bootstrapper#navigation-service 。

Answer 2

根据评论，我认为保留旧答案完全不相关。 因此，更新后的答案如下：

控制

这只是控件的基本虚拟版本，您将需要添加视觉状态以及其他资源，资产和自定义样式，但其骨架如下所示：

C＃

public sealed class MyDummyControl : Control
{

    #region fields
    private const string primaryIconName = "PrimaryIcon";
    #endregion fields

    #region UIElements
    private AppBarButton PrimaryIcon;
    #endregion UIElements

    #region Events

    public event Action PrimaryButtonClicked;

    #endregion Events

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        PrimaryIcon = this.GetTemplateChild(primaryIconName) as AppBarButton;

        //in cases with c# versions lower than 6.0
        //consider replacing the null conditional check(?) with the tradional
        //if(BackRequested!=null) and 
        //the lambda's and annonymous methods with { } and methodName()
        if (PrimaryIcon != null)
            PrimaryIcon.Click += (s, args) =>
            {
                PrimaryButtonClicked?.Invoke();
            };

    }

    public MyDummyControl()
    {
        this.DefaultStyleKey = typeof(MyDummyControl);
    }

    #region Dependancy Properties


    public UIElement HeaderContent
    {
        get { return (UIElement)GetValue(HeaderContentProperty); }
        set { SetValue(HeaderContentProperty, value); }
    }

    // Using a DependencyProperty as the backing store for HeaderContent.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty HeaderContentProperty =
        DependencyProperty.Register("HeaderContent", typeof(UIElement), typeof(MyDummyControl), new PropertyMetadata(null));



    public bool IsPrimaryIconCompact
    {
        get { return (bool)GetValue(IsPrimaryIconCompactProperty); }
        set { SetValue(IsPrimaryIconCompactProperty, value); }
    }

    // Using a DependencyProperty as the backing store for IsPrimaryIconCompact.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty IsPrimaryIconCompactProperty =
        DependencyProperty.Register("IsPrimaryIconCompact", typeof(bool), typeof(MyDummyControl), new PropertyMetadata(false));




    public UIElement Content
    {
        get { return (UIElement)GetValue(ContentProperty); }
        set { SetValue(ContentProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Content.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ContentProperty =
        DependencyProperty.Register("Content", typeof(UIElement), typeof(MyDummyControl), new PropertyMetadata(null));



    public SolidColorBrush HeaderBackground
    {
        get { return (SolidColorBrush)GetValue(HeaderBackgroundProperty); }
        set { SetValue(HeaderBackgroundProperty, value); }
    }

    // Using a DependencyProperty as the backing store for HeaderBackground.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty HeaderBackgroundProperty =
        DependencyProperty.Register("HeaderBackground", typeof(SolidColorBrush), typeof(MyDummyControl), new PropertyMetadata(new SolidColorBrush(Windows.UI.Colors.Gray)));




    public SymbolIcon Icon
    {
        get { return (SymbolIcon)GetValue(IconProperty); }
        set { SetValue(IconProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Icon.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty IconProperty =
        DependencyProperty.Register("Icon", typeof(SymbolIcon), typeof(MyDummyControl), new PropertyMetadata(new SymbolIcon(Symbol.Cancel)));



    public string IconLabel
    {
        get { return (string)GetValue(IconLabelProperty); }
        set { SetValue(IconLabelProperty, value); }
    }

    // Using a DependencyProperty as the backing store for IconLabel.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty IconLabelProperty =
        DependencyProperty.Register("IconLabel", typeof(string), typeof(MyDummyControl), new PropertyMetadata(string.Empty));

    #endregion Dependancy Properties


}

创建控件后，现在需要向其添加默认样式： 资源字典

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="using:ShellBackButtonDummy.Controls">

<Style TargetType="Controls:MyDummyControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Controls:MyDummyControl">
                <Grid x:Name="layoutRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" >

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <Grid Name="HeaderBanner" Background="{TemplateBinding HeaderBackground}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <ContentPresenter Content="{TemplateBinding HeaderContent}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                        <AppBarButton x:Name="PrimaryIcon" Icon="{TemplateBinding Icon}" Label="{TemplateBinding IconLabel}" IsCompact="{TemplateBinding IsPrimaryIconCompact}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                    </Grid>

                    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1"/>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

以上是控件正常运行所需的两个必要条件。

稍后，您可以编辑资源字典以个性化控件，一旦弄清所有内容，便可以冻结它，并在其他应用程序中使用它时，您可以覆盖默认样式，而不必每次手动更改资源字典。

我希望这有帮助。 我已在GitGub上上传了该解决方案的模板10版本的副本

Answer 3

终于，我开始工作了。 如果您遇到这种情况，这里是解决方案，供以后参考。

在继承Model10的ViewModelBase的ViewModel中，需要包含以下内容。

var nav = Template10.Common.WindowWrapper.Current().NavigationServices.FirstOrDefault();
        var frame = nav.Frame;
        if (frame.CanGoBack)
            frame.GoBack();

您也可以使用CanGoBack属性使后退按钮可见或不可见。