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)); }