Navigacija za Windows 8.1 in Windows Phone 8.1 v MVVM

Pred kratkim sem spisal kodo za navigacijo med stranmi kar iz view modelov, prenašanje parametrov med stranmi, popolnoma ločen od UI-ja in na prenosljiv način. Kot za primer sem objavil izvirno kodo, ki jo lahko uporabite tudi v svojih lastnih projektih ali pa jo modificirate po želji. Pozneje bom mogoče napisal razlago, kako si lahko pišete svoj MVVM navigacijski sistem.

Koda je v celoti komentirana, zato bom tukaj napisal le korake, kako uporabiti knjižnico. Potrebovali boste Visual Studio 2013 Update 2. Windows Phone 8.0 trenutno ni podprt, ampak že delam tudi na tem.

Knjižnica Zenicy.NavigationUtility vsebuje vse kar potrebujete za MVVM navigacijo za Windows in Windows Phone 8.1 in je neodvisna od kakršne koli NuGet knjižnice. Če vas zanima implementacija, si poglejte WindowsNavigationService.

Namestitev:

Read the rest of this entry »

Advertisements

Izdelava vektorskih slik za XAML razvijalce (2. del) – Blend in Combine

Poglejte si članek Izdelava vektorskih slik za XAML razvijalce (1. del) za prvi del, izdelava enostavne ikone s XAML kodo. V tem članku bomo na hitro spoznali Blend orodje, risanje v Blendu, Combine funkcionalnosti in ker se bliža valentinovo, bomo še narisali eno srce.

image

Read the rest of this entry »

Prikaz touch tipkovnice v desktop aplikacijah

Trenutna različica OS-a ne prikaže samostojno tipkovnice ob dotiku na TextBox. To ni najbolj prijazno za uporabnike tablic kot so Surface 2 Pro, saj morajo ves čas pritiskati na ikona za virtualno tipkovnico v orodni vrstici spodaj desno.

image

Ta problem žal še nima elegantne rešitve, sem pa našel Windows 8 program, ki prikaže tipkovnico:

Process.Start(@"C:\Program Files\Common Files\Microsoft Shared\ink\TabTip.exe");

In tukaj je še koda za gumbek, ki izgleda kot Windows tipkovnica:

image

        <Grid Background="Transparent" Margin="100,0,0,8" Width="81" Height="36"
            <Rectangle Stroke="White" StrokeThickness="4" RadiusX="1" RadiusY="1" Fill="Black" />
            <Rectangle Stroke="Black" StrokeThickness="1" RadiusX="1" RadiusY="1" />
            
            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,5,0,0" RadiusX="1" RadiusY="1" />
            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,14,0,0" RadiusX="1" RadiusY="1" />
            <Rectangle Fill="White" Width="12" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,23,0,0" RadiusX="1" RadiusY="1" />

            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="14,5,0,0" RadiusX="1" RadiusY="1" />
            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="14,14,0,0" RadiusX="1" RadiusY="1" />
            <Rectangle Fill="White" Height="8" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="18,23,18,0" RadiusX="1" RadiusY="1" />

            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="23,5,0,0" RadiusX="1" RadiusY="1" />
            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="23,14,0,0" RadiusX="1" RadiusY="1" />

            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="32,5,0,0" RadiusX="1" RadiusY="1" />
            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="32,14,0,0" RadiusX="1" RadiusY="1" />

            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="41,5,0,0" RadiusX="1" RadiusY="1" />
            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="41,14,0,0" RadiusX="1" RadiusY="1" />

            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="50,5,0,0" RadiusX="1" RadiusY="1" />
            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="50,14,0,0" RadiusX="1" RadiusY="1" />

            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="59,5,0,0" RadiusX="1" RadiusY="1" />
            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="59,14,0,0" RadiusX="1" RadiusY="1" />

            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="68,5,0,0" RadiusX="1" RadiusY="1" />
            <Rectangle Fill="White" Width="8" Height="8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="68,14,0,0" RadiusX="1" RadiusY="1" />

            <Rectangle Fill="White" Width="12" Height="8" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="18,23,5,0" RadiusX="1" RadiusY="1" />
        </Grid>

