Hõbevalge nagu Silverlight :)

Varem on igati tüütu olnud reavahetustega tekst Silverlight TextBlockide sees… Selleks tuli siis sobilike kohtade peale lisada näiteks </Linebreak> või \n. Nüüd on Silverlight end kokku võtnud ning respekteerib XML standardis olevat xml:space=”preserve” atribuuti.

Seega, kui kirjutada

<TextBlock xml:space="preserve"> 

<TextBlock.Text> Mina olen üks suur, pikk

mitmerealine teskst ...

</TextBlock.Text>

</TextBlock>

Siis nii ongi, reavahetused on rakenduses näha ja kui kõrvuti on mitu tühikut, siis on mitu tühikut kõrvuti ka rakenduse käivitamisel .

Cool

Ma olin täiesti kindel, et ma olen siin sellisest lahedast Visual Studio lisast nagu XAML PowerToys juba varem kirjutanud aga võta näpust.

Mis see siis on?

Kes on natukenegi XAML koodi käsitsi kirjutanud, teab, et see muutub päris kiiresti tüütuks, tihtilugu algab täpselt ühtmoodi (teeme Grid-i, lisame tulbad, read, lisama veel mõned objektid). XAML PowerTools aitab seda automatiseerida – vaid kaks klikki ja õigete parameetritega Grid on valmis, selekteerime juba olemasolevad XAML read ning grupeerime nad mingi paigutushalduri sisse jne.

Minu kõige lemmikum funktsioon on aga võimalus valida ükskõik, milline kasutajakontroll ning eraldada tema inline kujundus stiiliks… sest tihtilugu on ju nii, et see, et miski peab olema stiil selgub alles siis, kui on hulk kujundust juba XAML koodi sissekirjutatud. See on üks funktsioon, mida ma olen alates Silverlight 2 Beta 1-st saati oodanud… sest kujunduse eraldamine stiiliks on niii tüütu…

Toon siia ka nimekirja kõikidest funktsioonidest:

New Features In v4.0

Added Two New Videos that cover these new features.  Please watch them.

Please review the Control Defaults section below, new options have been added.

