From 4b05e5996e22f60ca2859d7c712c1b3a5429482b Mon Sep 17 00:00:00 2001 From: Kishore Date: Fri, 19 Sep 2025 11:12:40 +0530 Subject: [PATCH 1/2] Added the BadgeAlignment behavior with detailed explanation. --- MAUI/Badge-View/Badge-customization.md | 134 ++++++++++++++++++ .../WidthForBadgeView.png | Bin 0 -> 2730 bytes .../WidthForContent.png | Bin 0 -> 4210 bytes .../WithoutWidth.png | Bin 0 -> 3318 bytes 4 files changed, 134 insertions(+) create mode 100644 MAUI/Badge-View/badge-customization_images/WidthForBadgeView.png create mode 100644 MAUI/Badge-View/badge-customization_images/WidthForContent.png create mode 100644 MAUI/Badge-View/badge-customization_images/WithoutWidth.png diff --git a/MAUI/Badge-View/Badge-customization.md b/MAUI/Badge-View/Badge-customization.md index 14c267eb12..883795edb9 100644 --- a/MAUI/Badge-View/Badge-customization.md +++ b/MAUI/Badge-View/Badge-customization.md @@ -345,6 +345,140 @@ Content = sfBadgeView; ![Alignment](badge-customization_images/badge_alignment.png) +## Badge Alignment and Sizing + +The [BadgeAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_BadgeAlignment) property positions the badge text relative to the SfBadgeView's content. You can set this to Start, Center, or End. However, the final visual position of the badge is also dependent on how the SfBadgeView and its Content are sized. The following scenarios explain how alignment behaves based on different size configurations. + +### 1. Alignment with a Fixed Size on SfBadgeView + +When an explicit WidthRequest and HeightRequest are set directly on the SfBadgeView, the badge is aligned relative to these fixed dimensions. The size of the inner Content does not influence the badge's position. This approach is useful when you need the badge to appear at the edge of a specific, defined area, regardless of the content inside. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + {% endhighlight %} + +{% highlight c# %} + +SfBadgeView sfBadgeView = new SfBadgeView(); +sfBadgeView.HorizontalOptions = LayoutOptions.Center; +sfBadgeView.VerticalOptions = LayoutOptions.Center; +sfBadgeView.WidthRequest = 100; +sfBadgeView.HeightRequest = 100; +sfBadgeView.BadgeText = "20"; +Label label = new Label(); +label.Text = "Start"; +label.BackgroundColor = Colors.LightGray; +label.HorizontalTextAlignment = TextAlignment.Center; +label.VerticalTextAlignment = TextAlignment.Center; +label.TextColor = Colors.Black; +sfBadgeView.Content = label; +BadgeSettings badgeSetting = new BadgeSettings(); +badgeSetting.BadgeAlignment = BadgeAlignment.Start; +sfBadgeView.BadgeSettings = badgeSetting; +Content = sfBadgeView; + +{% endhighlight %} + +{% endtabs %} + +![BadgeAlignment](badge-customization_images\WidthForBadgeView.png) + +### 2. Alignment with a Fixed Size on the Content + +When the SfBadgeView has no explicit size, but its Content does, the SfBadgeView wraps itself around the content. In this case, the badge is aligned relative to the bounds of the Content. This is a common scenario when you want to place a badge on a specific control like a Button or a larger Label. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + {% endhighlight %} + +{% highlight c# %} + +SfBadgeView sfBadgeView = new SfBadgeView(); +sfBadgeView.BadgeText = "20"; +Label label = new Label(); +label.Text = "Start"; +label.BackgroundColor = Colors.LightGray; +label.HorizontalTextAlignment = TextAlignment.Center; +label.VerticalTextAlignment = TextAlignment.Center; +label.TextColor = Colors.Black; +label.WidthRequest = 100; +label.HeightRequest = 100; +sfBadgeView.Content = label; +BadgeSettings badgeSetting = new BadgeSettings(); +badgeSetting.BadgeAlignment = BadgeAlignment.Start; +sfBadgeView.BadgeSettings = badgeSetting; +Content = sfBadgeView; + +{% endhighlight %} + +{% endtabs %} + +![BadgeAlignment](badge-customization_images\WidthForContent.png) + +### 3. Alignment with Automatic Sizing + +When neither the SfBadgeView nor its Content has an explicit size, both controls size themselves automatically based on their content. The SfBadgeView wraps its Content, and the badge is then aligned relative to the final calculated bounds of that Content. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + {% endhighlight %} + +{% highlight c# %} + +SfBadgeView sfBadgeView = new SfBadgeView(); +sfBadgeView.BadgeText = "20"; +Label label = new Label(); +label.Text = "Start"; +label.BackgroundColor = Colors.LightGray; +label.HorizontalTextAlignment = TextAlignment.Center; +label.VerticalTextAlignment = TextAlignment.Center; +label.TextColor = Colors.Black; +sfBadgeView.Content = label; +BadgeSettings badgeSetting = new BadgeSettings(); +badgeSetting.BadgeAlignment = BadgeAlignment.Start; +sfBadgeView.BadgeSettings = badgeSetting; +Content = sfBadgeView; + +{% endhighlight %} + +{% endtabs %} + +![BadgeAlignment](badge-customization_images\WithoutWidth.png) + + ## FontAutoScalingEnabled The [FontAutoScalingEnabled](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeSettings.html#Syncfusion_Maui_Core_BadgeSettings_FontAutoScalingEnabled) property automatically scales the badge text's font size based on the operating system's text size. The default value is `false`. diff --git a/MAUI/Badge-View/badge-customization_images/WidthForBadgeView.png b/MAUI/Badge-View/badge-customization_images/WidthForBadgeView.png new file mode 100644 index 0000000000000000000000000000000000000000..eef907b0e68db493218d05974e9ff99aa0a5725b GIT binary patch literal 2730 zcmd5;XH=7E7XBzhkzo-m0fB&`jG}Y}ktWiIUPd&OVCWKv44n`Gftdv%5f$k$z(~<0 zbR>l!3W*YWXrW7y-VFgl!e;jGoZYiOcF&m~_rC9Q&VBEBpL_4Q=Si`*H5WZ`?gRh; zqLvmWjsU>3#=R4T1h^hgD^TDbJfV)}cK~dU%rY17`x)670YEKAaxJ4v&4%7@{;xzYDta_&nzkeDwkX{pZn*+lFk*Uw|K&m z4zDv@H&8JeIXPY4J>ET$Uzv&B9xRPeUO%5>CVoxd_+!x(;5L+Xr(OU!%ziHr&(E&~ zT$Hcjk>^Pe1%!p*fW>W3zT3RK(tyOtQQ%qpUp~ase_zu^N+sLIaAN4CO1^CCfrC>C zw5u%U(f-z#vUZE{IL=~O*cWdi*#E)5C58!CS5Vx!+51)bZD$F>!;vb-nVZ|$vU}`G zEoO~wGUb$!5uD0bl(||gM>B6Ffr2M%Wl->LVhuIRUUEf82zoUkon4YM z^LXdWbmk`Zz9UmJdywx*j6654b?lH*=G-}rDY^#5&6hwtnr2rQ#8?~%brXD0GZpmi zI9f_?g~v$$E82h8{NJ7G^l5jWYP--RIQ4K6|HJNk+Vy>uQ2J+_&A^ z!%`}e8UmU`-(MdkkZ8(h9}^FB!zWRK2Isu8*nS$-zdMTwjKJRrIu$3|K%aiT=yHv- zB6Z3-8#T!H0bVW0n@3_i4KlnOr@OaV$M6%()h}Yr&)HF#c*R%O?%iya(GM%3!=9O7 za51;-#rU;QN*umI1IBU%#*fI#ihG4Xu~H!%@_-f96olGNQ@DdTl{HOyCjOte3Q{Z z2RjQk0b7-VE!r7}G?Y)?{8egsa!emo!y~bwCL!VU`AHQuq5tpf#}|$_1UN(pd4iMDsZWZLGsp!Q5ylmB~&^P1;t{g1V zUtoZkB0|a{xi9?EA3#I9Z**rkV(}|)%EFqMQ^;zpDq*b-A8h)G=E^JmJVm`@JeW{L zlSutJ%(RIz#-6kqhoqVZ!P07xN3}zR+QXavS=&9!ocs;8_H=A0Tk7Xjm0;h(_rI9H zV7&=^f}QS>lS5K=X*-!N9&|26dCUkT*D&rez0Sv~KD=qE2OhU^uvk>hGGnk7@cz;#BWn)WFEK zT0Aw;RF#h!BQb%(9u&s#ov+!@r4q7DG!T?xP!gyL0iaD4E4r>-kWKdXudC z?7OL$!1`Ywi?_(F_n9&WNH;GHD?m#m#`|fs)Vxm=xi})nZSW~!lSG(09U+#X7S5}i zQ)-Th@UTB=W&L#-3`(p05HZ{9Y{GnNc}FK*t4S}n`8P5%mc&?aE81;8Wf!&*5Ifuy zG=9td;QhStn)hr^#PY!F@FR7VXX1TNL8@3v2~v}+i2O3smdGU(aUc! zRc_P5>0+?*c9SU>)OR=k6lSJf^fuDAVFnt#kZCJoX+Z=LLx z%Qs9Yuy)%jjNSQsSeGWWk>XaN&^&(j;Q1x16+Ci6LuD|ezp$&+$SrDHmTXcKr95AX zF@PWqVRU?WpiaoFN$Bv>i#D=!IeJqcjLTi~y7_{g-|UbkP0r|D92&!rh ztZs=IgN#tKR1rTWB5tj=!82<)6@u(bUa|upY?Z*&l;L3mCq6idfi;vJ zx~T#*Zp}cN?G$NbT5H9rYAoD1`j#&rpBkG#;)41f=tcTiU-~+VwKpUTt4bCDz4D@< zZ@3n<-d|bBf?^l;aVezB3gjCY8Jz(*j~b0XLZer2*BW(Tl4km@niB{Wkp#zXwcWa+ zjHdkFpu0(|C$jg(!;$PmhR;H0rXT;&JuUcX-vKVFOC&zWXMlcPU>fpW5p8qM|om>;0Fh)vo7nv*Cam^*^YBzn~&oLcTr{ YQ)Fs5pQjW4P@;gPsjUh2j^~qq0%2Rm(EtDd literal 0 HcmV?d00001 diff --git a/MAUI/Badge-View/badge-customization_images/WidthForContent.png b/MAUI/Badge-View/badge-customization_images/WidthForContent.png new file mode 100644 index 0000000000000000000000000000000000000000..ee04f2c6783a397c087b9f591ff4b594bd6f7e18 GIT binary patch literal 4210 zcmeHLSyU6q(hdWIG77Gs>?4k#tU5*_fA%KVwWtD^wAYn^n34uUZ4Iyyj>woUc|8URwAO45#uIlbnU0wB6)#;AC4~0no zrtlj80FXAjebWj65aWvIsr{0ozSH~F8_^&ZXa%_eAoMG-MT~^Ub@S^0KvnXAoyWh5 zcq#we4uJrGOvleAM)Jcy0RRr~GrM`+Cd_$h99`+Wma}ig@2pze8BDY~Ppk0Ms3$%s zzvO|f&>kynuXH61SF%WNFgiWMK_9BDO+s~g&P&2VWIHhJZ=k~u-u|$S*9W~md`9gE zU)V9=x@KUYv38r=(ini7o8?akP<`3YTIaIozyqpVy=zh6xro*|_6GZk6yVDz{h8B% z6tQ+`fcy~#AmzyaMdGKbGba@mUTp29O;%RnY}wxy(fTu#!g z2do=C$3~;V+e_Ey6YR*R+rkVY*QZG{!#eeS`Yq(|%S$kcA1mXbn)Sb|D~Wc-TC!urL}uB`=baygPHYxc_ezNT7mr;NDUj{I+Mz`*>PWxSzncQSw{heuRP=!HdM^ znWB8UwAj48$XX}ydHHP3VlMMIzY`sfc5GcA54g)(1QuE}{lK`9Wm?+qBk~L{UKEo6 zNuOWKv!kG$1Wy`=o7VQ&D>ZXq!xOB|_y@(RxJdK`nOcELE?8sy+1j2gt8RztaE#I( z!v-#Md++_V@$(F4#It6lTHlTCEee|?B-(%C6)ROvS55w<9JgdF>hL3D+gzLxuZa5*3xw0sUNqP)Cm@ad ziLXVO$`Q!1gsn~RZR!h7MPl13lbNqjaic{iUhac7BnX7`-f6-ay-{ge?rgfJaS#`= z>VT+GG(J$Ih{!#qEqZ&P6QKiJ(5P6f@c z;bTY?(fMr%yly-M3*1O}K`vZgv_-H{IyyQtuamatJ1oe=6Lv+QSpsxfJ3_Az!(UDA^U1%v!ol4kIcgD>mo&L&_= zX5AUd#i3@ULD=VWtN3U|`LStMvhlgn?J(oj6>?w?xuu?n*`4Ep$k~&+7CmxplL*h4 z5!He4_fK!3=5zV%2{bOl-MG4jfmLlcA79#eA2oyb&Dfz|U~kxE6!oBi1&n_t#;B@= zCU6CEi2Q}~eOc6~>W7etWTMg92nU-3J?XN;JZP?sG@_P{*Eg!fhT%L^1d)xV)s9u) zUjWxm9H4Y;wPeY)3^tY&#h)NzqiVUqD*WYNy}st}=+;Uh77)EZVBMA+wM^QF?RQi! z=L+IF^va52vnRvVO1k((4-wiGS_*k3xUBP-J=62 zZ!=yKwrm8OC~~aK<*+Bb_R(}bF1aGJ7-oC3YGLDFX+UoBOCCv>Nskq!4H1Do+dF-9$(zMc< zWhlQQz)zF#%#O}_QGeAMs_v!n>2|sN7!ZovRc_uQW=W0H84g~JFzBLPkH{L|RB$3fwVRh) zb|JUtb4?eiZA!KMy)Sd~MDe-dW98KPT^KOL5T!sh?!8M(OcTl$`usU_qbJEVoG;h0 zzMAnu9#JaQv?z687lqkOo-|8ss}EhEno<U^p3`4lz82B~_j=AH3Jx(L^ zvrLV~^9{@cA%S0~)BoOJj=-}Us%;s66b$0-BPBIj4Rnd88k`J7F#El*zMPCoclGaiW!U4Ot*E|FmkzNcXV+79J_c-t;WqOT^&NYPiLwy_xKfh@3)5QCV+CZT2St+?AwrFjV^pwftk+d zw8~BH=aYRY8p0_p_Fv*8kaqqZFkvoFe8Dj$=?;-)DJ?fcTofD<8F|mL00IU7crZpsT{G=-WkX?YM1^f*C<+}=r%7}*)WsA+nyL>bX3#E z@WY;#bFjd^OPy|uSc5?K1zLp*@AjNX>X?l!g=$5&m*bF>L!Bj#(C-cwesEh3H|Z3=*`b1eoeVk(Y-f4abe6@ubJ+* z>~5_J?b3H_N^$Wy>mnbkai0={z}e$8t;ctl8s~C5SzRvbtg!ci5}+sQ3Q?v>N?C*k zW*iW;KJWTaV)I`R6^8_^!FI(QqGh5VV@Z+DbbM-CMRI$Ie*F!+IpP+NwC%HF8c-** z{Xa={25JpHb<*LrA|?OI)gr)2NPnuWo$uvM=7@c*x9tV@9x23^d%&H0Iag|(;INk= z5!b*gAH{FIy68XkF{u656KUbJ=ILm~xHFr$$jwpq&f0(;_z|n;qfR};%1C3=R@N#= zlC-(t2LDYq2FRZ_r#^5NAB78TH<=D@*tu-R2Kr*+$O-jxgcF zAIwOq=!mLB9U6xc+>NYrbad=K()Va_q-q8);4HZ5K@ClxDxY!;UZ_(CKZ4_`d6S*H z`=`fD3&wmc6CvmA@|5$RC+QvJopOp@5PUkIr(M^%Z+kp+GDk%Oj{rYf4{v0RPjw2o z9BsppKCJqP%KmK61U?PU(NN(8|8`+QT>pVNE%tnQQu_iBMP)0N!c&xG*Zc;I)_SEY zKgz9E)QyKn>H#S=4>iRcna}x_A-c8s#3K=Kj*I++j?#+K^u3_c!?gvEJ`Xi3K;} zkhYyZjN8Wr%;O&S_F{z@E>X|0eI`L@OX@`EWaP|PQR$tgO;h=e%E>6f`#BuC)k$0w zE-;THBbG>-q~96t`5Ae+tQzo5mjB8gW!lH~ zug)J&rVJsw&Ja8x^`SG_f&J%_I_9Smg-D~QTyKM_Ys@pW5?^@Eo zUSr1>Ps}SLUe71TmKuoQB@UcrM0+~L-zVf~9#f42O@z5w-by@qAwRS0*jiB8T+MKw zqRW1L?zXR7Q}?K&sG>VGb%$5t?eiC6`5&r11}6Li;}dUvgiw!5`yiJDNrv1Je__*u z$=1l8BY>+}Q;5ojiIdc|Pp=O2=-_I@c+C86LJP;1Q3wDyo^If1V}iXEQLa~^9?NZe zyPc?=kR?SwVpZNV9Zfd=OIcg2^%N2n8R!UC`Q@G97$aB?RDf5Ac8x`>G%UGXLhEaC z@E=*I;Ghghfn^ZD&iq=v$bZpviMrz2*;9Zf<36vUoLOLoisyvJjw?pnqubSIMgIfI-jkLmANwYNX`v8;h1$%bxNr6BDh1xN)?4%0D?60?AMc&r4v}Y>|)du z6OSXYjW#(4>aZv(d=_6C$3CPk8FAramr%pPfVU0zsh)s%7k&f4Y3s}*@ge^)z$-Fx zM5wkk0H3!GV*bSruvX!ICAo$%F~ypOOHiEa$TUO+=VKp4t8Lp}p}FjdeF|krfRvwa zjg=TuNI#b}hZBnL4UK5z&0F_owPgQX;6(R9pDlJRdfGl_e%>x$+oxBa zq?havi9U;LFT2gT*?iO4NQmaS!TtnA@!BRa)L_>df;q9OHLOjM$o_G1|g944rHI1B48$O9`%Ats;#el zX%r|6>i%>yk_kJPgP+Mh?q{@1^~6;TDy75~uhh2LpRO#92j?duxc6t%Czux8F9T9{%l}m1ou}Lq%?&M|Jt2&ri7~ZMuxpS-lf(#=5L#?O?<-Y z_iJ3s(p$uf;%ajCqrR6=b>2%#Mg9}h{8J5fseSUh4lr^JvQa+ZxT>%_TgM82c+l#M zyI?9e(T{E#lQztVv>!Tmd*BuUm|CsPUjNYtgb8o`k(puxRiz!8EcwA~>4CA$m{FVX z5nSA~i;4H`2{r`<|KtujEV`PH?EgS@W!hA0JEdkXrgy@8%k<|pl&C^XiA$Fo=B(s` zpoR9|QlHjcY(*3{XqcYa5ujBzpOlK7*HFpumz^){surbSTPEp6e!^-~76{cICgVEB2TrC_Hq@5xwyOCGzTc2v`g`sYq|;hnWURjGA* zfd~W~b}16$&^-&P11o22VN5COJ5XZoQ^d0w=O)`{9uu3r$W3`(M`ZLc%=~*r##|J0 z;V=idG!zVTOlp~I1zx>kHltLZzD995cn^kxwI(n@(IwcEAmxna4G^`@yuc8ij;%IF z?4Wi1Qa6wCQWz%Kt+O$+J-XGZ0x?=wlN6-F>b6xQ zw|IcA2UTsK1R8S`Ppuz}fw${BDB_l!nXQ*t*a7KhG`*;08OOAgov&ki)dtZH^*5y# zIK$By*M9hARd$8UxHrk=UI^yR%Vg!i%I60Jl)_MTu}b!ni;D>qaf3+ZUILt+G_D?GcjbOT*`i_IL- z8bM>JvaBU6bWT;P=f`inMIS$BO%BQoyb~C|>_;EWY6)9$g+cn!UTt+QalWsFll6m@ z2Y>gBdU5z((s^)sqQd9p=I3UM(%8MA6;e|f`>bdU6fo`F1jg}#&rw@NIBcCSGP?W* z-xtTrEr8KG!3Cyq__Wj7%C0i2N;s34X!b_l*8E57x^VOxgjW!uNRME=|1@?M6XbgH zCcT}(T%D<3=v*p=&+QL;V;Q`U|*7{>-b}HpsZ2E8+Bj2Q44oZFM6d4 zMFzf0RJ11h2L#w}QgLcYkKJX@WSAayIFy-C+!?ZiUd@7u?upeFDPj-1Jy^TDyUby= zrVc24X)N3f-D`p6;K04?dIlB2_W9BgGB33*jXeod%-}+Omkr?X?`Nk;U-dJ38M@oFWR)8en{#C;!qsbL^F=y_b| zf*tmdMe;={StNJRp8Zf9tQa455dU_tY9-#+2E4iFUf((JvMFH|O6hV3$83EVq?s#t zB?u;ZaXP}A5uC?g+8~})v|6d&#$#OvJ99V{MY0g{au{=cRF4*xQsI>lX!>}0ynN#~ zp|+qYRd!oBhFhl*?@w&@vnEZxPNkg^HbF|=t@jA;UBb45>JFU{{2{u64T^*HEqNvt6cpsu{lOxFV4Y3) zq+`-uH1r(n3RtV-&%QES-Rtu61L<(d%qaSNM(5FP+OVw7{WLj+0|}M@mXsWOdWr6h z2bJwaw6?VP_aOzcNYgY=ilB(Zef~%(S>km*y$92;)yAIxW0m->>8m@T)VS%jGD}21 zE>sk?@Q3~E`BUrUZ8;#mKn;O{$k{6P-o2h`xa{l` zE96c%JsQ&ny!(z{TGr$seq2WdIirtSPAU3ezg;BD14pDHk9!F_6#ze!_%+OU|4`0V z6pew3F8}>{XNlx4CU|P#T~`e6Q+k*MzMxcS$G=!1~}H zaHHqK*B5KY^;8X;-unmW|C#mw2k`bF-&_65p@1vT6$JtFLjQ3vWqBxG`hk?!ctN;_ Q_p1PGt(+_y&F>)p2Lpjx_W%F@ literal 0 HcmV?d00001 From 570b2e552fc8fa8f17f31129490c9b8d56278061 Mon Sep 17 00:00:00 2001 From: Kishore Date: Tue, 23 Sep 2025 16:51:27 +0530 Subject: [PATCH 2/2] updated the changes. --- MAUI/Chat/scrolling.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/MAUI/Chat/scrolling.md b/MAUI/Chat/scrolling.md index 3f62070243..632346c140 100644 --- a/MAUI/Chat/scrolling.md +++ b/MAUI/Chat/scrolling.md @@ -51,7 +51,7 @@ By default, the [SfChat](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Cha ## Scroll to bottom button -The `SfChat` control provides the option to display a scroll to bottom button by setting the [ShowScrollToBottomButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_ShowScrollToBottomButton) property to `true`. This button appears when scrolled up through older messages and allows quick navigation back to the latest message in the conversation. +The `SfChat` control provides the option to display a scroll to bottom button by setting the `ShowScrollToBottomButton` property to `true`. This button appears when scrolled up through older messages and allows quick navigation back to the latest message in the conversation. {% tabs %} {% highlight xaml hl_lines="4" %} @@ -76,7 +76,7 @@ sfChat.ShowScrollToBottomButton = true; ### Scroll to bottom button customization -The `SfChat` control allows you to fully customize the scroll to bottom button appearance by using the [ScrollToBottomButtonTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_ScrollToBottomButtonTemplate) property. This property lets you define a custom view and style. +The `SfChat` control allows you to fully customize the scroll to bottom button appearance by using the `ScrollToBottomButtonTemplate` property. This property lets you define a custom view and style. {% tabs %} {% highlight xaml hl_lines="20" %}