ユニバーサル windows アプリ開発

http://www.microsoft.com/en-us/news/bythenumbers/index.html




App Model Tools StoreAPIs

common,

similar rendering

Button

Slider

ToggleSwitch

ProgressBar

etc (many more)

common,

different content

Hub

ListView

GridView

etc.

common,

different rendering

DatePicker

TimePicker

CommandBar

AppBar

etc.

unique

SearchBox

Pivot

ContentDialog

AutoSuggestBox

etc.

User Interface Tools Store

User Interface App Model StoreAPIs

User Interface App Model ToolsAPIs

アプリパッケージの作成

アプリパッケージの登録

ストアでの公開

アプリの開発

ユニバーサルWindowsアプリ開発

最初の一歩

Classes Structs Interfaces

Windows 8.1 SDK 566 119 59

Windows Phone 8.1 SDK 624 131 57

+58 +12 -2

#if WINDOWS_APPvar result = VisualStateManager.GoToState(this, "Windows", false);

#elif WINDOWS_PHONE_APPvar result = VisualStateManager.GoToState(this, "WindowsPhone", false);

#endif

<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:PhotoSearch"><Style x:Key="MonTextblock" TargetType="TextBlock">

<Setter Property="Foreground" Value="DeepPink"></Setter></Style><DataTemplate x:Name="APhotoTemplate">

<Grid><Image Source="{Binding Path}" VerticalAlignment="Top" /><TextBlock TextWrapping="Wrap" Text="{Binding Title}" FontSize="28" Margin="10"/>

</Grid></DataTemplate>

</ResourceDictionary>

<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:PhotoSearch"><Style x:Key="MonTextblock" TargetType="TextBlock">

<Setter Property="Foreground" Value="Red"></Setter></Style><DataTemplate x:Name="APhotoTemplate">

<Grid><Image Source="{Binding Path}" VerticalAlignment="Top" />

</Grid></DataTemplate>

</ResourceDictionary>

PhotoSearch.Windows/CustomDictionary.xaml

PhotoSearch.WindowsPhone/CustomDictionary.xaml

PhotoSearch.Shared/MainPage.xaml

<TextBlock Text="{Binding Title}"Style="{StaticResource MonTextblock}"/>

<FlipView ItemsSource="{Binding Items}"ItemTemplate="{StaticResource APhotoTemplate}">

Partial classescleaner code

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

References

App1_Shared

ViewModel.cs

ViewModel.cs

ViewModel.cs

App1_Shared

App1_Shared

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_PCL

References

App1_PCL

App1_PCL

IAbstraction.cs

PhoneImpl.cs

WinImpl.cs

Inversion of Control (IOC)purist; works also with PCL

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_Shared

References

App1_Shared

App1_Shared

#if blockquick and dirty

#if WINDOWS_PHONE_APPStatusBar.GetForCurrentView().HideAsync();Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareBackPressed;

#endif

#if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APPStatusBar::GetForCurrentView()->HideAsync();

#endif


Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

References

App1_Shared

ViewModel.cs

ViewModel.cs

ViewModel.cs

App1_Shared

App1_Shared

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_PCL

References

App1_PCL

App1_PCL

IAbstraction.cs

PhoneImpl.cs

WinImpl.cs


Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_Shared

References

App1_Shared

App1_Shared


#if WINDOWS_PHONE_APPStatusBar.GetForCurrentView().HideAsync();

#endif

// I can provide my own implementation of the missing APIs !!!namespace Windows.UI.ViewManagement{

public class StatusBar{

static StatusBar dummy = new StatusBar();public static StatusBar GetForCurrentView() { return dummy; }public async Task HideAsync() {}

}}


Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

References

App1_Shared

ViewModel.cs

ViewModel.cs

ViewModel.cs

App1_Shared

App1_Shared

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_PCL

References

App1_PCL

App1_PCL

IAbstraction.cs

PhoneImpl.cs

WinImpl.cs


Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_Shared

References

App1_Shared

App1_Shared


// Windows¥ViewModel.cspublic partial class ViewModel{

async Task HideStatusBarAsync() { }}

// Phone¥ViewModel.cspublic partial class ViewModel{

async Task HideStatusBarAsync(){

await StatusBar.GetForCurrentView().HideAsync();

}}

// Shared¥Class1.csawait viewModel.HideStatusBarAsync();


Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

References

App1_Shared

ViewModel.cs

ViewModel.cs

ViewModel.cs

App1_Shared

App1_Shared

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_PCL

References

App1_PCL

App1_PCL

IAbstraction.cs

PhoneImpl.cs

WinImpl.cs


Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_Shared

References

App1_Shared

App1_Shared


// Sharedpublic interface IPlatformAbstractionLayer{

Task HideStatusBarAsync();}

