Thanks Anders!
In the meantime, I decided to create my own class using uno. Unfortunately, I have not been able to make it work and I do not know if it is because something is missing on my code or because here we have another bug.
First let me give a little bit of context of why I want to be able to change the number of columns based on the window size. I have been developing mobile apps for a long time using the responsive design approach and I think this is a really easy way to avoid creating as many versions of the app as different sizes of devices you are targeting. Of course, assuming that you want to be able to change the layout of the UI depending on the viewport size.
I would like to be able to change the number of columns based on 5 different sizes (xs – extra small, sm – small, md – medium, lg – large and xl – extra large), so I created this class:
using Uno;
using Uno.Collections;
using Fuse;
using Fuse.Controls;
sealed class RespPanelColumnCountProperty: Uno.UX.Property<int>
{
Fuse.Layouts.ColumnLayout _obj;
public RespPanelColumnCountProperty(Fuse.Layouts.ColumnLayout obj) { _obj = obj; }
protected override int OnGet() { return _obj.ColumnCount; }
protected override void OnSet(int v, object origin) { _obj.ColumnCount = v; }
}
public class RespPanel: Fuse.Controls.StackPanel
{
internal float2 xsSize;
internal float2 smSize;
internal float2 mdSize;
internal float2 lgSize;
internal float2 xlSize;
internal int xs;
internal int sm;
internal int md;
internal int lg;
internal int xl;
internal Fuse.Layouts.ColumnLayout colLayout;
public int Xs{
get{
return xs;
}
set{
xs = value;
var temp1 = new Fuse.Triggers.WhileWindowSize();
temp1.GreaterThan = xsSize;
var changeColumnCount = new Fuse.Animations.Change<int>(new RespPanelColumnCountProperty(colLayout));
temp1.Animators.Add(changeColumnCount);
changeColumnCount.Value = xs;
this.Behaviors.Add(temp1);
}
}
public int Sm{
get{
return sm;
}
set{
sm = value;
var temp2 = new Fuse.Triggers.WhileWindowSize();
temp2.GreaterThan = smSize;
var changeColumnCount = new Fuse.Animations.Change<int>(new RespPanelColumnCountProperty(colLayout));
temp2.Animators.Add(changeColumnCount);
changeColumnCount.Value = sm;
this.Behaviors.Add(temp2);
}
}
public int Md{
get{
return md;
}
set{
md = value;
var temp3 = new Fuse.Triggers.WhileWindowSize();
temp3.GreaterThan = mdSize;
var changeColumnCount = new Fuse.Animations.Change<int>(new RespPanelColumnCountProperty(colLayout));
temp3.Animators.Add(changeColumnCount);
changeColumnCount.Value = md;
this.Behaviors.Add(temp3);
}
}
public int Lg{
get{
return lg;
}
set{
lg = value;
var temp = new Fuse.Triggers.WhileWindowSize();
temp.GreaterThan = lgSize;
var changeColumnCount = new Fuse.Animations.Change<int>(new RespPanelColumnCountProperty(colLayout));
temp.Animators.Add(changeColumnCount);
changeColumnCount.Value = lg;
this.Behaviors.Add(temp);
}
}
public int Xl{
get{
return xl;
}
set{
xl = value;
var temp = new Fuse.Triggers.WhileWindowSize();
temp.GreaterThan = xlSize;
var changeColumnCount = new Fuse.Animations.Change<int>(new RespPanelColumnCountProperty(colLayout));
temp.Animators.Add(changeColumnCount);
changeColumnCount.Value = xl;
this.Behaviors.Add(temp);
}
}
static RespPanel(){
}
public RespPanel(){
InitializeUX();
}
void InitializeUX()
{
xsSize=float2(0f,0f);
smSize=float2(300f,300f);
mdSize=float2(410f,410f);
lgSize=float2(1000f,700f);
xlSize=float2(1280f,1000f);
colLayout = new Fuse.Layouts.ColumnLayout();
colLayout.ColumnCount = 1;
this.Layout = colLayout;
this.Orientation = Fuse.Layouts.Orientation.Vertical;
}
}
And then I can use something like:
<RespPanel Xl="5" Lg="4" Md="3" Sm="2" Xs="1" Margin="14,3,14,0">
<Text Value="Col1"/>
<Text Value="Col2"/>
<Text Value="Col3"/>
<Text Value="Col4"/>
<Text Value="Col5"/>
</RespPanel>
The problem is that if I run it using the included simulator (local) and I resize the window to test every breakpoint of the 5 different sizes (xs, sm, md, lg and xl) It works just when I go from a small size to a big size, but when I reach the biggest size and I try to resize the window to a smaller size, it doesn’t work for every breakpoint.
Additionally, I really want to suggest to include this kind of responsiveness as a capability to the layout system. I think this would make it even more powerful.
Regards
