未加星标

UWP Split view deep dive ( the story of desktop mode or mobile mode )

字体大小 | |
[系统(windows) 所属分类 系统(windows) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

So by now most people will know that I’m ‘still’ busy creating a Strava app for UWP called Kliva ( yes it is Open Source here… ).

Now the main purpose for using UWP was the fact that we could create 1 app that can be used on desktop/tablet pc’s and mobile phones!

Thanks to the new way of using Visual States in XAML we can tweak our design like we want depending on the size of the screen real estate.

All fine and dandy, but depending on the form factor it could also be that we need to navigate in a different way, Microsoft illustrated this by defining a Stacked Pattern and a Side-by-side pattern.

Read up on all the details here…

Now how can we as devs handle this difference in navigation? Well let me show you how we handled it in Kliva.

First we defined our own ApplicationFrame ( inherits from Frame ).

public class KlivaApplicationFrame : Frame { public KlivaApplicationFrame() { Navigated += OnNavigated; } public void ShowLoading(bool isLoading) { VisualStateManager.GoToState(this, isLoading ? "Loading" : "Normal", true); } private void OnNavigated(object sender, windows.UI.Xaml.Navigation.NavigationEventArgs e) { var pageType = e.Content.GetType(); ViewModelLocator.Get<SidePaneViewModel>().ShowHide(pageType); } }

You’ll notice we do 2 things here, enable a Loading mode if needed and when a page is Navigated we trigger some code in a ViewModel.

Let’s deconstuct this later, I’ll first show you the actual frame setup…

<StyleTargetType="controls:KlivaApplicationFrame"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="IsTabStop" Value="False" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="controls:KlivaApplicationFrame"> <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="{Binding SidePane, Source={StaticResource Locator}}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="Loading"> <VisualState.Setters> <Setter Target="LoadingGrid.Visibility" Value="Visible" /> <Setter Target="LoadingControl.IsLoading" Value="True" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <SplitView x:Name="SidePane" DisplayMode="{Binding DisplayMode, Mode=TwoWay}" OpenPaneLength="{ThemeResource SplitViewOpenPaneThemeLength}" CompactPaneLength="{ThemeResource SplitViewCompactPaneThemeLength}" IsPaneOpen="{Binding IsPaneOpen, Mode=TwoWay}" PaneBackground="{StaticResource KlivaMainBrush}"> <SplitView.Pane> <controls:SidePaneControl Width="{ThemeResource SplitViewOpenPaneThemeLength}" VerticalContentAlignment="Stretch" /> </SplitView.Pane> <SplitView.Content> <ContentControl Content="{TemplateBinding Content}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> </SplitView.Content> </SplitView> <Grid x:Name="LoadingGrid" Visibility="Collapsed" Background="{StaticResource LoadingBackground}"> <controls:LoadingControl x:Name="LoadingControl" IsLoading="False" /> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

So our frame will always consist of a SplitView control and the actual pages of our app will be rendered inside the SplitView.Content part!

We are using the SplitView control for the Side-by-side pattern reason, we will however need to adjust this in mobile mode, again more on this later ( yep going to be a long post )

More importantly, we are now able to sneak in a full app wide loading overlay control. In other words, each time when needed, we will present an overlay with a progress ring, to indicate the app is still processing. By putting it here, inside the boilerplate code of the ApplicationFrame, it is available for all pages in the app!

Remember the code in the KlivaApplicationFrame? There is a method called ShowLoading(bool isLoading), this will put the Loading Grid in the correct VisualState ensuring it is visible or not and will also trigger the progress ring ( inside the LoadingControl ) to start.

The loading control itself is a user control that is nothing more than some text and a progress ring as show below…

<ViewboxHeight="32" HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinitionWidth="Auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <ProgressRingWidth="12" Height="12" Foreground="White" IsActive="{x:Bind IsLoading, Mode=OneWay}" /> <TextBlockGrid.Column="1" Margin="12,0,0,0" VerticalAlignment="Center" Style="{StaticResource BaseWhiteTextBlock}" FontFamily="{StaticResource OpenSansFontSemibold}" FontSize="12" Text="loading..." /> </Grid> </Viewbox>

But the real magic is in it’s code behind

public sealedpartialclass LoadingControl : UserControl { public static readonlyDependencyPropertyIsLoadingProperty = DependencyProperty.Register(nameof(IsLoading), typeof(bool), typeof(LoadingControl), new PropertyMetadata(false)); public bool IsLoading { get { return (bool)GetValue(IsLoadingProperty); } set { SetValue(IsLoadingProperty, value); } } public LoadingControl() { this.InitializeComponent(); } public static void SetLoading(bool isLoading) { var action = Windows.ApplicationModel.Core.CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { var window = Window.Current.Contentas KlivaApplicationFrame; window?.ShowLoading(isLoading); }); } }

We added the IsLoading property, so we can access it in our XAML like we do in the VisualStates of the KlivaApplicationFrame.

But we also added a static method SetLoading(bool isLoading), we need this so that we can trigger the whole process of ac

本文系统(windows)相关术语:三级网络技术 计算机三级网络技术 网络技术基础 计算机网络技术

主题: WindowsUW
分页:12
转载请注明
本文标题:UWP Split view deep dive ( the story of desktop mode or mobile mode )
本站链接:http://www.codesec.net/view/481206.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 系统(windows) | 评论(0) | 阅读(34)