Question

在我的MasterDetailsView中添加文本视图后，我注意到该项目存在异常，可能给用户带来不便。为了用户体验（UX）的利益并防止用户感到困惑，当MasterDetailsView仅显示“详细信息”窗格（而不显示“主”窗格）时，是否可以禁用命令栏上的后退按钮？通常是在窗口被捕捉或小于特定宽度时+如果两个窗格都显示，则我希望命令栏后退按钮重新出现

主窗格（快照/短窗口模式）

“详细信息”窗格（快照/短窗口模式）

XAML（MasterDetailsView页面-在主页面内的Frame中加载）

<Grid x:Name="RootGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Margin="0,0,0,20" Grid.Row="0">
        <TextBlock x:Name="txtMDPageTitle" Text="Mail" x:FieldModifier="public" Style="{StaticResource HeaderTextBlockStyle}" />
        <TextBlock x:Name="txtMDPageSubtitle" Text="name.surname@domain.com" x:FieldModifier="public" Style="{StaticResource SubheaderTextBlockStyle}"/>
    </StackPanel>
    <controls:MasterDetailsView
        x:Name="MyMasterDetailsView"
        Grid.Row="1"
        BackButtonBehavior="Automatic"
        CompactModeThresholdWidth="720"
        ItemsSource="{x:Bind Emails}"
        NoSelectionContent="Select an item to view" 
        SelectionChanged="MyMasterDetailsView_SelectionChanged">
        <controls:MasterDetailsView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <StackPanel Grid.Column="0" Margin="0,8">
                        <TextBlock 
                            Style="{ThemeResource SubtitleTextBlockStyle}" 
                            Text="{Binding Name}" />
                        <TextBlock
                            Opacity=".6"
                            Style="{ThemeResource BodyTextBlockStyle}"
                            Text="{Binding Zone}" />
                    </StackPanel>

                    <Button
                        x:Name="MoreBtn"
                        Grid.Column="1"
                        Margin="10"
                        Padding="10"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Top"
                        Background="Transparent"
                        Click="MoreBtn_Click"
                        Command="{Binding ElementName=RootGrid, Path=DataContext.OpenDialog}"
                        CommandParameter="{Binding}"
                        Content="&#xE712;"
                        FontFamily="Segoe MDL2 Assets"
                        Visibility="{Binding ShowButton, Converter={StaticResource MyConveter}}" />
                </Grid>
            </DataTemplate>
        </controls:MasterDetailsView.ItemTemplate>
        <controls:MasterDetailsView.DetailsTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock
                        Margin="12,-6,0,0"
                        Style="{ThemeResource SubtitleTextBlockStyle}"
                        Text="{Binding From}"
                        />
                    <TextBlock
                        x:Name="Body"
                        Margin="0,12,0,0"
                        Style="{ThemeResource BodyTextBlockStyle}"
                        Text="{Binding Body}"
                        TextWrapping="Wrap"
                        />
                </StackPanel>
            </DataTemplate>
        </controls:MasterDetailsView.DetailsTemplate>
        <controls:MasterDetailsView.NoSelectionContentTemplate>
            <DataTemplate>
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                    <TextBlock
                        Margin="0,12"
                        FontSize="24"
                        Text="{Binding}"/>
                </StackPanel>
            </DataTemplate>
        </controls:MasterDetailsView.NoSelectionContentTemplate>
        <controls:MasterDetailsView.MasterCommandBar>
            <CommandBar>
                <AppBarButton Icon="Back" Label="Back" />
                <AppBarButton Icon="Forward" Label="Forward" />

                <CommandBar.Content>
                    <TextBlock Margin="12,14">
                        <Run Text="{Binding Emails.Count}" />
                        <Run Text="Items" />
                    </TextBlock>
                </CommandBar.Content>
            </CommandBar>
        </controls:MasterDetailsView.MasterCommandBar>
        <controls:MasterDetailsView.DetailsCommandBar>
            <CommandBar>
                <AppBarButton Icon="MailReply" Label="Reply" />
                <AppBarButton Icon="MailReplyAll" Label="Reply All" />
                <AppBarButton Icon="MailForward" Label="Forward" />
            </CommandBar>
        </controls:MasterDetailsView.DetailsCommandBar>
    </controls:MasterDetailsView>
