3.Xamarin.Forms中布局控件的使用
这里我所使用的主要还是是StackLayout，可以横或竖的依次排列其他控件。
先解决下条目过多是滚动的问题吧。
使用的控件为ScrollView，然后把StackLayout放在它里面就行了。
举个例子，一个颜色的列表：
class aaa:ContentPage
{
public aaa()
{
var colors = new[]
{
new { value = Color.White, name = "White" },
new { value = Color.Silver, name = "Silver" },
new { value = Color.Gray, name = "Gray" },
new { value = Color.Black, name = "Black" },
new { value = Color.Red, name = "Red" },
new { value = Color.Maroon, name = "Maroon" },
new { value = Color.Yellow, name = "Yellow" },
new { value = Color.Olive, name = "Olive" },
new { value = Color.Lime, name = "Lime" },
new { value = Color.Green, name = "Green" },
new { value = Color.Aqua, name = "Aqua" },
new { value = Color.Teal, name = "Teal" },
new { value = Color.Blue, name = "Blue" },
new { value = Color.Navy, name = "Navy" },
new { value = Color.Pink, name = "Pink" },
new { value = Color.Fuchsia, name = "Fuchsia" },
new { value = Color.Purple, name = "Purple" },
new {value=Color.Fuschia,name="Fuschia"}
};
StackLayout stackLayout = new StackLayout();
foreach (var color in colors)
{
stackLayout.Children.Add(new Label
{
Text = color.name,
TextColor = color.value,
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
});
}
Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5);
Content = new ScrollView
{
Content = stackLayout
};
}
}
然后是横向的实现:
也就是加两行代码
class aaa:ContentPage
{
public aaa()
{
var colors = new[]
{
new { value = Color.White, name = "White" },
new { value = Color.Silver, name = "Silver" },
new { value = Color.Gray, name = "Gray" },
new { value = Color.Black, name = "Black" },
new { value = Color.Red, name = "Red" },
new { value = Color.Maroon, name = "Maroon" },
new { value = Color.Yellow, name = "Yellow" },
new { value = Color.Olive, name = "Olive" },
new { value = Color.Lime, name = "Lime" },
new { value = Color.Green, name = "Green" },
new { value = Color.Aqua, name = "Aqua" },
new { value = Color.Teal, name = "Teal" },
new { value = Color.Blue, name = "Blue" },
new { value = Color.Navy, name = "Navy" },
new { value = Color.Pink, name = "Pink" },
new { value = Color.Fuchsia, name = "Fuchsia" },
new { value = Color.Purple, name = "Purple" },
new {value=Color.Fuschia,name="Fuschia"}
};
StackLayout stackLayout = new StackLayout
{
Orientation = StackOrientation.Horizontal
};
foreach (var color in colors)
{
stackLayout.Children.Add(new Label
{
Text = color.name,
TextColor = color.value,
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
});
}
Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5);
Content = new ScrollView
{
Orientation=ScrollOrientation.Horizontal,
Content = stackLayout
};在各种控件的属性里还有位置的属性可以设置
有如下可用的选项：
LayoutOptions.Start
LayoutOptions.Center
LayoutOptions.End
LayoutOptions.Fill
LayoutOptions.StartAndExpand
LayoutOptions.CenterAndExpand
LayoutOptions.EndAndExpand
LayoutOptions.FillAndExpand class aaa:ContentPage
{
public aaa()
{
Color[] colors = { Color.Yellow, Color.Blue };
int flipFlopper = 0;
// Create Labels sorted by LayoutAlignment property.
IEnumerable<Label> labels =
from field in typeof(LayoutOptions).GetRuntimeFields()
where field.IsPublic && field.IsStatic
orderby ((LayoutOptions)field.GetValue(null)).Alignment
select new Label
{
Text = "VerticalOptions = " + field.Name,
VerticalOptions = (LayoutOptions)field.GetValue(null),
XAlign = TextAlignment.Center,
FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
TextColor = colors[flipFlopper],
BackgroundColor = colors[flipFlopper = 1 - flipFlopper]
};
// Transfer to StackLayout.
StackLayout stackLayout = new StackLayout();
foreach (Label label in labels) { stackLayout.Children.Add(label); }
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0); Content = stackLayout;
}
}
然后下面是Frame和BoxView的使用。
先简单的使用下frame；
class aaa:ContentPage
{
public aaa()
{
Padding = new Thickness(20);
Content = new Frame
{
OutlineColor = Color.Accent,
Content = new Label
{
Text = "I've been framed!",
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}
};
}
}
也可以让他紧贴文字：
class aaa:ContentPage
{
public aaa()
{
Padding = new Thickness(20);
Content = new Frame
{
OutlineColor = Color.Accent,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Content = new Label
{
Text = "I've been framed!",
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
}
};
}
}当然，也可以改变他的颜色
class aaa:ContentPage
{
public aaa()
{
BackgroundColor = Color.Aqua;
Padding = new Thickness(20);
Content = new Frame
{
OutlineColor = Color.Black,
BackgroundColor = Color.Yellow,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Content = new Label
{
Text = "I've been framed!",
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
TextColor = Color.Blue
}
};
}
}
创建一个简单的BoxView
class aaa:ContentPage
{
public aaa()
{
Content = new BoxView
{
Color = Color.Accent,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
}
}
同样可以用上面的方法来改变颜色。
最后在附上个综合点的例子：
class aaa:ContentPage
{
View CreateColorView(Color color, string name)
{
return new Frame
{
OutlineColor = Color.Accent,
Padding = new Thickness(5),
Content = new StackLayout
{
Orientation = StackOrientation.Horizontal,
Spacing = 15,
Children =
{
new BoxView
{
Color = color
},
new Label
{
Text = name,
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
FontAttributes = FontAttributes.Bold,
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.StartAndExpand
},
new StackLayout
{
Children =
{
new Label
{
Text = String.Format("{0:X2}-{1:X2}-{2:X2}",
(int)(255 * color.R),
(int)(255 * color.G),
(int)(255 * color.B)),
VerticalOptions = LayoutOptions.CenterAndExpand,
IsVisible = color != Color.Default
},
new Label
{
Text = String.Format("{0:F2}, {1:F2}, {2:F2}",
color.Hue,
color.Saturation,
color.Luminosity),
VerticalOptions = LayoutOptions.CenterAndExpand,
IsVisible = color != Color.Default
}
},
HorizontalOptions = LayoutOptions.End
}
}
}
};
}
public aaa()
{
Content = new ScrollView
{
Orientation=ScrollOrientation.Vertical,
Content = new StackLayout
{
Children =
{
CreateColorView(Color.Aqua,"Aqua"),
CreateColorView(Color.Black,"Black"),
CreateColorView(Color.Blue,"Blue"),
CreateColorView(Color.Fuchsia,"Fuchsia"),
CreateColorView(Color.Green,"Green"),
CreateColorView(Color.Navy,"Navy"),
CreateColorView(Color.Pink,"Pink"),
CreateColorView(Color.Aqua,"Aqua"),
CreateColorView(Color.Black,"Black"),
CreateColorView(Color.Blue,"Blue"),
CreateColorView(Color.Fuchsia,"Fuchsia"),
CreateColorView(Color.Green,"Green"),
CreateColorView(Color.Navy,"Navy"),
CreateColorView(Color.Pink,"Pink"),
CreateColorView(Color.Aqua,"Aqua"),
CreateColorView(Color.Black,"Black"),
CreateColorView(Color.Blue,"Blue"),
CreateColorView(Color.Fuchsia,"Fuchsia"),
CreateColorView(Color.Green,"Green"),
CreateColorView(Color.Navy,"Navy"),
CreateColorView(Color.Pink,"Pink"),
CreateColorView(Color.Aqua,"Aqua"),
CreateColorView(Color.Black,"Black"),
CreateColorView(Color.Blue,"Blue"),
CreateColorView(Color.Fuchsia,"Fuchsia"),
CreateColorView(Color.Green,"Green"),
CreateColorView(Color.Navy,"Navy"),
CreateColorView(Color.Pink,"Pink")
}
}
};
}
}