c# - 如何在仅显示详细信息窗格期间禁用 MasterDetailsView 中的后退按钮(当主窗格不可见时)
问题描述
在向我的 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=""
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#(主页)
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;
}
}
解决方案
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;
}
}
推荐阅读
- javascript - 从子组件调用父方法在vue中不起作用
- javascript - 从节点服务器前端的 mongoDB 对象中提取数据时出现问题。(JavaScript/EJS)
- python - 在python中打印具有特定值的列
- reactjs - 仅在前一个完成后调用 useEffect 中的函数
- python-3.x - on_member_join 无法打印消息
- c++ - 计算偏导数时的分割错误
- azure-devops - 使用 AzureRM 服务连接时如何获取 Azure 订阅 ID?
- flutter - Dart 中的 assert()、异常、错误有什么区别?
- loops - 当我只关心一个变体而不关心变体中的值时,一种惯用的循环匹配方式是什么?
- ruby-on-rails - 如何使用唯一索引允许多个空格(空字符串)?