public SvgImageSamplePage()
{
_ViewModel = new SvgImageSamplePageViewModel();
var insetLabel = new Label();
insetLabel.SetBinding(Label.TextProperty, nameof(SvgImageSamplePageViewModel.SvgInsets), stringFormat: "Stretchable Insets: {0:C2}");
var resourcePicker = new Picker()
{
HorizontalOptions = LayoutOptions.FillAndExpand,
};
foreach (var resourceName in SvgImageSamplePageViewModel.AvailableResourceNames)
{
resourcePicker.Items.Add(resourceName);
}
resourcePicker.SetBinding(Picker.SelectedIndexProperty, nameof(SvgImageSamplePageViewModel.SvgResourceIndex), BindingMode.TwoWay);
var insetSlider = new Slider()
{
Minimum = 0,
Maximum = 35,
Value = _ViewModel.AllSidesInset,
};
insetSlider.SetBinding(Slider.ValueProperty, nameof(SvgImageSamplePageViewModel.AllSidesInset), BindingMode.TwoWay);
var slicingSvg = new SvgImage()
{
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
WidthRequest = 300,
HeightRequest = 300,
};
slicingSvg.SetBinding(SvgImage.SvgStretchableInsetsProperty, nameof(SvgImageSamplePageViewModel.SvgInsets));
slicingSvg.SetBinding(SvgImage.SvgPathProperty, nameof(SvgImageSamplePageViewModel.SvgResourcePath));
var svgButton = new Button()
{
WidthRequest = 300,
HeightRequest = 300,
BackgroundColor = Color.Transparent,
};
// The root page of your application
Title = "9-Slice SVG Scaling";
Content = new ScrollView {
Content = new StackLayout {
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.Center,
Children =
{
insetLabel,
resourcePicker,
insetSlider,
new AbsoluteLayout()
{
WidthRequest = 300,
HeightRequest = 300,
Children =
{
slicingSvg,
svgButton,
},
},
new Label()
{
Text = "Using TwinTechsForms.SvgImage",
},
new Label()
{
Text = "Proportional Scaling",
},
new SvgImage()
{
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
WidthRequest = 50,
HeightRequest = 50,
},
new SvgImage()
{
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
WidthRequest = 100,
HeightRequest = 100,
},
new Label()
{
Text = "9-Slice Scaling",
},
new SvgImage()
{
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
SvgStretchableInsets = new ResizableSvgInsets(18),
WidthRequest = 50,
HeightRequest = 50,
HorizontalOptions = LayoutOptions.Start,
},
new SvgImage()
{
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
SvgStretchableInsets = new ResizableSvgInsets(18),
WidthRequest = 100,
HeightRequest = 100,
HorizontalOptions = LayoutOptions.Start,
},
new SvgImage()
{
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
SvgStretchableInsets = new ResizableSvgInsets(18),
WidthRequest = 300,
HeightRequest = 300,
HorizontalOptions = LayoutOptions.Start,
},
new Label()
{
Text = "Using TwinTechsForms.NControl.SvgImageView",
},
new Label()
{
Text = "Proportional Scaling",
},
new SvgImageView()
{
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
WidthRequest = 50,
HeightRequest = 50,
},
new SvgImageView()
{
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
WidthRequest = 100,
HeightRequest = 100,
},
new Label()
{
Text = "9-Slice Scaling",
},
new SvgImageView()
{
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
SvgStretchableInsets = new TwinTechsForms.NControl.ResizableSvgInsets(18),
WidthRequest = 50,
HeightRequest = 50,
HorizontalOptions = LayoutOptions.Start,
},
new SvgImageView()
{
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
SvgStretchableInsets = new TwinTechsForms.NControl.ResizableSvgInsets(18),
WidthRequest = 100,
HeightRequest = 100,
HorizontalOptions = LayoutOptions.Start,
},
new SvgImageView()
{
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
SvgStretchableInsets = new TwinTechsForms.NControl.ResizableSvgInsets(18),
WidthRequest = 300,
HeightRequest = 300,
HorizontalOptions = LayoutOptions.Start,
},
},
BindingContext = _ViewModel,
},
};
svgButton.Clicked += (sender, e) => {
DisplayAlert("Tapped!", "SVG button tapped!", "OK");
};
}
public SvgImageSamplePage ()
{
_ViewModel = new SvgImageSamplePageViewModel();
var insetLabel = new Label();
insetLabel.SetBinding(Label.TextProperty, nameof(SvgImageSamplePageViewModel.SvgInsets), stringFormat: "Stretchable Insets: {0:C2}");
var resourcePicker = new Picker() {
HorizontalOptions = LayoutOptions.FillAndExpand,
};
foreach (var resourceName in SvgImageSamplePageViewModel.AvailableResourceNames) {
resourcePicker.Items.Add(resourceName);
}
resourcePicker.SetBinding(Picker.SelectedIndexProperty, nameof(SvgImageSamplePageViewModel.SvgResourceIndex), BindingMode.TwoWay);
var insetSlider = new Slider() {
Minimum = 0,
Maximum = 35,
Value = _ViewModel.AllSidesInset,
};
insetSlider.SetBinding(Slider.ValueProperty, nameof(SvgImageSamplePageViewModel.AllSidesInset), BindingMode.TwoWay);
var slicingSvg = new SvgImage() {
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
WidthRequest = 300,
HeightRequest = 300,
};
slicingSvg.SetBinding(SvgImage.SvgStretchableInsetsProperty, nameof(SvgImageSamplePageViewModel.SvgInsets));
slicingSvg.SetBinding(SvgImage.SvgPathProperty, nameof(SvgImageSamplePageViewModel.SvgResourcePath));
var svgButton = new Button() {
WidthRequest = 300,
HeightRequest = 300,
BackgroundColor = Color.Transparent,
};
// The root page of your application
Title = "9-Slice SVG Scaling";
Content = new ScrollView {
Content = new StackLayout {
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.Center,
Children = {
insetLabel,
resourcePicker,
insetSlider,
new AbsoluteLayout() {
WidthRequest = 300,
HeightRequest = 300,
Children = {
slicingSvg,
svgButton,
},
},
new Label () {
Text = "Using TwinTechsForms.SvgImage",
},
new Label () {
Text = "Proportional Scaling",
},
new SvgImage() {
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
WidthRequest = 50,
HeightRequest = 50,
},
new SvgImage() {
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
WidthRequest = 100,
HeightRequest = 100,
},
new Label () {
Text = "9-Slice Scaling",
},
new SvgImage() {
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
SvgStretchableInsets = new ResizableSvgInsets (18),
WidthRequest = 50,
HeightRequest = 50,
HorizontalOptions = LayoutOptions.Start,
},
new SvgImage() {
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
SvgStretchableInsets = new ResizableSvgInsets (18),
WidthRequest = 100,
HeightRequest = 100,
HorizontalOptions = LayoutOptions.Start,
},
new SvgImage() {
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
SvgStretchableInsets = new ResizableSvgInsets (18),
WidthRequest = 300,
HeightRequest = 300,
HorizontalOptions = LayoutOptions.Start,
},
new Label () {
Text = "Using TwinTechsForms.NControl.SvgImageView",
},
new Label () {
Text = "Proportional Scaling",
},
new SvgImageView() {
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
WidthRequest = 50,
HeightRequest = 50,
},
new SvgImageView() {
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
WidthRequest = 100,
HeightRequest = 100,
},
new Label () {
Text = "9-Slice Scaling",
},
new SvgImageView () {
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
SvgStretchableInsets = new TwinTechsForms.NControl.ResizableSvgInsets (18),
WidthRequest = 50,
HeightRequest = 50,
HorizontalOptions = LayoutOptions.Start,
},
new SvgImageView () {
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
SvgStretchableInsets = new TwinTechsForms.NControl.ResizableSvgInsets (18),
WidthRequest = 100,
HeightRequest = 100,
HorizontalOptions = LayoutOptions.Start,
},
new SvgImageView () {
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
SvgPath = "TwinTechs.TwinTechs.Example.SvgImageSample.Assets.funky-border.svg",
SvgStretchableInsets = new TwinTechsForms.NControl.ResizableSvgInsets (18),
WidthRequest = 300,
HeightRequest = 300,
HorizontalOptions = LayoutOptions.Start,
},
},
BindingContext = _ViewModel,
},
};
svgButton.Clicked += (sender, e) => {
DisplayAlert("Tapped!", "SVG button tapped!", "OK");
};
}