zoukankan      html  css  js  c++  java
  • DeviceFamily XAML Views(一)

    DeviceFamily Veiws 可以为特定的设备(Mobile、Desktop等)制作特定的XAML视图,这种方式可以完全定制XMAL和共享后台代码。

      以 Mobile 和 Desktop 为例:

    • 新建两个文件夹 DeviceFamily-Miobile 和 DeviceFamily-Desktop ;

                         

    • 然后在两个文件夹中都添加一个 MainPage.xaml ;

                     

    • 如果在 Mobile 设备上运行应用程序,它将从DeviceFamily-Mobile/MainPage.xaml 加载 XMAL; 如果在 Desktop 设备上运行应用程序,它将从DeviceFamily-Desktop/MainPage.xaml 加载 XMAL; 对于其他设备将加载主文件夹下的 MainPage.xaml;
    • Example
    • DeviceFamily-Mobile/MainPage.xaml
     1 Page
     2     x:Class="_DeviceFamily.DeviceFamily_Mobile.MainPage"
     3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     5     xmlns:local="using:_DeviceFamily.DeviceFamily_Mobile"
     6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     8     mc:Ignorable="d">
     9 
    10     <Grid Background="Blue">
    11         <TextBlock Text="Hello DeviceFamily-Mobile" VerticalAlignment="Center" FontSize="24" />
    12     </Grid>
    13 </Page>
    • Mobile 上的运行效果

                             

    • DeviceFamily-Desktop/MainPage.xaml
     1 <Page
     2     x:Class="_DeviceFamily.DeviceFamily_Desktop.MainPage"
     3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     5     xmlns:local="using:_DeviceFamily.DeviceFamily_Desktop"
     6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     8     mc:Ignorable="d">
     9 
    10     <Grid Background="Red">
    11         <TextBlock VerticalAlignment="Center" Text="Hello DeviceFamily-Desktop" FontSize="56" />
    12     </Grid>
    13 </Page>
    • Desktop 上的运行效果

                         

    • 主文件下的 MainPage.xaml
    <Page
        x:Class="_DeviceFamily.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:_DeviceFamily"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="Yellow">
            <TextBlock VerticalAlignment="Center" Text="Hello DeviceFamily-Desktop" FontSize="48" />
        </Grid>
    </Page>
    •  运行效果(由于没有 Table  之类的第三种设备,所以此运行效果省略 gg)
    GitHub:https://github.com/godfunc
    博客园:http://www.cnblogs.com/godfunc
    Copyright ©2019 Godfunc
  • 相关阅读:
    vue列表排序实现中的this问题
    JavaScript:JSON 和 JS 对象
    vue项目设置每个页面的title
    webpack开发和生产两个环境的配置详解
    关于vuex的理解
    vue的路由配置
    js 的静态获取和动态获取
    7 Dockerfile指令详解 && VOLUME 指令
    HAProxy负载均衡保持客户端和服务器Session亲缘性的3种方式
    haproxy开启日志功能
  • 原文地址:https://www.cnblogs.com/Godfunc/p/5858011.html
Copyright © 2011-2022 走看看