UWP主细节视图交换主/细节面板

我正在为我的下一个项目寻找主细节视图示例。我已成功编译并运行Windows社区工具包示例应用程序中给出的masterdetailsview示例

据我所知

MasterDetailsView控件以master/details模式显示项目。它显示“主面板”中的项目集合以及“详细信息面板”中该项目的详细信息

正如我们所知，在masterdetailsview中，主面板默认显示在左侧，详细面板默认显示在右侧

我想要的是交换这两个面板

---

非常感谢您的帮助。谢谢

您可以将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>