Как показать UWP ShellBackButton как кнопку в Template10?

Question

Мне нужно показать UWP ShellBackButton как кнопку в моем пользовательском элементе управления в Template10.

ShellBackButton - это кнопка "Назад" в левом верхнем углу приложения, но мне нужно показать ее как кнопку на главном экране, чтобы пользователь мог нажать на нее.

Я исследовал это, но не мог найти, как это сделать.

Есть недвижимость в App.xaml.cs показать кнопку в левом верхнем углу, то есть ShowShellBackButton и я хочу, чтобы это было кнопкой в ​​моем представлении управления пользователями.

Answer 1

Что касается комментариев, я думал, что совершенно неактуально сохранять старый ответ. Итак, обновленный ответ ниже:

Контроль

Это просто фиктивная версия элемента управления, и вам нужно будет добавить визуальные состояния и другие ресурсы, ресурсы и пользовательские стили, но скелет будет выглядеть следующим образом:

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>

Выше приведены две необходимые вещи, необходимые для правильной работы элемента управления.

Позже вы можете отредактировать словарь ресурсов, чтобы персонализировать элемент управления, и как только вы все выяснили, вы можете заморозить его и, когда вы используете его в других приложениях, вы можете просто переопределить стиль по умолчанию вместо того, чтобы каждый раз вручную изменять словарь ресурсов.

Надеюсь, это поможет. Я загрузил копию шаблона 10 версии решения на GitGub

Answer 2

Template10 предоставляет сервис навигации через Bootstrapper (и отображает его через свойство ViewModelBase.NavigationService), который вы можете использовать для управления обратной навигацией в вашей кнопке:

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

См. https://github.com/Windows-XAML/Template10/wiki/Bootstrapper для получения дополнительной информации о INavigationService и Bootstrapper.

Answer 3

Наконец-то у меня все заработало. Вот решение для дальнейшего использования, если вы когда-либо застревали в этой ситуации.

Следующее должно быть внутри вашей ViewModel, наследующей ViewModelBase в Template10.

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

Вы также можете сделать так, чтобы кнопка "Назад" была видимой или нет, используя свойство CanGoBack.