全局调用拆分视图
本文关键字:视图 拆分 调用 全局 | 更新日期: 2023-09-27 17:53:55
我在我的项目中使用菜单的分割视图。我已经实现了下面的代码来设计分屏视图与我的页面
<Grid Background="Gray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="45"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Image Source="Source of the image" HorizontalAlignment="Center" Margin="1 5 0 0"></Image>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="60" Height="60" Background="Transparent" Margin="-10 -20 0 0"
Click="HamburgerButton_Click"/>
</Grid>
<Grid Grid.Column="1">
<TextBlock Text="Heading" HorizontalAlignment="Center" FontSize="30"
Margin="-35 0 0 0" Foreground="White"></TextBlock>
</Grid>
</Grid>
<Grid Grid.Row="2" x:Name="ArticlesGrid" Visibility="Collapsed">
<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
CompactPaneLength="0" OpenPaneLength="220">
<SplitView.Pane>
<ListView x:Name="menuBindList" Background="Gray">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal" Tag="{Binding SectionName}">
<!--<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Margin="-10 0 0 0"/>-->
<TextBlock Text="{Binding TitleofAccess}"
Tag="{Binding SectionName}" FontSize="18"
VerticalAlignment="Center" Tapped="MenuTextBlock_Tapped" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</SplitView.Pane>
<SplitView.Content>
<ScrollViewer Name="articlesScroll">
<Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot"
HeaderTemplate="{StaticResource headerTemplate}"
ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Feeds}" Margin="0,-10,0,10">
</Pivot>
</ScrollViewer>
</SplitView.Content>
</SplitView>
</Grid>
</Grid>
</Grid>
它给出了我想要的输出。但是,我在每个页面中都使用这个分屏视图。我如何使用拆分视图全局每个页面。请给出一些示例来实现
您可以将SplitView
设置为根框架样式。
<Style x:Key="NewFrameStyle" TargetType="Frame">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Frame">
<Grid Background="Gray">
<SplitView>
<SplitView.Pane>
...
</SplitView.Pane>
<SplitView.Content>
...
</SplitView.Content>
</Grid>
</Setter.Value>
</Setter>
</Style>
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
...
Frame rootFrame = Window.Current.Content as Frame;
...
rootFrame.Style = this.Resources["NewFrameStyle"] as Style;
}