Vyskúšajte si Silverlight 4 / 2. časť

Ric­hTextA­rea

Ten­to pr­vok slú­ži na edi­to­va­nie textu s mož­nos­ťou je­ho for­má­to­va­nia. Neob­sa­hu­je žiad­ne pr­vky na for­má­to­va­nie textu, no prak­tic­ky všet­ky fun­kcie po­treb­né na ten­to účel má im­ple­men­to­va­né. Tie­to fun­kcie sí­ce mož­no ov­lá­dať po­mo­cou klá­ve­so­vých skra­tiek, napl­no sa však mož­nos­ti pr­vku pre­ja­via po dop­rog­ra­mo­va­ní po­treb­ných ov­lá­da­cích pr­vkov. Je to lo­gic­ké, pre­to­že po­žia­dav­ky na di­zajn a fi­lo­zo­fiu ov­lá­da­nia edi­to­va­nia sú rôz­ne v zá­vis­los­ti od ob­las­ti na­sa­de­nia. V prík­la­de sú dva texto­vé blo­ky a tla­čid­lá na zme­nu hrúb­ky a far­by vy­bra­né­ho blo­ku textu.

XAML:

<Grid x:Na­me="Layout­Root" Background="Whi­te">
  <Grid.RowDe­fi­ni­tions>
      <RowDe­fi­ni­tion Height="30" />
      <RowDe­fi­ni­tion Height="*" />
  </Grid.RowDe­fi­ni­tions>
  <Stac­kPa­nel Na­me="stac­kPa­nel1"  Orien­ta­tion="Ho­ri­zon­tal">
    <But­ton x:Na­me="btBold" Con­tent="Hru­bé" Height="20" Width="60" Mar­gin="5" 
        Click="btBold_Click" />
       <But­ton x:Na­me="btFar­ba" Con­tent="Far­ba" Height="20" Width="60" 
        Click="btFar­ba_Click" />
    </Stac­kPa­nel>

   <Ric­hTextA­rea x:Na­me="rta" Grid.Row="1" TextWrap­ping="Wrap" Is­Rea­dOn­ly="Fal­se">
       <Pa­rag­raph x:Na­me="N1" Fon­tFa­mi­ly="Arial" Fon­tSi­ze="36" FontWeight="Bold"
          TextA­lig­nment="Cen­ter" TextDe­co­ra­tions="Un­derli­ne">
          Lo­rem Ip­sum
          <Li­neB­reak />
       </Pa­rag­raph>
       <Pa­rag­raph x:Na­me="P1" Fon­tFa­mi­ly="Geor­gia" Fon­tSi­ze="14" 
           TextA­lig­nment="Left">
             Lo­rem ip­sum do­lor sit amet….
           <Li­neB­reak />
           <Ita­lic>
               Ut enim ad mi­nim ve­niam….
           </Ita­lic>
       </Pa­rag­raph>
   </Ric­hTextA­rea>
</Grid>

C#:

pri­va­te void btBold_Click(ob­ject sen­der, Rou­te­dE­ven­tArgs e)
{
    if (!string.Is­NullO­rEmp­ty(rta.Se­lec­tion.Text))
    {
        rta.Se­lec­tion.Set­Pro­per­ty­Va­lue(
           TextE­le­ment.FontWeightPro­per­ty, FontWeights.Bold);
    }
}

pri­va­te void btFar­ba_Click(ob­ject sen­der, Rou­te­dE­ven­tArgs e)
{
    So­lid­Co­lorBrush scb = new So­lid­Co­lorBrush(Co­lors.Red);

    if (!string.Is­NullO­rEmp­ty(rta.Se­lec­tion.Text))
    {
        rta.Se­lec­tion.Set­Pro­per­ty­Va­lue(
           TextE­le­ment.Fo­reg­roundPro­per­ty, scb);
    }
}

silverlight2_obr1.jpg