await pal.HideStatusBarAsync();

// Windows¥WinImpl.cspublic class WindowsPAL: IPlatformAbstractionLayer{

async Task HideStatusBarAsync() { }}

// Phone¥PhoneImpl.cspublic class PhonePAL : IPlatformAbstractionLayer{

async Task HideStatusBarAsync(){

await StatusBar.GetForCurrentView().HideAsync();

}}

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_Shared

References

App1_Shared

App1_Shared


Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_PCL

References

App1_PCL

App1_PCL

IAbstraction.cs

PhoneImpl.cs

WinImpl.cs



Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

References

App1_Shared

ViewModel.cs

ViewModel.cs

ViewModel.cs

App1_Shared

App1_Shared

2560 x 1440

1920 x 1080

1366 x 768450 x 800

384 x 683

Solution 'App1'

App1_Phone81

App1_Windows81

AdaptivePage.xaml

References

App1_Shared

References

App1_Shared

App1_Shared

Adaptive XAMLcheap and easy

Solution 'App1'

App1_Phone81

App1_Windows81

References

App1_Shared

References

App1_Shared

App1_Shared

NarrowPage.xaml

WidePage.xaml

Form-factor-specifictailored

Solution 'App1'

App1_Phone81

App1_Windows81

AdaptivePage.xaml

References

App1_Shared

References

App1_Shared

App1_Shared

Solution 'App1'

App1_Phone81

App1_Windows81

TabletPage.xaml

References

App1_Shared

References

App1_Shared

App1_Shared

PhonePage.xaml


Solution 'App1'

App1_Phone81

App1_Windows81

References

App1_Shared

References

App1_Shared

App1_Shared

NarrowPage.xaml

WidePage.xaml


#if WINDOWS_PHONE_APProotFrame.Navigate(typeof(PhonePage));

#elserootFrame.Navigate(typeof(TabletPage));

#endif

Solution 'App1'

App1_Phone81

App1_Windows81

AdaptivePage.xaml

References

App1_Shared

References

App1_Shared

App1_Shared

Solution 'App1'

App1_Phone81

App1_Windows81

TabletPage.xaml

References

App1_Shared

References

App1_Shared

App1_Shared

PhonePage.xaml


Solution 'App1'

App1_Phone81

App1_Windows81

References

App1_Shared

References

App1_Shared

App1_Shared

NarrowPage.xaml

WidePage.xaml


static class PlatformAbstractionLayer {public static Type GetMainPageType() {

return typeof(NarrowPage);}

}

var t = PlatformAbstractionLayer.GetMainPageType();rootFrame.Navigate(t);

static class PlatformAbstractionLayer {public static Type GetMainPageType() {

return typeof(WidePage);}

}

Solution 'App1'

App1_Phone81

App1_Windows81

AdaptivePage.xaml

References

App1_Shared

References

App1_Shared

App1_Shared


Solution 'App1'

App1_Phone81

App1_Windows81

References

App1_Shared

References

App1_Shared

App1_Shared

NarrowPage.xaml

WidePage.xaml


// プラットフォームの判定と// 利用するクラスの決定

if (! {

} else {

}

<!– Shared.UI.Hub, Shared.UI.HubSectionで抽象化 ->

<section "Shared.UI.Hub">

<div "Shared.UI.HubSection"

"{header: 'Section1'}">

<div "Controls.Section1"></div>

</div>

<div "Shared.UI.HubSection"

"{header: 'Section2'}">

<div "Controls.Section2"></div>

</div>

</section>

// Shared.UI.Hub, Shared.UI.HubSectionの定義

WinJS.Namespace.define('Shared.UI', {

Hub: hub,

HubSection: hubSection

});

Phone アプリ – PFN 12345

roaming Local Temp

Windowsアプリ – PFN 12345

roamingLocalTempLocal

Cache

PFN 12345

ローミング

OneDrive stores up to 100kb of roaming

data per app (not included in user quota).

If app exceeds the limit, sync stops.

Sync engine transfers data

periodically based on

triggers (user idle, battery,

network, etc.)

Other clients are notified of

updated data via Windows

Notification Service. If app is

running when sync occurs, an

event is raised.

private void OnSuspending(object sender, SuspendingEventArgs e){

// TODO: Save application state and stop any background activityApplicationData.Current.RoamingSettings.Values["Hoge"] = model.Hoge;ApplicationData.Current.RoamingSettings.Values["Foo"] = model.Foo;

}

// TODO: Load state from previously suspended applicationmodel.Hoge = (bool?)ApplicationData.Current.RoamingSettings.Values["Hoge"] ?? false;model.Foo = (double?)ApplicationData.Current.RoamingSettings.Values["Foo"] ?? 1.0;

ユニバーサル windows アプリ開発

Technology