如何在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屬性使后退按鈕可見或不可見。