• Extract properties to a Style allows selecting a control, choosing desired properties and have those selected properties extracted to a newly created style
• Create ViewModel Class from a VB.NET or C# code window.  Easily create a ViewModel stub that includes commands and exposed data class.
• Group into GroupBox
• Option to generate x:Name for controls
• Option to add ForeReRead converter to TextBox bindings (both VB.NET & C# converters included in source and binary downloads.  Converter is also included in the OceanFramework.WPF namespace.)
• Option to add TargetNullValue to TextBox.Text bindings when Source property is Nullable
• Corrected secondary application domain load issue reported by DevExpress.  This fix also solves another edge case secondary application domain load issue.

Feature Set

• Create ViewModel Class - from a VB.NET or C# code window, easily create a ViewModel stub that includes commands and exposed data class.
• Create WPF or Silverlight DataGrid For Selected Class - quickly create a DataGrid complete with bindings that are easily associated with properties on the source class
• Create WPF ListView For Selected Class – quickly create a ListView complete with bindings that are easily associated with properties on the source class
• Create Business Form For Selected Class – quickly create a form complete with bindings that are easily associated with properties on the source class
• Create Business Form – quickly create a form complete with bindings if desired 
• Show Fields List For Selected Class – display a list of class fields similar to Microsoft Access.  Allows dragging of fields to create controls
• Extract Properties To Style – allows selecting a control, choosing desired properties and have those selected properties extracted to a newly created style
• Group Into – allows selecting one or more controls and group them inside a new parent control.  Many options provided
• Change Grid To Flow Layout – allows selecting of one of more control and will remove all MinWidth, MinHeight, Margin properties and will set all row and column definitions to Auto.
• Chainsaw Minimize Cider Designer XAML – allows selecting of one or more controls and will remove all MinWidth, MinHeight, x:Name, Name, Margin properties and will set all row and column definitions to Auto.
• Remove Margins – allows selecting one or more controls and removes the Margin property from them
• Edit Grid Column and Rows – allows selecting a grid and then add or remove rows and columns
• Set Defaults For Created Controls – allows customizing the initial properties that are set when the software creates a new control
• About Box – see the version of XAML Power Toys installed on your system.  The current version of XAML Power Toys is always displayed at the top of this page below the title.

Allalaadida saab siit: http://karlshifflett.wordpress.com/xaml-power-toys/

Mõni postitus tagasi andsin nipi, kuidas Silverlight rakendused täisekraanile saada aga on ju veel üks variant täisekraanist – see, kui rakendus täidab kogu veebilehe.

Luues Silverlight rakenduse näeb Page.xaml fail alguses välja umbes selline:

<UserControl x:Class=”h6bevalge.Tips.Autosize.Page”

    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” 

    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” 

    Width=”400″ Height=”300“>

    <Grid x:Name=”LayoutRoot” Background=”White”>

        <Button x:Name=”button” Content=”Tere!” />

    </Grid>

</UserControl>

Vektorgraafika on äge, sest ma võin teda suurendada nii kuis tahan ilma, et kvaliteet langeks. Lisaks on vektorgraafika lahe selle pärast, et vektorgraafika võin ma teisendada XAML koodiks, mis aga tähendab seda, et ma saan siis temaga teha kõike, mida hing ihkab, näiteks animeerida

Nii ma otsisingi netist termineid “free snowflake xaml” “free snowflake vector”, kuni mul tuli idee otsida hoopis tasuta jõuluteemalisi fonte ja sealt vajalikud kujundid väljapookida .

Ehk siis tänane postitus on sellest, kuidas teksti xamlis eksportida:

1. Otsi hea tasuta font, mis sinule vajalikke kujundeid sisaldab.

2. Ava Expression Design, kirjuta selle fondiga oma vajalik kujund

3. Selekteeri see täht/kujund ning tee paremklikk ja vali Export

4. Vali XAML Silverlight Canvas, selekteeri Text:Paths ning salvesta.

5. Tulemuseks on XAML kood, millega võib teha mida tahad, kasvõi 12000 korda suurendada

Mõningaid häid fonte, mida jõuluteemalistes projektides kasutada võib:

http://www.fontspace.com/category/Santa%20Claus?p=1

http://www.p22.com/free/snow.html (sellest fondist on pärit siin postituses kasutatud lumehelbeke)

Error    1    ‘Snowflake’: member names cannot be the same as their enclosing type    \Snowflake.g.cs

See on üks error, mida ma näen tihedamini kui ma tahaksin, sest noh loomulikult ju ei või member name sama olla kui enclosing type aga XAML maailmas ma tihtilugu ikka täiesti kogemata teen nii aga äkki pärast blogimist enam mitte?

Kuidas see viga tekib?

Olgu meil üks tore User Control (kasutajakontroll)

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="Animatsioonid.Snowflake">
        <Path x:Name="Snowflake" Width="Auto" Height="Auto"               S
              tretch="Fill" Fill="#FFD9F3F2"
              Data="F1 M 20.205,19.59L 20.205,17.7075L 18.765,
                    16.8L 17.3775,17.7075L 17.3775,19.59L
                    18.765,20.4975L 20.205,19.59 Z M 37.5825,24L 
                    34.275,24L 32.115,20.64L 29.1375,20.64L
                    31.2975,24L 27.9825,24L 25.8225,20.64L 
                    21.885,20.64L 23.805,23.8575L 27.7425,24L
                    29.4225,26.88L 25.44,26.925L 26.925,29.61L 
                    30.9075,29.76L 32.5425,32.64L 28.56,32.355L
                    29.52,33.9825L 26.31,35.805L 25.395,34.2225L" />
</UserControl>

Kõik on korras ja ühtegi viga eelnev kood ei anna… seni kuni me seda kusagil kasutada ei püüa.

Kui kasutame hakkame:

<u:Snowflake/>

Saame vea:

Error    1    ‘Snowflake’: member names cannot be the same as their enclosing type  

Mis on ilmselgelt tingitud sellest, et klassinimi on Animatsioonid.Snowflake ja Pathi selle sees ma nimetasin ka Snowflake’ks, kuigi tegelikult ei ole sellel Pathil üldse nime vaja ja kui ongi, siis ei tohiks see kindlasti olla sama kui UserControli nimi. Aga jah selle veani on võimalik jõuda siis kui ollakse liiga agar ja kõikidele asjadele nimed antakse

Ja neile, kes jõudsid siia otsides lumehelbe xaml-i, siis terve lumehelbe xaml kood on siin failis: Snowflake.xaml

Eelmises postituses on kirjas, mis kasutajakontrollid on ning kuidas neid luua. SIin posituses tuleb juttu sellest, kuidas olemasolevate kasutajakontrollide välimust muuta ning neile funktsionaalsust lisada.

Eelmises postituses lõime kasutajakontrolli nimega Snowflake, mida sai kasutada järgnevalt: <u:Snowflake/>, mis kuvas 40 x 40 piksli suuruse helesinise lumehelbe.

Laiendades kirjutist muutes suurust või taustavärvi:

<u:Snowflake x:Name="aFlake" Height="100" Width="100" Background="Orange"/>

ei saa me oodatud tulemust, sest lumehelves paistab sama suur ning värvuselt on ta jätkuvalt helesinine.

Üks võimalus oleks läheneda probleemile programmikoodis, modifitseerides objekti aFlake (üks konkreetne lumehelves) muutuja _flakePath (_flakePath on selle Path objekti x:Name, mis asub Snowflake.xaml user control’is) suurust ja laiust:

aFlake._flakePath.Width = 100; aFlake._flakePath.Height = 100;

Kuid palju mugavam oleks ju see xaml koodis kirja panna. Et see võimalik oleks, tuleb muuta esialgse kasutajakontrolli koodi.

Hetkel on nii Snowflake UserControl juurelemendis kui ka Path elemenis kirjas nii laius kui ka kõrgus:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x= . . .
     Width="400" Height="300">
    <Path x:Name="_flakePath" Width="40" Height="40" . . . />
</UserControl>

Kui need Width ja Height ära kustutada siis edaspidi tuleb meie lumehelbeke täpselt nii suur, kui tema xaml koodis kirjas on – näiteks 100 x 100 pikslit.

<u:Snowflake x:Name="mySnowFlake" Width="100" Height="100" />

Laiendame XAML-i

Erivärviliste lumehelvestega on veidi keerulisem, sest <u:Snowflake Background=”Red” /> ei mõju, sest see värviks kasutajakontrolli tausta mitte kasutajakontrolli sees oleva lumehelbe tausta. Seda, mida teeb sõna Background XAML koodis, me muuta ei saa, küll aga saame kasutajakontrollile ise muutujaid lisada:

Failis Snowflake.xaml.cs tuleb lisada isendimuutuja lumehelbekese värvi määramiseks:

public Brush Fill
{
    get
    {
        return this._flakePath.Fill;
    }
    set
    {
        this._flakePath.Fill = value;
    }
}

Seejärel saame kirjutada nii:

<u:Snowflake x:Name="aFlake" Height="100" Width="100" Fill="Snow" />

Ja saamegi lumevärvi lumehelbekese suurusega 100 x 100 pikslit

Mis need on?

User Controlid ehk kasutajakontrollid (?) on viis kasutajaliidese ja ka loogika kaspeldamiseks Silverlight ja ASP.NET rakendustes.

Lihtsaim näide sellest on tavaline vorm aadressi sisestamiseks – teate ju küll neid (riik, maakond, linn/küla,indeks, maja, korter), selle tegemine nõuaks mingi ~10 rida XAML koodi ilmselt. Aga kujutagem ette stsenaariumit, kus on vaja kaht sellist vormi näiteks arve aadressi ja postiaadressi jaoks, siis läheks ju juba ~20 rida XAML koodi + ehk on veel ka mingi loogika, mis kontrollib, kas vormid on hästi täidetud. Et vähem koodi oleks, on meil vaja aadressivorm kapseldada kasutajakontrolliks nii et seda saaks taaskasutada!

Kes tahab teada, kuidas see aadressi vormide näide täpselt edasi käib, võib lugeda Scott Guthre’i blogipostitust, mina jätkan näitega, kus mul on väga paljudest Path punktidest koosnev lumehelves, mida ma tahaks sadu kordi kloonida, et tuleks korralik lumesadu!

Miks neid vaja läheb?

Esialgne lumehelves on selline, see koosneb 1857 tähemärgist, ehk siis on piisavalt suur, et ma ei tahaks seda 100 kordi lõigata ja kleepida:

<Path x:Name="Snowflake" Width="40" Height="40" Stretch="Fill"
Fill="#FFD9F3F2" Data="F1 M 20.205,19.59L 20.205,17.7075L />
18.765,16.8L 17.3775,17.7075L 17.3775,19.59L
18.765,20.4975L 20.205,19.59 Z M 37.5825,24L
34.275,24L 32.115,20.64L 29.1375,20.64L
31.2975,24L 27.9825,24L 25.8225,20.64L
21.885,20.64L 23.805,23.8575L 27.7425,24L
29.4225,26.88L 25.44,26.925L 26.925,29.61L
30.9075,29.76L 32.5425,32.64L 28.56,32.355L
29.52,33.9825L 26.31,35.805L 25.395,34.2225L
23.4225,37.92L 21.7575,34.9275L 23.6775,31.3275L
22.275,28.8L 20.3025,32.64L 18.63,29.58L
20.55,25.845L 18.6075,22.515L 16.755,25.7775L
18.6225,29.3325L 16.9425,32.16L 15.0675,28.6575L
13.5825,31.245L 15.4575,34.755L 13.8225,37.5825L
11.955,34.08L 11.04,35.6625L 7.8225,33.84L
8.7825,32.205L 4.6575,32.355L 6.2925,29.52L
10.4175,29.3775L 11.9025,26.835L 7.7775,26.925L
9.4575,24.09L 13.5375,23.9475L 15.5025,20.5425L
11.805,20.5425L 9.69,23.9025L 6.285,23.9025L
8.4,20.5425L 5.565,20.5425L 3.45,23.9025L
0.0449994,23.9025L 2.16,20.5425L 0.3375,20.5425L 
0.3375,16.845L 2.16,16.845L 0,13.3425L 3.2625,13.3425L 
5.475,16.845L 8.4,16.845L 6.24,13.3425L 9.5475,13.3425L
11.7075,16.845L 15.645,16.845L 13.7775,13.5825L 9.795,
13.44L 8.16,10.56L 12.0975,10.56L 10.6125,8.085L 
6.675,7.8975L 5.04,5.1825L 8.9775,5.28L8.0625,3.675L 
11.28,1.875L 12.195,3.4575L 14.115,0L 15.855,2.7825L
13.8675,6.3675L 15.315,8.88L 17.28,5.28L 18.96,8.1975L 17.01,11.7825L
18.9225,15.12L 20.835,11.8575L 18.96,8.355L 20.64,5.475L 22.4625,9.0225L
23.955,6.435L 22.125,2.925L 23.76,0.0974998L 25.5825,3.6L 26.5425,1.965L
29.715,3.7575L 28.8,5.28L 32.925,5.28L 31.29,8.1375L 27.165,8.235L
25.68,10.845L 29.805,10.56L 28.125,13.305L 24,13.44L 22.08,16.8L
25.8225,16.8L 27.9375,13.44L 31.245,13.44L 29.1375,16.8L 32.115,16.8L
34.2225,13.44L 37.485,13.44L 35.3775,16.8L 37.245,16.8L 37.245,20.64L
35.3775,20.64L 37.5825,24 Z" />

Uue kasutajakontrolli loomine

Selleks on kaks võimalust. Kasutades programmi Expression Blend tuleb valida need objektid, mida kasutajakontrolliks kapseldada soovitakse, teha paremklikk ning valida Make Control. Selle tulemusena avaneb veel üks aken, mis küsib kasutajakontrollile nime ning, mis tuleks teha esialgse sisuga (meie puhul, siis selle 1857 tähemärgiga) – kas asendada kasutajakontrolli koodiga või jätta nii kuis on.

Lõpuks saame faili Snowflake.xaml, mille sisuks on kõik see, mis üleeelmises sammus valitud sai (aadressi vormi puhul, siis kõik vormi väljad, nende kirjeldused …).

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006
             x:Class="Projekt.Snowflake">
   <Path Width="40" Height="40" Stretch="Fill" Fill="#FFD9F3F2"
         Data="F1 M 20.205,19.59L 20.205,17.7075L 18.765,16.8L..."/>
</UserControl>

Kasutajakontrolli loomine Visual Studio abil on samuti lihtne. Tuleb Silverlight projektis valida Add New Item ning seejärel suure hulga valikute seast leida üles Silverlight User Control ning anda talle nimi. Kui Expression Blendis oli kood juba õiges kohas, siis Add new Item meetodit kasutades tuleb õige kood ise Grid märgendite vahele kleepida.

Kuidas iganes see kasutaja kontroll ka loodud sai, selle kasutamine on õige lihtne

Kuidas kasutada?

Esmalt tuleb XAML faili päises kasutajakontrollile viidata:

Süntaks selleks on xmlns:MINU_ENDA_VALITUD_LÜHEND=””clr-namespace:PROJEKTINIMI”

Näiteks projektis nimega Projekt näeb see asi välja nii:

xmlns:u="clr-namespace:Projekt"

Nüüd edaspidi võin luua lumehelbeid nii:

<u:Snowflake/>

Mis asendab kõik need 1857 tähemärki või mitu neid oligi.

A ja see kurikuulus lumehelbeke näeb välja selline:

1200 kordne suurendus … vektorgraafika ruulib

Üks asi, mis Visual Studio juures kohati tüütu on, on fakt, et VS avab XAML faile alati disainivaates ning iga muudatuse juures kulutab aega disaini renderdamisele ja näitamisele. Aga sellest saab loobuda!

Visual Studios on vaja vajutada nii: Tools –> Options –> Text Editor –> XAML –> Miscellanelous –> Always open documents in full XAML view.

Minu arvuti peal on juba projekti avamisel võit paar kolm sekundit… Ja iga sekund on säästmist väärt!