V tomto jedenástom, špeciálnom diely sa pozrieme na maskovanie obsahu Gridu pomocou Borderu (alebo iného prvku).
Úvod
Ako sme si v minulom diely ukázali, vloženie obrázku (alebo iného obsahu) do okraju nekopíruje jeho tvar. Dnes si ukážeme malí trik ako toto napraviť. Preto bude tento diel trochu kratší a opäť bude pojatý skôr ako tutoriál.
Príprava masky
Najprv si musíte pripraviť masku, ktorou budete určovať tvar vášho obsahu. Ako maska môže byť čokoľvek od Canvasu, po Image. My budeme používať práve Border. Ten nastavíte tak, aby mal vami vyžadovaný tvar, no vypnete okrajovú čiaru a nastavíte jeho výplň. Dôležité je nastaviť mu meno, vďaka ktorému ho budete môcť nastaviť ako masku.
V našom prípade vytvoríme Border z menom Mask1, farbou pozadia bielou a uhlom okrajov 20.
<Border x:Name="Mask1" Background="White" CornerRadius="20"/>
Nastavenie Gridu
Na priradenie maskovania Gridu budete potrebovať aktivovať jednu z jeho pokročilých vlastností a to OpacityMask. To spravíte z XAML kódu tagom <Grid.OpacityMask> . Tomuto tagu opäť nastavíte pokročilú vlastnosť a to VisualBrush, ktorého klasickú vlastnosť Visual nastavíte špecifickým vzorcom.
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Mask1}"/>
</Grid.OpacityMask>
Na nastavenie tejto vlastnosti použijete Content Binding, ktorému sa budeme venovať v neskorších dieloch. Pomocou bindingu ElementName môžete previazať masku z iným elementom, a to konkrétne s naším Borderom, ktorý sme pomenovali Mask1.
Grid, do ktorého toto vložíte bude maskovaný práve tvarom elementu Mask1, čo znamená že bude presne kopírovať jeho tvar. Pokiaľ teda do tohto Gridu vložíte obrázok, bude mať zaoblené okraje.
Vylepšenie obsahu
Aby ste váš obrázok (alebo iný obsah) ešte vylepšili, môžete ho orámovať druhým (už klasickým) Borderom, ktorý bude normálne vykresľovať okraj.
<Border x:Name="Mask1" Background="White" CornerRadius="20"/>
<Border BorderBrush="Black" BorderThickness="5" CornerRadius="22">
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Mask1}"/>
</Grid.OpacityMask>
<Image Source="EP11.png" Stretch="Fill"/>
</Grid>
</Border>
V tomto kóde sme teda najprv vytvorili masku Mask1. Potom sme v druhom Borderi vytvorili Grid, ktorý túto masku používa a obsahuje Image, ktorý budeme zaoblovať.
Dúfam že toto využijete, pretože je to naozaj pekný a jednoduchý trik, ako tvarovať akýkoľvek obsah. Tiež dúfam že sa vám tento kratší diel páčil a uvidíme sa nabudúce zas pri normálnom diely, kde sa tento krát pozrieme na ListView a StackPanel.
