public RoundedFramePage ()
{
Title = "Rounded Frame Sample";
this.BackgroundColor = ColorHelper.MyLightGray.ToFormsColor();
var shadowSwitch = new Switch { IsToggled = true, HorizontalOptions = LayoutOptions.EndAndExpand };
var originalFrame = new Frame {
Content = new Label { Text = "This is a regular frame" },
};
var roundedFrame = new RoundedFrame {
HasShadow = true,
Content = new Label { Text = "This is a rounded frame" },
CornerRadius = 24d
};
var cornerRadiusSlider = new Slider (0d, 50d, 24d) { HorizontalOptions = LayoutOptions.EndAndExpand };
var outlineWidthSlider = new Slider (0d, 50d, 1d) { HorizontalOptions = LayoutOptions.EndAndExpand };
var borderColorPicker = new ColorPicker { SelectedColor = Color.Default };
var outlineColorPicker = new ColorPicker { SelectedColor = Color.Default };
Content = new ScrollView {
Content = new StackLayout {
Padding = new Thickness(8d),
Spacing = 4d,
Children = {
originalFrame,
roundedFrame,
new BoxView { HeightRequest=16d, BackgroundColor=Color.Transparent },
new Label { Text = "Background Color" },
borderColorPicker,
new Label { Text = "Outline Color" },
outlineColorPicker,
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Corner Radius", HorizontalOptions = LayoutOptions.Start },
cornerRadiusSlider,
},
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Outline Width", HorizontalOptions = LayoutOptions.Start },
outlineWidthSlider,
},
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Shadows?", HorizontalOptions = LayoutOptions.Start },
shadowSwitch,
},
},
}
}
};
roundedFrame.SetBinding(RoundedFrame.CornerRadiusProperty, new Binding("Value", BindingMode.TwoWay, source:cornerRadiusSlider));
originalFrame.SetBinding(RoundedFrame.HasShadowProperty, new Binding("IsToggled", BindingMode.TwoWay, source:shadowSwitch));
roundedFrame.SetBinding(RoundedFrame.HasShadowProperty, new Binding("IsToggled", BindingMode.TwoWay, source:shadowSwitch));
originalFrame.SetBinding(Frame.BackgroundColorProperty, new Binding("SelectedColor", BindingMode.OneWay, source:borderColorPicker));
roundedFrame.SetBinding(Frame.BackgroundColorProperty, new Binding("SelectedColor", BindingMode.OneWay, source:borderColorPicker));
originalFrame.SetBinding(Frame.OutlineColorProperty, new Binding("SelectedColor", BindingMode.OneWay, source:outlineColorPicker));
roundedFrame.SetBinding(Frame.OutlineColorProperty, new Binding("SelectedColor", BindingMode.OneWay, source:outlineColorPicker));
roundedFrame.SetBinding(RoundedFrame.OutlineWidthProperty, new Binding("Value", BindingMode.TwoWay, source:outlineWidthSlider));
}
public CappedImagePage ()
{
this.Title = "Capped Image Sample";
Dictionary<string, Thickness> images = new Dictionary<string, Thickness> {
{ "speechbubble.png", new Thickness (21d, 17d, 26.5d, 17.5d) },
{ "speechbubble_fancy_green.png", new Thickness (21f, 14f, 21f, 14f) },
{ "speechbubble_fancy_gray.png", new Thickness (21f, 14f, 21f, 14f) },
{ "button_normal.png", new Thickness (6d, 6d, 6d, 6d) },
{ "button_back.png", new Thickness (13d, 2d, 6d, 2d) },
};
var cappedImage = new CappedImage (images.First().Key, images.First().Value);
cappedImage.HorizontalOptions = LayoutOptions.Start;
var imagePicker = new Picker {
Title = "Image",
HorizontalOptions = LayoutOptions.FillAndExpand,
};
foreach (var item in images) {
imagePicker.Items.Add (item.Key);
}
imagePicker.SelectedIndex = 0;
imagePicker.SelectedIndexChanged += (sender, e) => {
var selectedItem = imagePicker.Items[imagePicker.SelectedIndex];
// Set these in a single call to prevent 2 layout calls (one of which will be a bit weird because the CapWidth won't match the ImageResource
cappedImage.LayoutPaused = true;
cappedImage.ImageResource = selectedItem;
cappedImage.CapWidth = images[selectedItem];
// Ensure we use the correct blend mode(s) for tinting
if (selectedItem == "speechbubble.png")
cappedImage.TintColorMode = TintColorModes.Solid;
else
cappedImage.TintColorMode = TintColorModes.Gradient;
cappedImage.LayoutPaused = false;
};
var flipVerticallySwitch = new Switch { HorizontalOptions = LayoutOptions.End};
var flipHorizontallySwitch = new Switch { HorizontalOptions = LayoutOptions.End};
var colorPicker = new ColorPicker {
HorizontalOptions = LayoutOptions.FillAndExpand
};
colorPicker.SelectedColorChanged += (sender, args) =>
{
cappedImage.TintColor = colorPicker.SelectedColor;
colorPicker.BackgroundColor = colorPicker.SelectedColor;
};
var widthSlider = new Slider {
Minimum = 0d,
Maximum = Application.Current.MainPage.Width-20f,
Value = 100d,
HorizontalOptions = LayoutOptions.EndAndExpand,
};
var heightSlider = new Slider {
Minimum = 0d,
Maximum = Application.Current.MainPage.Height,
Value = 50d,
HorizontalOptions = LayoutOptions.EndAndExpand,
};
var hasShadowSwitch = new Switch { HorizontalOptions = LayoutOptions.End };
this.Content = new ScrollView {
Content = new StackLayout {
Padding = new Thickness (8d, 8d, 8d, 8d),
Spacing = 8d,
Children = {
imagePicker,
new StackLayout {
Orientation = StackOrientation.Horizontal,
Spacing = 16,
Children = {
new Label { Text = "Color", HorizontalOptions = LayoutOptions.Start, YAlign = TextAlignment.Center },
colorPicker,
},
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label {
Text = "Flip Vertically",
HorizontalOptions = LayoutOptions.StartAndExpand,
YAlign = TextAlignment.Center
},
flipVerticallySwitch,
},
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label {
Text = "Flip Horizontally",
HorizontalOptions = LayoutOptions.StartAndExpand,
YAlign = TextAlignment.Center
},
flipHorizontallySwitch,
},
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label {
Text = "Has Shadow",
HorizontalOptions = LayoutOptions.StartAndExpand,
YAlign = TextAlignment.Center
},
hasShadowSwitch,
},
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Width", HorizontalOptions = LayoutOptions.StartAndExpand, YAlign = TextAlignment.Center },
widthSlider,
},
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Height", HorizontalOptions = LayoutOptions.StartAndExpand, YAlign = TextAlignment.Center },
heightSlider,
},
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
cappedImage,
new BoxView {
HorizontalOptions = LayoutOptions.EndAndExpand,
},
}
}
},
}
};
cappedImage.SetBinding(CappedImage.FlippedHorizontallyProperty, new Binding("IsToggled", BindingMode.OneWay, source:flipHorizontallySwitch));
cappedImage.SetBinding(CappedImage.FlippedVerticallyProperty, new Binding("IsToggled", BindingMode.OneWay, source:flipVerticallySwitch));
cappedImage.SetBinding(CappedImage.HasShadowProperty, new Binding("IsToggled", BindingMode.OneWay, source:hasShadowSwitch));
cappedImage.SetBinding(CappedImage.WidthRequestProperty, new Binding("Value", BindingMode.TwoWay, source:widthSlider));
cappedImage.SetBinding(CappedImage.HeightRequestProperty, new Binding("Value", BindingMode.TwoWay, source:heightSlider));
}
public VectorSpeechBubblePage ()
{
this.Title = "Vector Speech Bubble";
this.BackgroundColor = ColorHelper.MyLightBlue.ToFormsColor();
var bubble = new VectorSpeechBubble {
Text = "Hello there. Do you have a minute to talk?",
ArrowDirection = ArrowDirections.RightBottom,
BorderColor = Color.White,
BorderWidth = 4d,
// Padding = new Thickness(8d,8d,8d,8d), // TODO: Auto calculate padding based on the arrow direction and size. This padding should be in addition to
HasShadow = true,
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Start,
};
var arrowDirectionPicker = new Picker {
HorizontalOptions = LayoutOptions.End,
WidthRequest=150d,
};
foreach (var direction in System.Enum.GetNames(typeof(ArrowDirections))) {
arrowDirectionPicker.Items.Add (direction);
}
arrowDirectionPicker.SelectedIndex = arrowDirectionPicker.Items.IndexOf (ArrowDirections.RightBottom.ToString());
arrowDirectionPicker.SelectedIndexChanged += (object sender, System.EventArgs e) => {
var selectedValue = arrowDirectionPicker.Items[arrowDirectionPicker.SelectedIndex];
var direction = (ArrowDirections)System.Enum.Parse(typeof(ArrowDirections), selectedValue);
bubble.ArrowDirection = direction;
};
var shadowSwitch = new Switch() { HorizontalOptions = LayoutOptions.End, WidthRequest=150d };
var fillColorPicker = new ColorPicker () { HorizontalOptions = LayoutOptions.End, WidthRequest=150d };
fillColorPicker.SelectedColor = Color.Silver;
var gradientColorPicker = new ColorPicker () { HorizontalOptions = LayoutOptions.End, WidthRequest=150d };
gradientColorPicker.SelectedColor = Color.Default;
var borderColorPicker = new ColorPicker () { HorizontalOptions = LayoutOptions.End, WidthRequest=150d };
borderColorPicker.SelectedColor = Color.Purple;
var borderWidthSlider = new Slider (0d, 100d, 4d) { HorizontalOptions = LayoutOptions.End, WidthRequest=150d };
var cornerRadiusSlider = new Slider (0d, 50d, 10d) { HorizontalOptions = LayoutOptions.End, WidthRequest=150d };
var widthSlider = new Slider {
Minimum = 0d,
Maximum = Application.Current.MainPage.Width - 20d,
Value = Application.Current.MainPage.Width,
HorizontalOptions = LayoutOptions.End,
WidthRequest = 150d,
};
var heightSlider = new Slider {
Minimum = 0d,
Maximum = 300d,
Value = 50d,
HorizontalOptions = LayoutOptions.End,
WidthRequest = 150d,
};
var sliderLabelStyle = new Style (typeof(Label)) {
Setters = {
new Setter {Property=Label.FontProperty, Value= Font.SystemFontOfSize (NamedSize.Micro)},
new Setter {Property=Label.YAlignProperty, Value=TextAlignment.Center},
},
};
var borderWidthLabel = new Label { Style= sliderLabelStyle};
var cornerRadiusLabel = new Label { Style= sliderLabelStyle}; // new Label { Font = Font.SystemFontOfSize (NamedSize.Micro), YAlign = TextAlignment.Center };
var heightLabel = new Label { Style= sliderLabelStyle}; // new Label { Font = Font.SystemFontOfSize (NamedSize.Micro), YAlign = TextAlignment.Center };
var widthLabel = new Label { Style= sliderLabelStyle}; // new Label { Font = Font.SystemFontOfSize (NamedSize.Micro), YAlign = TextAlignment.Center };
this.Content = new ScrollView {
Content = new StackLayout {
Padding = new Thickness(4d,4d,4d,4d),
Spacing = 4d,
Children = {
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Arrow Direction", HorizontalOptions = LayoutOptions.FillAndExpand, YAlign = TextAlignment.Center },
arrowDirectionPicker,
}
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Has Shadow", HorizontalOptions = LayoutOptions.FillAndExpand, YAlign = TextAlignment.Center },
shadowSwitch,
}
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Fill Color", HorizontalOptions = LayoutOptions.FillAndExpand, YAlign = TextAlignment.Center },
fillColorPicker,
}
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Gradient Color", HorizontalOptions = LayoutOptions.FillAndExpand, YAlign = TextAlignment.Center },
gradientColorPicker,
}
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Border Color", HorizontalOptions = LayoutOptions.FillAndExpand, YAlign = TextAlignment.Center },
borderColorPicker,
}
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Border Width", HorizontalOptions = LayoutOptions.FillAndExpand, YAlign = TextAlignment.Center },
borderWidthLabel,
borderWidthSlider,
}
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Corner Radius", HorizontalOptions = LayoutOptions.FillAndExpand, YAlign = TextAlignment.Center },
cornerRadiusLabel,
cornerRadiusSlider,
}
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Width", HorizontalOptions = LayoutOptions.FillAndExpand, YAlign = TextAlignment.Center },
widthLabel,
widthSlider,
}
},
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Height", HorizontalOptions = LayoutOptions.FillAndExpand, YAlign = TextAlignment.Center },
heightLabel,
heightSlider,
}
},
new BoxView { HeightRequest = 12d }, // For some additional spacing
bubble,
},
}
};
bubble.SetBinding(VectorSpeechBubble.FillColorProperty, new Binding("SelectedColor", BindingMode.OneWay, source:fillColorPicker));
bubble.SetBinding(VectorSpeechBubble.GradientFillColorProperty, new Binding("SelectedColor", BindingMode.OneWay, source:gradientColorPicker));
bubble.SetBinding(VectorSpeechBubble.BorderColorProperty, new Binding("SelectedColor", BindingMode.OneWay, source:borderColorPicker));
bubble.SetBinding(VectorSpeechBubble.BorderWidthProperty, new Binding("Value", BindingMode.TwoWay, source:borderWidthSlider));
bubble.SetBinding(VectorSpeechBubble.CornerRadiusProperty, new Binding("Value", BindingMode.TwoWay, source:cornerRadiusSlider));
bubble.SetBinding(VectorSpeechBubble.WidthRequestProperty, new Binding("Value", BindingMode.TwoWay, source:widthSlider));
bubble.SetBinding(VectorSpeechBubble.HeightRequestProperty, new Binding("Value", BindingMode.TwoWay, source:heightSlider));
bubble.SetBinding(VectorSpeechBubble.HasShadowProperty, new Binding("IsToggled", BindingMode.TwoWay, source:shadowSwitch));
borderWidthLabel.SetBinding(Label.TextProperty, new Binding("Value", BindingMode.OneWay, source:borderWidthSlider, stringFormat:"{0:0.0}"));
cornerRadiusLabel.SetBinding(Label.TextProperty, new Binding("Value", BindingMode.OneWay, source:cornerRadiusSlider, stringFormat:"{0:0.0}"));
heightLabel.SetBinding(Label.TextProperty, new Binding("Value", BindingMode.OneWay, source:heightSlider));
widthLabel.SetBinding(Label.TextProperty, new Binding("Value", BindingMode.OneWay, source:widthSlider));
}