Postopek za prikaz tipkovnice ob TextBox-u je žal bolj kompleksen in ga k sreči nisem potreboval. Če ga potrebujete, vam priporočam ta dva linka:

Vse trenutne rešitve niso uradne in obstaja možnost, da ne bodo delovale v naslednjih različicah Windows-a.

Moji viri učenja za razvoj v Windows 8 in Windows Phone 8

Tukaj je naštetih nekaj najbolj pomembnih virov znanja, ki jih jaz uporabljam za razvoj Windows 8 in Windows Phone 8.

Microsoft Virtual Academy

Za večino Microsoft platform priporočam portal Microsoft Virtual Academy, kjer imate veliko video vsebin lepo urejene po temah in težavnostih. Ta predavanja so narejena tako, da se hitro naučite osnove tehnologije in hkrati dobite nasvete od ljudi, ki že uporabljajo te tehnologije na svojih projektih. Nekateri seti predavanj so tudi vezani za MCT izpite in so bili moj glavni vir informacij za MCSD izpite za Windows Store using C#.
Read the rest of this entry »

Osnove XAML layout kontrol (vse platforme) 1. del

Ugotavljam, da veliko razvijalcev ne razume, kako deluje XAML layout engine. V tem članku bom predstaviti, kako uporabiti najbolj pogoste lastnosti kontrol za oblikovanje kot so margin, horizontal alignment, vertical alignment in horizontal alignment.

Margin

Margin kontrole je prazen prostor zunaj kontrole. Ta prazen prostor določimo s 4 vrednostmi. Te vrednosti po vrsti definirajo levi, zgornji, desni in spodnji razmik.

image

<Grid margin="10,20,30,40" background="Blue" />

Horizontal/Vertical alignment

To je horizontal ali vertikalna poravnava. Za večino predmetov je privzeta vrednost Stretch, ki razširi na maksimalno velikost. HorizontalAlignment ima vrednosti Left, Center, Right in Stretch. VerticalAlignment ima vrednosti Top, Center, Bottom in Stretch.

Brez poravnav

image

<Grid Background="Red" />

HorizontalAlignment

Poravnave Left, Center in Right bo maksimalno stisnilo kontrolo v horizontalni smeri glede na velikost kontrole in vsebine znotraj kontrole.

image

<Grid Width="60" Background="Red" HorizontalAlignment="Left" /><br />
<Grid Width="60" Background="Green" HorizontalAlignment="Center" /><br />
<Grid Width="60" Background="Blue" HorizontalAlignment="Right" />

VerticalAlignment

Poravnave Top, Center in Bottom bo maksimalno stisnilo kontrolo v horizontalni smeri glede na velikost kontrole in vsebine znotraj kontrole.

image

<Grid Height="60" Background="Red" VerticalAlignment="Top" /><br />
<Grid Height="60" Background="Green" VerticalAlignment="Center" /><br />
<Grid Height="60" Background="Blue" VerticalAlignment="Bottom" />

Nekaj primerov kombiniranih dizajnov

image

<Grid Height="60" VerticalAlignment="Top" Background="Red" /><br />
<Grid Height="60" VerticalAlignment="Bottom" Background="Green" Margin="60,0,0,0" /><br />
<Grid Width="60" HorizontalAlignment="Left" Background="Blue" Margin="0,60,0,0" /><br />
<Grid Background="Orange" Margin="60,60,0,60" />

Naslednji članek bom predstavil gradnike uporabniškov vmesnikov, Grid, StackPanel in ScrollViewer.

Pridobivanje informacij o Windows 8 napravi

Pridobivanje informacij o Windows 8 napravi je težje in bolj nepredvidljivo kot o Windows Phone 8 napravi (več v Pridobivanje informacij o Windows Phone napravi). Za večino informacij ne vemo, če so na voljo oz. kaj predstavljajo. Unikatni strojni ID se recimo lahko spremeni ob dodajanju ali odstranjevanju dodatnih naprav, nameščanje gonilnikov ali nameščanja orodij za virtualizacijo.