Obr. 1 For­má­to­va­nie textu po­mo­cou pr­vku Ric­hTextA­rea

Drag and Drop

Tvor­co­via gra­fic­kých inter­ak­tív­nych ap­li­ká­cií ur­či­te oce­nia fun­kciu drag and drop, po­mo­cou kto­rej mož­no umies­tniť na ploc­hu ap­li­ká­cie Sil­verlight rôz­ne pr­vky, nap­rík­lad ob­ráz­ky z iných ap­li­ká­cií, kto­ré tú­to fun­kcio­na­li­tu po­dpo­ru­jú. Vzhľa­dom na ob­med­ze­ný roz­sah člán­ku uká­že­me prík­lad umož­ňu­jú­ci pre­su­núť ob­rá­zok na ploc­hu ap­li­ká­cie Sil­verlight. Návrh pre­zen­tač­nej vrstvy v kó­de XAML bu­de jed­no­duc­hý. Vy­sta­čí­te s pr­vkom Can­vas, čo je aký­si ek­vi­va­lent ploc­hy na kres­le­nie. Pa­ra­me­ter AllowDrop tre­ba nas­ta­viť na hod­no­tu True.

<Grid x:Na­me="Layout­Root" Background="Whi­te">
     <Can­vas Na­me="ploc­ha" AllowDrop="True" Drop="ploc­ha_Drop" />
</Grid>

Do kó­du, v na­šom prík­la­de v sú­bo­re Main­Pa­ge.xaml.cs, je po­treb­né pri­dať od­ka­zy na na­mes­pa­ce:

using Sys­tem.IO;
using Sys­tem.Win­dows.Me­dia.Ima­ging;

V ob­slu­he uda­los­ti Drop tre­ba na­pí­sať kód na vy­tvo­re­nie ob­ráz­ka, te­da ob­jek­tu ty­pu Ima­ge pros­tred­níc­tvom trie­dy Bi­tma­pI­ma­ge:

C#:

pri­va­te void ploc­ha_Drop(ob­ject sen­der, Dra­gE­ven­tArgs e)
{
   Fi­leIn­fo[] drop­ped­Fi­les = e.Da­ta.Get­Da­ta(Da­ta­For­mats.Fi­leD­rop) as Fi­leIn­fo[];

    fo­reach (Fi­leIn­fo drop­ped­Fi­le in drop­ped­Fi­les)
    {
        Fi­leS­tream fi­leS­tream = drop­ped­Fi­le.Open­Read();
        Bi­tma­pI­ma­ge bi­tma­pI­ma­ge = new Bi­tma­pI­ma­ge();
        bi­tma­pI­ma­ge.Set­Sour­ce(fi­leS­tream);
        Ima­ge img = new Ima­ge()
        {
            Sour­ce = bi­tma­pI­ma­ge,
            Width = 200,
            Mar­gin = new Thic­kness(5.0)
        };

        Bor­der bdRa­mik = new Bor­der() {Child = img};
        ploc­ha.Children.Add(bdRa­mik);
    }
}

silverlight2_obr2.jpg

Obr. 2 Test fun­kčnos­ti ap­li­ká­cie – pre­sun ob­ráz­ka z Win­dows Explo­re­ra na ploc­hu ap­li­ká­cie Sil­verlight

Ap­li­ká­cia vzhľa­dom na jed­no­duc­hosť má len zá­klad­nú fun­kcio­na­li­tu. Ob­rá­zok sa bez oh­ľa­du na to, kde ho pus­tí­te, umies­tni do ľa­vé­ho hor­né­ho ro­hu.

Ďal­šie čas­ti >>



Ohodnoťte článok:
   
 

24 hodín

týždeň

mesiac

 
 
  Zdieľaj cez Facebook Zdieľaj cez Google+ Zdieľaj cez Twitter Zdieľaj cez LinkedIn Správy z RSS Správy na smartfóne Správy cez newsletter