我正在为我的下一个项目寻找主详细信息视图示例。我已经成功编译并运行了 Windows Community Toolkit Sample App 中给出的 masterdetailsview 示例。
来自here我知道
MasterDetailsView 控件以主/细节模式显示项目。它在“主面板”中显示项目的集合，并在“详细信息面板”中显示该项目的详细信息。
我们知道 master-panel 显示在左侧，而 details-panel 在 masterdetailsview 中默认显示在右侧。
我想要交换这两个面板。
非常感谢任何帮助。谢谢
【问题讨论】：
标签： uwp master-detail windows-community-toolkit
您可以更改 MasterDetailsView 的样式以交换 Master 和 Details 面板。在 MasterDetailsView 的样式中，有两列分别代表 Master 和 Details 面板，可以交换布局，交换后处理一些细节。您可以复制以下样式以应用于您的视图。
.xaml:
<Page.Resources>
<Style x:Key="MasterDetailsViewStyle1" TargetType="controls:MasterDetailsView">
<Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource ApplicationForegroundThemeBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:MasterDetailsView">
<Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="NoSelectionWide" To="HasSelection">
<Storyboard>
<DrillInThemeAnimation ExitTargetName="NoSelectionPresenter" EntranceTargetName="SelectionDetailsPanel"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="NoSelectionNarrow" To="HasSelection">
<Storyboard>
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.25" From="200" Storyboard.TargetName="DetailsPresenterTransform" Storyboard.TargetProperty="X" To="0">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.25" From="0" Storyboard.TargetName="SelectionDetailsPanel" Storyboard.TargetProperty="Opacity" To="1">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualTransition>
<VisualTransition From="HasSelection" To="NoSelectionWide">
<Storyboard>
<DrillOutThemeAnimation ExitTargetName="SelectionDetailsPanel" EntranceTargetName="NoSelectionPresenter"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="HasSelection" To="NoSelectionNarrow">
<Storyboard>
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.25" From="0" Storyboard.TargetName="DetailsPresenterTransform" Storyboard.TargetProperty="X" To="200"/>
<DoubleAnimation BeginTime="0:0:0.08" Duration="0:0:0.17" From="1" Storyboard.TargetName="SelectionDetailsPanel" Storyboard.TargetProperty="Opacity" To="0">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation BeginTime="0:0:0.0" Duration="0:0:0.25" From="0" Storyboard.TargetName="MasterPanel" Storyboard.TargetProperty="Opacity" To="1">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="NoSelectionWide">
<VisualState.Setters>
<Setter Target="SelectionDetailsPanel.Visibility" Value="Collapsed"/>
<Setter Target="MasterPanel.Visibility" Value="Visible"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="HasSelectionWide">
<VisualState.Setters>
<Setter Target="NoSelectionPresenter.Visibility" Value="Collapsed"/>
<Setter Target="MasterPanel.Visibility" Value="Visible"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="HasSelectionNarrow">
<VisualState.Setters>
<Setter Target="MasterPanel.Visibility" Value="Collapsed"/>
<Setter Target="NoSelectionPresenter.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NoSelectionNarrow">
<VisualState.Setters>
<Setter Target="NoSelectionPresenter.Visibility" Value="Collapsed"/>
<Setter Target="SelectionDetailsPanel.Visibility" Value="Collapsed"/>
<Setter Target="MasterPanel.Visibility" Value="Visible"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="WidthStates">
<VisualState x:Name="NarrowState">
<VisualState.Setters>
<Setter Target="MasterColumn.Width" Value="*"/>
<Setter Target="DetailsColumn.Width" Value="0"/>
<Setter Target="DetailsPanel.(Grid.Column)" Value="1"/>
<Setter Target="NoSelectionPresenter.Visibility" Value="Collapsed"/>
<Setter Target="MasterPanel.BorderThickness" Value="0"/>
<Setter Target="MasterPanel.Width" Value="NaN"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideState"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="RootPanel">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="DetailsColumn" Width="*"/>
<ColumnDefinition x:Name="MasterColumn" Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid x:Name="MasterPanel" Grid.Column="1" Background="{TemplateBinding MasterPaneBackground}" BorderThickness="1,0,0,0" BorderBrush="{TemplateBinding BorderBrush}" Width="{TemplateBinding MasterPaneWidth}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding MasterHeaderTemplate}" Content="{TemplateBinding MasterHeader}" Margin="12,0" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
<ListView x:Name="MasterList" ItemContainerStyleSelector="{TemplateBinding ItemContainerStyleSelector}" ItemContainerStyle="{TemplateBinding ItemContainerStyle}" IsTabStop="False" ItemTemplate="{TemplateBinding ItemTemplate}" ItemsSource="{TemplateBinding ItemsSource}" ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}" Grid.Row="1" SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
<Grid x:Name="MasterCommandBarPanel" Grid.Row="2"/>
</Grid>
<Grid x:Name="DetailsPanel">
<ContentPresenter x:Name="NoSelectionPresenter" ContentTemplate="{TemplateBinding NoSelectionContentTemplate}" Content="{TemplateBinding NoSelectionContent}"/>
<Grid x:Name="SelectionDetailsPanel">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.RenderTransform>
<TranslateTransform x:Name="DetailsPresenterTransform"/>
</Grid.RenderTransform>
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="MasterDetailsBackButton" Background="Transparent" Height="44" Visibility="Collapsed" Width="48">
<SymbolIcon Symbol="Back"/>
</Button>
<ContentPresenter x:Name="DetailsHeaderPresenter" ContentTemplate="{TemplateBinding DetailsHeaderTemplate}" Content="{TemplateBinding DetailsHeader}" Grid.Column="1"/>
</Grid>
<ContentPresenter x:Name="DetailsPresenter" Background="{TemplateBinding Background}" ContentTemplate="{TemplateBinding DetailsTemplate}" Grid.Row="1"/>
<Grid x:Name="DetailsCommandBarPanel" Grid.Row="2"/>
</Grid>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
用法：
<Grid>
<controls:MasterDetailsView Style="{StaticResource MasterDetailsViewStyle1}" ...>
......
</controls:MasterDetailsView>
</Grid>
【讨论】：