public static string GetHardwareUniqueID()
{
    var token = Windows.System.Profile.HardwareIdentification.GetPackageSpecificToken(null);
    IBuffer id = token.Id;
    byte[] bytes;

    using (var reader = DataReader.FromBuffer(id))
    {
        bytes = new byte[id.Length];
        reader.ReadBytes(bytes);
    }

    return BitConverter.ToString(bytes);
}

Priporočljiv način pridobivanja unikatnega ID-ja je generiranja GUID-a, vendar s to metodo na žalost ne morate zanesljivo ugotoviti ali je aplikacija že bila nameščena na to napravo. Ta ID tudi ni dostopen drugim aplikacijam.

public static string GetDeviceUniqueID()
{
    string key = "deviceID";
    var storage = ApplicationData.Current.LocalSettings.Values;
    if (storage.ContainsKey(key) && storage[key] is string)
    {
        return (string)storage[key];
    }

    string value = Guid.NewGuid().ToString();
    storage[key] = value;

    return value;
}

Z malo sprememb lahko dobite unikatni ID uporabnika. Namesto, da shranite GUID v lokalne nastavitve, jih shranite v roaming nastavitve. Ta podatek se prenaša med napravami, ampak uporabnik ima možnost odstraniti te podatke ob odstranjevanju aplikacije.

public static string GetUserUniqueID()
{
    string key = "userID";
    var storage = ApplicationData.Current.RoamingSettings.Values;
    if (storage.ContainsKey(key) && storage[key] is string)
    {
        return (string)storage[key];
    }

    string value = Guid.NewGuid().ToString();
    storage[key] = value;

    return value;
}

Zgornji dve kodi sta združljivi z Windows Phone 8 API-ji in jih lahko uporabite brez sprememb.

Za več informacij o napravi kot je npr. proizvajalec naprave, arhitektura procesorja in podobno, najdete tukaj:

http://attackpattern.com/2013/03/device-information-in-windows-8-store-apps/

Pridobivanje informacij o Windows Phone napravi

Statični razred Microsoft.Phone.Info.DeviceExtendedProperties in Microsoft.Phone.Info.UserExtendedProperties imata veliko zanimivih informacij kot so ime proizvajalca, ime modela, unikatni ID naprave, unikatni ID uporabnika, itd.

Primer pridobivanja vrednosti podatkov:

public static T GetDeviceExtendedProperty<T>(string id)
{
    T result = default(T);
    object value;
    if (DeviceExtendedProperties.TryGetValue(id, out value) && value is T)
    {
        result = (T)value;
    }

    return result;
}

ID-ji za DeviceExtendedProperties:

  • DeviceManufacturer, string
  • DeviceName, string
  • DeviceFirmwareVersion, string
  • DeviceHardwareVersion, string
  • DeviceTotalMemory, long
  • ApplicationCurrentMemoryUsage, long
  • ApplicationPeakMemoryUsage, long
  • DeviceUniqueId, byte[] (potrebuje ID_CAP_IDENTITY_DEVICE)

UserExtendedProperties se uporablja za pridobivanje unikatnega uporabniškega ID-ja. Koda za pridobivanje tega ID je drugačna za Windows Phone 7 projekt (tudi na WP8 napravah) in za Windows Phone 8 projekt. To pomeni, da ko posodobite WP7 projekt na WP8 projekt, morate spremeniti za del kode. Za obe kodi potrebujete ID_CAP_IDENTITY_USER.

Za WP8:

string result = string.Empty;
object anid;
if (UserExtendedProperties.TryGetValue("ANID2", out anid))
{
    result = anid as string;
}

Za WP7:

const int AnidLength = 32;
const int AnidOffset = 2;

string result = string.Empty;
object anid;
if (UserExtendedProperties.TryGetValue(&quot;ANID&quot;, out anid))
{
    if (anid != null && anid.ToString().Length >= (AnidLength + AnidOffset))
    {
        result = anid.ToString().Substring(AnidOffset, AnidLength);
    }
}

Še izvorna koda, ki jo uporabljam v mojih projektih in preizkušeno deluje:

https://skydrive.live.com/redir?resid=D9E0BFCC79DE0D07!22989&authkey=!AOsk64Ld9KYLYgI&ithint=file%2c.cs