</Grid>

C＃（MasterDetailsView页面）

    public sealed partial class MasterDetailPage : Page
    {
        public List<Email> Emails { get; set; }

        public MasterDetailPage()
        {
            this.InitializeComponent();

            this.DataContext = this;
            Emails = MyEmailManager.GetEmails();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            MainPage.Current.BackButton.Visibility = Visibility.Visible;
            MainPage.Current.BackButton.IsEnabled = true;
        }

        private void MyMasterDetailsView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {

        }
    }

    public class Email
    {
        public string From { get; set; }
        public string Body { get; set; }
        public bool ShowButton { get; set; }
    }

    public class MyEmailManager
    {
        public static List<Email> GetEmails()
        {
            var MyEmails = new List<Email>
        {
            new Email
            {
                From = "Steve Johnson",
                Body = "Are you available for lunch tomorrow? A client would like to discuss a project with you.",
                ShowButton = true
            },
            new Email
            {
                From = "Pete Davidson",
                Body = "Don't forget the kids have their soccer game this Friday. We have to supply end of game snacks.",
                ShowButton = false
            },
            new Email
            {
                From = "OneDrive",
                Body = "Your new album.\r\nYou uploaded some photos to your OneDrive and automatically created an album for you.",
                ShowButton = false
            },
            new Email
            {
                From = "Twitter",
                Body = "Here are some people we think you might like to follow:\r\n.@randomPerson\r\nAPersonYouMightKnow",
                ShowButton = true
            }
        };

            return MyEmails;
        }
    }

    public class CommadEventHandler<T> : ICommand
    {
        public event EventHandler CanExecuteChanged;

        public Action<T> action;
        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {
            this.action((T)parameter);
        }
        public CommadEventHandler(Action<T> action)
        {
            this.action = action;

        }
    }
}

XAML（主页）

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

    <CommandBar Grid.Row="0" DefaultLabelPosition="Right">
        <CommandBar.Content>
            <Button 
                x:FieldModifier="public"
                Style="{StaticResource NavigationBackButtonNormalStyle}" 
                Name="BackButton" 
                VerticalAlignment="Top" 
                Click="Back_Click"/>
        </CommandBar.Content>
    </CommandBar>
    <Frame Name="MainFrame" Grid.Row="1" Padding="0"/>
</Grid>

C＃（MainPage）

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        Current = this;

        Frame_Main.Navigate(typeof(MsterDetailPage));
    }

    private void Back_Click(object sender, RoutedEventArgs e)
    {
        On_BackRequested();
    }

    private bool On_BackRequested()
    {
        if (Frame_Main.CanGoBack)
        {
            Frame_Main.GoBack();
            return true;
        }
        return false;
    }

    private void BackInvoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
    {
        On_BackRequested();
        args.Handled = true;
    }
}

Answer 1

MasterDetailView提供ViewStateChanged事件，该事件将在MasterDetailView的显示状态更改时触发。我们可以根据此事件调整MainPage中的CommandBar。

private void MyMasterDetailsView_ViewStateChanged(object sender, MasterDetailsViewState e)
{
    if (e == MasterDetailsViewState.Details)
    {
        MainPage.Current.BackButton.Visibility = Visibility.Collapsed;
        MainPage.Current.BackButton.IsEnabled = false;
    }
    else
    {
        MainPage.Current.BackButton.Visibility = Visibility.Visible;
        MainPage.Current.BackButton.IsEnabled = true;
    }
}

仅在显示“详细信息”窗格时（不显示“主”窗格时）如何在MasterDetailsView中禁用后退按钮

1 个答案: