Page 1 of 1

[SOLVED] button position, Design vs RunTime

Posted: Tue Jan 14, 2020 10:06 am
by Nick
On Design, Button is on Horizontal Center
Design1.png (168.57 KiB) Viewed 3200 times

On RunTime Button is on Left
runtime1.png (105.98 KiB) Viewed 3200 times

PS. Javascript code was create on Build action

See attachement
(3.32 KiB) Downloaded 187 times

Re: button position, Design vs RunTime

Posted: Fri Feb 07, 2020 7:17 pm
by fangeles
StackPanel automatically stacks child controls on the left (Orientation="Horizontal") or top (Orientation="Vertical"). I've also noticed that the designer does not display the XAML code correcty (mine's not displaying an output at all, instead errors also because of the ResourceDictionaries).

If you want to achieve the expected output using the StackPanel, set the StackPanel's width, then set the child control's horizontal alignment to center.


Code: Select all

<StackPanel Width="200">
   <Button Content="Hello" HorizontalAlignment="Center"/>

Or since setting the StackPanel's width is hassle and may not match the screen's width, you may use a Grid. (The grid automatically docks to the parent container and occupies the available space if you haven't set the width, height, horizontal and vertical alignments, and if you did not put the grid inside stackpanel or wrappanel)

Re: button position, Design vs RunTime

Posted: Sat Feb 08, 2020 4:50 pm
by Nick
I know how to avoid that, but this is a BUG
PS. What you will do when you convert an app from silverlight to cshtml5 ? Modify the code also ? (change the app flow ?)

Re: button position, Design vs RunTime

Posted: Tue Apr 21, 2020 2:10 am
by JS-Support @Userware

This issue has been fixed in a recent version.

In particular, I have just tested it with version "2.0.0-alpha62-082", and it works fine, as shown in the following screenshot:
button position - Design vs RunTime.png
button position - Design vs RunTime.png (94.34 KiB) Viewed 2654 times

To upgrade from v1.x to v2.x, create a backup of your project, then go to the Nuget package manager, search for CSHTML5, check "include preleases", and install the latest CSHTML5 package.