Czech (Čeština) translation by Tereza Foretová (you can also view the original English article)
Univerzální aplikace pro Windows umožňují zacílit každé zařízení s Windows v jednom řešení. Rozvíjet jednou, sdílet většinu kódu a nasazení na Windows, Windows Phone nebo Xbox.
Cílem je maximalizovat opětovné použití kódu. Můžete sdílet kód, uživatelské ovládací prvky, styly, struny a ostatní aktiva mezi Windows Phone a Windows 8 projekty v aplikaci Visual Studio. To snižuje úsilí potřebné při budování a udržování aplikací pro každý typ zařízení.
Úvod
Z jako vývojář pohledu univerzální aplikace pro Windows není jediný binární soubor, který běží na různých platformách. Spíše to má podobu Visual Studio roztoku obsahujícího více projektů, jeden projekt pro každou cílovou platformu kromě sdílený projekt obsahující kód a zdroje sdílené mezi platformami. Mnoho kódu lze sdílet mezi projekty, stejně jako Windows Phone 8.1 implementuje většinu rozhraní API WinRT, která implementuje Windows 8.1.
Můžete vytvářet aplikace pro Windows Phone Silverlight runtime (verze 8.0 nebo 8.1) nebo WinRT runtime (jeden z univerzálních aplikací pro windows). WinRT runtime umožňuje vytvořit jednu aplikaci, která bude spuštěna v systému Windows, Windows Phone a dokonce i Xbox One.
Použili jsme XAML framework vytvořit aplikaci pro více platforem. V současné verzi je API konvergence 90 %, ale stále tam je že malá sada není Sblíženo ještě. Funkce Windows Phone, k dispozici pouze v rámci programu Silverlight jsou:
- Objektivy podpora
- VoIP podpora
- Úkol sběr fotoaparát
- Rozhraní API schránky
- Zamknout obrazovku tapeta API
V tomto kurzu používám univerzální šablona aplikace systému Windows vytvořit aplikaci Hex hodiny, hodiny přesně hexadecimální. Prochází celý rozsah barev 24 hodin z #000000 na #235959. S každým klíště hodiny aplikace pozadí se změní na barvu odpovídající současné době převedeny na šestnáctkové. Používá stejné provedení jako Hex barevný JS hodiny pro generování hex kód aktuální čas.
Design byl inspirován Windows Phone 7 hodiny tutoriál na Tuts. Zatímco aplikaci hodiny se zaměřuje pouze na Windows Phone, používáme jeho návrh udělat podobnou aplikaci pro Windows Phone 8.1 a Windows 8.1. Následující snímek obrazovky zobrazuje, co budeme stavět.
V tomto tutoriálu budu diskutovat o následujících tématech, které jsou důležité pro vývoj univerzálních aplikací pro Windows:
- struktura univerzálních aplikací pro Windows
- přepnutí spuštění projekty v aplikaci Visual Studio
- přepínač kontext pro univerzální aplikace pro Windows v editoru sady Visual Studio
- Jak psát kód platformy ve sdíleném projektu
- Jak přidat podporu pro systém Windows nebo Windows Phone k existujícímu projektu
- budování univerzální aplikace pro Windows od začátku
1. struktura univerzálních aplikací pro Windows
Univerzální aplikace pro Windows je sbírka tří projektů v složce volitelného řešení. Windows a Windows Phone projekty jsou projekty platformy a jsou zodpovědné za vytváření balíčků aplikací (.appx), zaměřených na příslušných platforem. Tyto projekty obsahují aktiv, které jsou specifické pro platformu cílem.
Sdílený projekt je kontejner pro kód, který běží na obou platformách. Oni nemají binární výstup, ale jejich obsah je dovezl projekty platformy a jako součást procesu sestavení lze generovat balíčky aplikace (.appx).
Snímek níže ukazuje řešení, Visual Studio vytvoří, když zvolíte šablonu projektu pro prázdné aplikace (Universal Apps).
Visual Studio 2013 Update 2 představuje novou funkci, která je univerzální aplikace pro Windows. Stáhněte a nainstalujte tuto aktualizaci dříve, než začnete vytvářet univerzální aplikace pro Windows.
2. přepínání projektů po spuštění
Při spuštění řešení, projekt, který spouští je ten, který je vybrán jako projekt při spuštění. Chcete-li nastavit projekt při spuštění, klepněte pravým tlačítkem myši na uzel projektu v Průzkumníku řešení a vyberte možnost nastavit jako projekt při spuštění. Můžete rychle přepínat projekt při spuštění z ladění cíl drop-down, která nyní vytvoří výčet všech možných projektů v řešení.
Projekt, který si vyberete se zobrazí v tučně v aplikaci Solution Explorer. Cíle k dispozici ladění změnit při přepínání projektů po spuštění.
- Když Windows projekt je projekt při spuštění, ladění cílového rozevíracího seznamu zobrazí možnosti pro Windows simulátor nebo místního počítače.
- Když Windows Phone projekt je projekt při spuštění, drop-down se zobrazí možnosti pro zařízení, stejně jako různé emulátory.
3. kontext rákoska v editoru kódu
Při psaní kódu v sdíleného projektu, můžete použít přepínač kontext projektu v navigačním panelu vyberte platformu, kterou aktivně volíte, který následně upravuje možnosti technologie IntelliSense v editoru kódu.
Pokud používáte rozhraní API v sdílený kód, který není podporován na obou platformách, chybová zpráva při sestavení projektu identifikuje toto rozhraní API. Není nutné budovat projekt potvrďte, že používáte rozhraní API platformy.
Následující obrázek ukazuje příklad varovné ikony a technologie IntelliSense pro typ, který je podporován pouze v aplikacích pro Windows Phone.
4. Cross platformní kód v sdíleného projektu
Ve sdíleném projektu obvykle napíšete kód, který je společný pro obě platformy. Chcete-li izolovat části kódu, které jsou specifické pro platformu, pomocí direktivy #ifdef. Konstanty WINDOWS_APP a WINDOWS_PHONE_APP jsou předdefinovány pro vás.
Podmíněné kompilace konstanty, které slouží k psát kód specifický pro platformu jsou následující:
| C# | WINDOWS_APP | WINDOWS_PHONE_APP |
| C++ | WINAPI_FAMILY_PC_APP | WINAPI_FAMILY_PHONE_APP |
Při psaní kódu v sdíleného projektu, Visual Studio editor kódu používá kontext tohoto cíle jedné platformy, nebo druhé. V jazyce C# IntelliSense, který jste vidět, jak psát kód je specifický pro kontextu editoru kódu, tedy specifické pro systém Windows nebo Windows Phone.
5. Přidání podpory pro Windows/Windows Phone
Pokud již máte existující aplikace Windows 8.1, můžete použít příkaz Přidat Windows Phone 8.1 Chcete-li přidat nový projekt Windows Phone 8.1 a sdílený projekt do řešení. Podobnou možnost je také k dispozici, pokud máte Windows Phone 8.1 aplikace a chcete-li přidat podporu pro Windows 8.1.
Chcete-li přidat podporu pro jeden typ zařízení nebo, v aplikaci Solution Explorer, klepněte pravým tlačítkem myši na projekt a zvolte možnost přidat Windows Phone 8.1 nebo Windows 8.1 Přidat.
Tady Visual Studio přidá nový Windows Phone nebo Windows projektu do roztoku. Sdíleného projektu je automaticky vytvořen pro vás.
Následující obrázek ukazuje řešení po přidání Windows Phone projekt k existujícímu projektu Windows. Sdílený projekt, který je přidán do řešení je zpočátku prázdné.
Všimněte si, že pokud vytváříte aplikace pomocí univerzální Windows aplikace šablony, sdílený projekt již obsahuje soubor App.xaml.
Krok 1: Přesunout soubory do sdíleného projektu
Můžete přesunout jakýkoli kód, který chcete sdílet mezi aplikací na sdíleném projektu. Například můžete přesunout složky společné, DataModel a řetězce na sdíleném projektu. Můžete dokonce přejít App.xaml na sdíleném projektu.
Může se však zobrazit některé chyby kompilátoru o kódu, který přesunete do sdíleného projektu. Tyto chyby lze vyřešit nakonfigurováním svůj nový projekt app mít stejnou sadu odkazů jako počáteční projekt.
Následující obrázek ukazuje stejný odkaz sestavení přidán do obou projektů.
Pokud váš sdílený kód používá rozhraní API, které jsou specifické pro Windows, pomocí direktivy #ifdef s WINDOWS_APP konstantou izolovat tuto část kódu. Použijte konstantu WINDOWS_PHONE_APP izolovat části kódu, které jsou specifické pro Windows Phone 8.1.
Krok 2: Sdílet App.xaml
Když vytvoříte nové řešení pro univerzální aplikace pro Windows, Visual Studio umístí App.xaml ve sdíleném projektu. Je-li převést existující projekt univerzální Windows aplikace, můžete přesunout App.xaml do sdíleného projektu ručně. Budete muset nastavit sestavení akce vlastnost stránky ApplicationDefinition po přesunutí souboru. Zde jsou kroky, které:
- V aplikaci Solution Explorer, v sdíleného projektu vyberte soubor App.xaml.
- Vyberte zobrazení, video vlastnosti okno.
- V Vlastnosti okno, v seznamu akce vyberte ApplicationDefinition.
Také budete muset rozhodnout, jakým způsobem chcete otevřít první stránku aplikace. Pokud sdílíte soubor App.xaml a chcete použít jinou úvodní stránku pro každou aplikaci, budete muset přidat direktivy #ifdef, jak je uvedeno níže.
1 |
#if WINDOWS_APP
|
2 |
if (!rootFrame.Navigate(typeof(HubPage))) |
3 |
#endif
|
4 |
#if WINDOWS_PHONE_APP
|
5 |
if (!rootFrame.Navigate(typeof(WindowsPhoneStartPage))) |
6 |
#endif
|
7 |
{
|
8 |
throw new Exception("Failed to create initial page"); |
9 |
}
|
6. Začněte psát aplikace pro Universal Windows
Krok 1: Nastavení projektu
Za prvé vyberte šablonu projektu pro univerzální aplikace pro Windows v dialogovém okně Nový projekt. Následující obrázek ukazuje univerzální šablony projektu aplikace Windows, které jsou v současnosti k dispozici pro jazyk C#.
Pojmenujte projekt. Budu používat Hex hodiny Pro můj projekt.
Krok 2: Vytvoření uživatelského rozhraní
Z větší části pracovní uživatelské rozhraní probíhá v platforma specifické projekty, umožňuje vytvořit uživatelské rozhraní, které vypadají skvěle na PC, tablety a telefony, ale které sdílejí společná data, zdroje, komponent a dokonce i pohled modely.
Namísto budování samostatné uživatelského rozhraní pro Windows Phone 8.1 a Windows 8.1 verze Hex hodiny Pro, jsem definovat společný návrh ve sdíleném projektu. Musím jen udělat pár změn v XAML aplikaci hodiny na Tuts + aby to fungovalo pro obě platformy.
1 |
<Canvas x:Name="ContentPanel" Margin="12,0,620,0" HorizontalAlignment="Center" Grid.Row="1" RenderTransformOrigin="0.5,0.5"> |
2 |
<Canvas.RenderTransform>
|
3 |
<CompositeTransform Rotation="-30"/> |
4 |
</Canvas.RenderTransform>
|
5 |
<Canvas x:Name="TimeText" Height="315" Canvas.Left="-18" Canvas.Top="288" Width="496" RenderTransformOrigin="0.5,0.5" Opacity="0"> |
6 |
<Canvas.RenderTransform>
|
7 |
<CompositeTransform/>
|
8 |
</Canvas.RenderTransform>
|
9 |
<TextBlock x:Name="TimeHours" TextWrapping="Wrap" Text="12" Canvas.Top="24" Style="{StaticResource TimeTextStyle}" Canvas.Left="-67" Width="267" TextAlignment="Right"/> |
10 |
<TextBlock x:Name="TimeDots" Canvas.Left="204" TextWrapping="Wrap" Text=":" Style="{StaticResource TimeTextStyle}"/> |
11 |
<TextBlock x:Name="TimeMinutes" Canvas.Left="263" TextWrapping="Wrap" Text="59" Canvas.Top="24" Style="{StaticResource TimeTextStyle}" Width="257"/> |
12 |
</Canvas>
|
13 |
<Rectangle x:Name="HorizontalSeparator" Height="4" Canvas.Left="-400" Canvas.Top="295" Width="1020" Fill="White"/> |
14 |
<Rectangle x:Name="VerticalSeparator" Fill="White" Height="469" Canvas.Left="213" Canvas.Top="489" Width="4"/> |
15 |
<TextBlock x:Name="ApplicationTitle" TextWrapping="Wrap" Text="HEX CLOCK PRO" Canvas.Top="271" Foreground="White" FontSize="16" Canvas.Left="18"/> |
16 |
<TextBlock x:Name="SecondsLabel" Height="36" Canvas.Left="23" TextWrapping="Wrap" Text="seconds" Canvas.Top="475" Width="166" TextAlignment="Right" Style="{StaticResource SmallTextStyle}" Margin="0"/> |
17 |
<TextBlock x:Name="TimeSeconds" Height="205" Canvas.Left="3" TextWrapping="Wrap" Text="59" Canvas.Top="505" Width="210" FontSize="186.667" RenderTransformOrigin="0.5,0.5" Opacity="0"> |
18 |
<TextBlock.RenderTransform>
|
19 |
<CompositeTransform/>
|
20 |
</TextBlock.RenderTransform>
|
21 |
</TextBlock>
|
22 |
<TextBlock x:Name="DateText" Height="39" Canvas.Left="208" TextWrapping="Wrap" Text="2012/12/31" Canvas.Top="258" Width="143" FontSize="29.333" Opacity="0"/> |
23 |
</Canvas>
|
Krok 3: Sdílení kódu
Jak je popsáno dříve, kód, který je společný pro obě platformy lze umístit ve sdíleném projektu. Kód, který používá platformu API musí být umístěny v jednom z projektů specifický pro platformu. #ifdef směrnic můžete dokonce do sdíleného souboru zadat kód specifický pro platformu.
Jak Hex hodiny Pro aplikace nepoužívá žádné rozhraní API, které jsou specifické pro platformu, můžu veškerý kód ve sdíleném projektu.
Skrytím stavového řádku
MainPage.xaml.cs ve sdíleném projektu jsme použili #ifdef směrnice izolovat kódu specifické pro Windows Phone. Kód uzavřený do #ifdef skryje stavový řádek na Windows Phone.
1 |
public MainPage() |
2 |
{
|
3 |
this.InitializeComponent(); |
4 |
#if WINDOWS_PHONE_APP |
5 |
ApplicationView.GetForCurrentView().SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow); |
6 |
#endif |
7 |
}
|
Zobrazení aktuálního času
Použil jsem DispatcherTimer třídy k volání počáteční klíště při načítání mřížka LayoutRoot. Objekt timer volá funkci timer_Tick na každé klíště hodiny.
1 |
try
|
2 |
{
|
3 |
DispatcherTimer timer = new DispatcherTimer(); |
4 |
timer.Tick += timer_Tick; |
5 |
timer.Interval = new TimeSpan(0, 0, 0, 1); |
6 |
timer.Start(); |
7 |
timer_Tick(null, null); //Call an initial tick |
8 |
}
|
9 |
catch { } |
Funkce timer_Tick aktualizuje zobrazení času v aplikaci a zároveň platí, že aktualizuje barvu pozadí.
Aktualizace barvu pozadí
Barva pozadí je nastavena na šestnáctkovou barvu, která odpovídá aktuální čas.
1 |
HexColour color = new HexColour(hexTime); |
2 |
SolidColorBrush bgBrush = new SolidColorBrush(Color.FromArgb(color.A, color.R, color.G, color.B)); |
3 |
LayoutRoot.Background = bgBrush; |
Objekt třídy HexColour je inicializován s aktuální čas vrácení odpovídající hodnoty RGB. Konstruktor třídy nastaví HexColour A, R, G, B hodnoty pro zadanou barvu.
1 |
public HexColour(string hexCode) |
2 |
{
|
3 |
if (hexCode == null) |
4 |
{
|
5 |
throw new ArgumentNullException("hexCode"); |
6 |
}
|
7 |
|
8 |
if (!Regex.IsMatch(hexCode, HEX_PATTERN)) |
9 |
{
|
10 |
throw new ArgumentException("Format must be #000000 or #FF000000 (no extra whitespace)", "hexCode"); |
11 |
}
|
12 |
|
13 |
// shave off '#' symbol
|
14 |
hexCode = hexCode.TrimStart('#'); |
15 |
|
16 |
// if no alpha value specified, assume no transparency (0xFF)
|
17 |
if (hexCode.Length != LENGTH_WITH_ALPHA) |
18 |
hexCode = String.Format("FF{0}", hexCode); |
19 |
|
20 |
_color = new Color(); |
21 |
_color.A = byte.Parse(hexCode.Substring(0, 2), NumberStyles.AllowHexSpecifier); |
22 |
if (_color.A < 50) |
23 |
_color.A = 50; |
24 |
_color.R = byte.Parse(hexCode.Substring(2, 2), NumberStyles.AllowHexSpecifier); |
25 |
_color.G = byte.Parse(hexCode.Substring(4, 2), NumberStyles.AllowHexSpecifier); |
26 |
_color.B = byte.Parse(hexCode.Substring(6, 2), NumberStyles.AllowHexSpecifier); |
27 |
}
|
Přidání animace a efekty
Napodobil jsem úvodní animace použité v předchozí aplikaci hodiny na Tuts + a je inicializována při načítání LayoutRoot.
1 |
Storyboard sb = (Storyboard)this.Resources["IntialAnimation"]; |
2 |
sb.BeginTime = TimeSpan.FromSeconds(0.1); |
3 |
sb.Begin(); |
To je vše co potřebujeme k vytvoření Hex hodiny Pro aplikace. Aplikace využívá 100 % sdílený kód. Jen je třeba vytvořit samostatné aplikace balíčky pro obě platformy. Aplikace je velmi podobný na Windows Phone a používá stejný kód jazyka XAML pro své uživatelské rozhraní.
Všimněte si, že jsem přidal všechny XAML a C# kódu v sdíleného projektu, ale když jsem nasadit aplikaci pro Windows nebo Windows Phone app, kód v sdíleného projektu je interně sloučen s projekty specifický pro platformu.
Závěr
Sdílí většinu kódu pro aplikace pro Windows a Windows Phone aplikace a uživatelské rozhraní jsou sice oddělené, jsou natolik podobné, že obě budovy je méně práce než budování dvě uživatelská rozhraní od začátku.
Pokud jsem stavěl Windows Phone verzi Hex hodiny Pro pro Windows Phone 7 nebo 8, to by bylo mnohem více práce, Windows Phone 7 neobsahuje žádné WinRT API a Windows Phone 8 obsahuje pouze malou skupinu.
Windows 10, uvidíme další konvergence, což znamená jeden API – WinRT API – pro více platforem a vysokým stupněm věrnosti mezi prvky uživatelského rozhraní pro každou platformu, která nezabrání vývojáři používající platformu prvků prezentovat nejlepší možné zkušenosti na každém zařízení. Klidně ke stažení zdrojových souborů pro použití jako referenční kurz. Hex hodiny Pro je také k dispozici na Marketplace pro Windows Phone 8.1 a Windows 8.1.
