The Problem
I am trying to simply display images in 2 rows, 2 columns - equally centered all around.
I have tried all sorts of Layouts. Here are a couple of my failures:
My Ideal Layout
My XML
<Page loaded="pageLoaded" class="page"
xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar class="action-bar customActionBar" >
<!--
Use the NavigationButton as a side-drawer button in Android
because ActionItems are shown on the right side of the ActionBar
-->
<NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
<!--
Use the ActionItem for IOS with position set to left. Using the
NavigationButton as a side-drawer button in iOS is not possible,
because its function is to always navigate back in the application.
-->
<ActionItem icon="res://navigation/menu"
android:visibility="collapsed"
tap="onDrawerButtonTap"
ios.position="left"></ActionItem>
<Label class="action-bar-title" text="Signup"></Label>
</ActionBar>
<DockLayout width="100%" height="100%" backgroundColor="lightgray" class="page-gradient"
stretchLastChild="false">
<Button class="submitButton h2 border" text="Next" height="60" dock="bottom"
tap="onSignupButtonTap" returnKeyType="next"/>
<!-- content -->
<StackLayout dock="top" width="100%" height="75" >
<!-- ><Label horizontalAlignment="center" text="Graphic - Step 1 thru 3 Here" />
-->
<Image class="" src="~/images/signup/step-1-on.png" stretch="fill" />
<Image style="margin-top: 15" src="~/images/signup/progress.png" stretch="fill" />
</StackLayout>
<WrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
<Label text="Label 1" width="70" height="70" backgroundColor="red"/>
<Label text="Label 2" width="70" height="70" backgroundColor="green"/>
<Label text="Label 3" width="70" height="70" backgroundColor="blue"/>
<Label text="Label 4" width="70" height="70" backgroundColor="yellow"/>
</WrapLayout>
<!-- end content -->
</DockLayout>
</Page>
Can you help me with this layout? It appears to be easy, but not for me.
Thank You.
Created a playground here.
GridLayout is the king.
<GridLayout columns="*, *" rows="*, *" width="230" height="230"
backgroundColor="lightgray">
<Label text="Label 1" row="0" col="0" backgroundColor="red" />
<Label text="Label 2" row="0" col="1" backgroundColor="green" />
<Label text="Label 3" row="1" col="0" backgroundColor="blue" />
<Label text="Label 4" row="1" col="1" backgroundColor="yellow" />
<Label text="Label 5" row="1" col="2" backgroundColor="orange" />
</GridLayout>
Related
I am using Xamarin forms version (5.0.0.2515) and Xamarin community toolkit (2.0.4). I have tried to set TabViewItem content a normal label as well as a sample content view but none of them is rendering. Am I missing something or may be doing something wrong or anybody else recently faced similar issue with Xamarin community toolkit TabView.
Emulator Screenshot
Sample code :
<ContentPage.Content>
<ScrollView>
<Grid RowDefinitions="220,Auto,auto,Auto,Auto,150" RowSpacing="5">
<Image
Aspect="Fill"
Source="ocean.jpeg"
HeightRequest="190"
VerticalOptions="Fill"
HorizontalOptions="Fill"/>
<Label
Margin="0,15,20,0"
VerticalOptions="Start"
HorizontalOptions="End"
WidthRequest="30"
FontSize="30"
TextColor="White"
FontFamily="Material"
Text=""/>
<pancakeview:PancakeView Grid.Row="1" Margin="0,-20,0,0" CornerRadius="30,30,0,00">
<Grid RowDefinitions="Auto,Auto,auto,Auto,10,Auto" BackgroundColor="white">
<Label Margin="9,10,6,0" HorizontalOptions="StartAndExpand">
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="Medium"
Text="Delhi"
TextColor="Black" />
<Span Text=" " FontSize="14"/>
<Span
FontSize="16"
FontFamily="Material"
Text=""
TextColor="Black" />
<Span
Text=" "
FontSize="Medium"/>
<Span
FontFamily="FontMontserratMedium"
FontSize="Medium"
Text="Kasol, Haridwar, Rishikesh"
TextColor="Black" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label
Margin="9,0,5,0"
Grid.Row="1"
Text="Monday, 25 July 2022 To Friday, 25 July 2022"
FontSize="11"
TextColor="Black"
HorizontalTextAlignment="Center"
HorizontalOptions="Start"/>
<Label
Margin="9,0,5,0"
Grid.Row="2"
FontSize="Caption"
Text="Safar Partner Id: Safar2022"/>
<StackLayout
Margin="9,0,5,0"
Grid.Row="3"
Orientation="Horizontal"
Spacing="15"
HorizontalOptions="Start"
Padding="5">
<Label
FontFamily="Material"
FontSize="26"
TextColor="Black"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
Text=""
FontSize="26"/>
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
</StackLayout>
<StackLayout Grid.Row="3"
Margin="0,-20,5,5"
HorizontalOptions="End"
Orientation="Vertical"
Spacing="10">
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="14"
Text="Rating"
TextColor="Black" />
<Span Text=" 5" FontSize="14"/>
<Span Text=" *" FontSize="15" TextColor="Gold"/>
</FormattedString>
</Label.FormattedText>
</Label>
<pancakeview:PancakeView CornerRadius="10">
<Label Text="View review" BackgroundColor="LightGreen"/>
</pancakeview:PancakeView>
</StackLayout>
<Label Grid.Row="4" BackgroundColor="LightGreen" Opacity="0.7"/>
<Grid Grid.Row="5">
<xct:TabView
TabStripPlacement="Top"
TabStripBackgroundColor="White"
TabStripHeight="40"
TabIndicatorColor="Green"
TabContentBackgroundColor="White">
<xct:TabViewItem
Text="Overview"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="Itineary" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Itineary"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="Itineary" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Safety and Security"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Terms/Conditions"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
</Grid>
</pancakeview:PancakeView>
<pancakeview:PancakeView
Grid.Row="1"
VerticalOptions="Start"
HorizontalOptions="End"
CornerRadius="10,0,0,10"
HeightRequest="60"
WidthRequest="150"
Margin="0,-70,18,-10">
<StackLayout
BackgroundColor="{AppThemeBinding Dark=Gray,Light=black}" >
<Label Margin="5,5,0,3">
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="12"
Text="Rs 4000"
TextColor="White" />
<Span
Text=" 50 % Off"
FontSize="10"
TextColor="Red"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Margin="5,-5,0,0">
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="15"
Text="Rs 2000/"
TextColor="White" />
<Span
Text=" Per Person"
TextColor="White"
FontSize="Caption"/>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</pancakeview:PancakeView>
</Grid>
</ScrollView>
</ContentPage.Content>
I am currently going through the style aspects of a Xamarin Forms Shell Application, I am currently not able to find how to change the FlyoutMenu TextColor.
I have tried adding a style for Label TextColor with the BasedOn being the Base Style I am using, but the text colour still does not change, or it changes all label's TextColor.
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MainShellPage"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
NavigationPage.HasBackButton="False"
FlyoutBackgroundColor="{StaticResource Grey}"
BackgroundColor="{StaticResource Grey}"
IsBusy="{Binding IsBusy}"
BindingContext="{Binding MainShell, Source={StaticResource ViewModelLocator}}"
Navigated="MainShellPage_OnNavigated">
<Shell.Resources>
<Style x:Key="BaseStyle"
TargetType="Element">
<Setter Property="Shell.BackgroundColor"
Value="{StaticResource Grey}" />
<Setter Property="Shell.ForegroundColor"
Value="{StaticResource White}" />
<Setter Property="Shell.TitleColor"
Value="{StaticResource White}" />
<Setter Property="Shell.DisabledColor"
Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor"
Value="#95FFFFFF" />
</Style>
</Shell.Resources>
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<StackLayout BackgroundColor="{StaticResource Grey}" HeightRequest="180"
Orientation="Vertical">
<Image Source="mobile_logo" HorizontalOptions="Center" VerticalOptions="Start"
WidthRequest="160"/>
<Label Text="{Binding TeamName}" TextColor="{StaticResource White}" FontAttributes="Bold"
HorizontalOptions="Center" />
<Label Text="{Binding UserFullName}" TextColor="{StaticResource White}"
HorizontalOptions="Center" />
<Label Text="{Binding UserEmail}" TextColor="{StaticResource White}"
HorizontalOptions="Center" />
<Label Text="{Binding Version}" TextColor="{StaticResource White}" VerticalOptions="End"
HorizontalOptions="End" Margin="0, 10, 0, 0" FontSize="10" />
</StackLayout>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<Tab Title="TabOne" Style="{StaticResource BaseStyle}"
Route="tabone">
<Tab.Icon>
<FontImageSource
Glyph="{Binding TabOneGlyph, Source={StaticResource MainShellGlyphHelper}}"
FontFamily="{StaticResource FontAwesome}" Color="{StaticResource White}" />
</Tab.Icon>
<ShellContent Title="TabOne" ContentTemplate="{DataTemplate pages:TabOnePage}" />
</Tab>
<Tab Title="TabTwo" Style="{StaticResource BaseStyle}"
Route="tabtwo">
<Tab.Icon>
<FontImageSource
Glyph="{Binding TabTwoGlyph, Source={StaticResource MainShellGlyphHelper}}"
FontFamily="{StaticResource FontAwesome}" Color="{StaticResource White}" />
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate pages:TabTwoPage}" />
</Tab>
</FlyoutItem>
<MenuItem />
<MenuItem />
<MenuItem />
<MenuItem
Text="MenuItemOne"
Command="{Binding MenuItemOneCommand}">
<MenuItem.IconImageSource>
<FontImageSource Glyph="{Binding MenuItemOneGlyph, Source={StaticResource MainShellGlyphHelper}}"
FontFamily="{StaticResource FontAwesome}" Color="{StaticResource White}" />
</MenuItem.IconImageSource>
</MenuItem>
I am currently not able to find how to change the FlyoutMenu TextColor.
From this document, Shell includes three style classes, which are automatically applied to FlyoutItem and MenuItem objects. The style class names are FlyoutItemLabelStyle, FlyoutItemImageStyle, and FlyoutItemLayoutStyle.
If you want to change FlyoutMenu Text color, you can create new style and use FlyoutItemLabelStyle to change FlyoutMenu text color.
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="Red" />
</Style>
From Flyout Items document, each ShellContent object can only be accessed through flyout items, and not through tabs. This is because by default, tabs will only be displayed if the flyout item contains more than one tab.
So you need to add Tab in FlyoutItem if you want o display FlyoutMenu.
<FlyoutItem Title="About" Icon="icon_about.png">
<Tab>
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" Route="AboutPage" />
</Tab>
</FlyoutItem>
<FlyoutItem Title="Browse" Icon="icon_feed.png">
<Tab>
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" Route="ItemsPage" />
</Tab>
</FlyoutItem>
There is another way of doing it, you can set an ItemTemplate to your flyout as you did for the header, then you can set a colour for the text:
<Shell.ItemTemplate>
<DataTemplate>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<!-- Icon -->
<ColumnDefinition Width="*"/>
<!-- Title-->
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!-- Icon -->
<Label Grid.Column="0"
Margin="20,0,0,0"
VerticalOptions="Center"
HorizontalTextAlignment="Center"
HorizontalOptions="Center"
Text="{Binding Icon}"
FontFamily="{StaticResource FontAwesome}"
FontSize="26"
TextColor="{StaticResource White}"/>
<!-- Label -->
<Label Grid.Column="1"
Text="{Binding Title}"
FontSize="23"
VerticalOptions="Center"
VerticalTextAlignment="Center"
TextColor="[ Here you can insert the colour you want]"
HorizontalOptions="Start" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
And then, to use it:
<FlyoutItem Title="TabOne"
Icon="{Binding TabOneGlyph, Source={StaticResource
MainShellGlyphHelper}}">
<ShellContent ContentTemplate="{DataTemplate pages:TabOnePage}"/>
</FlyoutItem>
I am doing this technique in most of my project when I sure Shell.
Here's an example of a project I did: https://github.com/bricefriha/AresGaming/blob/master/AresNews/AresNews/AppShell.xaml
I hope this helped you 😉
I am placing a ScrollView inside the AbsoluteLayout and I want to move it downwards according to my requirement, so I have translated the y position of the ScrollView.
But after that, only a certain part of the content is visible when scrolling and not all content of the ScrollView.
How to overcome this?
I need to visualize all content of the ScrollView when scrolling, even after the view is translated.
XAML:
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="1">
<ScrollView x:Name="scrollView" AbsoluteLayout.LayoutFlags="SizeProportional"
AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout>
<Button Margin="10" Text="Button 1"/>
<Button Margin="10" Text="Button 2"/>
<Button Margin="10" Text="Button 3"/>
<Button Margin="10" Text="Button 4"/>
<Button Margin="10" Text="Button 5"/>
<Button Margin="10" Text="Button 6"/>
<Button Margin="10" Text="Button 7"/>
<Button Margin="10" Text="Button 8"/>
<Button Margin="10" Text="Button 9"/>
<Button Margin="10" Text="Button 10"/>
<Button Margin="10" Text="Button 11"/>
<Button Margin="10" Text="Button 12"/>
<Button Margin="10" Text="Button 13"/>
<Button Margin="10" Text="Button 14"/>
<Button Margin="10" Text="Button 15"/>
<Button Margin="10" Text="Button 16"/>
<Button Margin="10" Text="Button 17"/>
<Button Margin="10" Text="Button 18"/>
<Button Margin="10" Text="Button 19"/>
<Button Margin="10" Text="Button 20"/>
<Button Margin="10" Text="Button 21"/>
<Button Margin="10" Text="Button 22"/>
<Button Margin="10" Text="Button 23"/>
<Button Margin="10" Text="Button 24"/>
<Button Margin="10" Text="Button 25"/>
<Button Margin="10" Text="Button 26"/>
<Button Margin="10" Text="Button 27"/>
<Button Margin="10" Text="Button 28"/>
<Button Margin="10" Text="Button 29"/>
<Button Margin="10" Text="Button 30"/>
<Button Margin="10" Text="Button 31"/>
<Button Margin="10" Text="Button 32"/>
<Button Margin="10" Text="Button 33"/>
<Button Margin="10" Text="Button 34"/>
<Button Margin="10" Text="Button 35"/>
</StackLayout>
</ScrollView>
</AbsoluteLayout>
C#:
/// Translated the y position of the grid in code behind
scrollView.TranslationY = 250;
Before translation, all content is visible when scrolling (i.e. up to 35 button).
After translating y position, a part of the content is cut off, and I can see only up to 31 buttons.
The problem is that your LayoutBounds defines the proportional height with value of 1, which means the same as parent, and when you translate it, it goes outside of the bounds.
What you can do is to bind LayoutBounds like this
AbsoluteLayout.LayoutBounds="{Binding rect}
and then in C# do something like this:
public Rectangle rect { get; set; }
public MainPage()
{
InitializeComponent();
Double screenHeigth = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
rect = new Rectangle(0,250,1,(screenHeigth - 250)/ screenHeigth);
BindingContext = this;
}
Note that I defined the height proportional to the screen height, because I'm not sure how your UI looks like. This is only example for the code you provided, but I guess you can do something similar in your app. From your XAML, it seems that your Absolute Layout is inside the Grid, so you should be able to do something similar with the Row Height in your grid.
I have an app created with the latest Xamarin.Forms 2.3 and tested it with a Lumia 550 Phone.
The page contains some custom Entry, a DatePicker and a Button.
The app on the phone works perfectly but on the local machine, I only get a blank screen (only with this page).
Phone:
Local machine (upgraded with Creators Update):
A few months ago, they both worked with Xamarin.Forms 2.2.
UPDATE:
Here is the XAML code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentView x:Class="MyProject.Views.UserDataView"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:cm="clr-namespace:Caliburn.Micro.Xamarin.Forms;assembly=Caliburn.Micro.Platform.Xamarin.Forms"
xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
xmlns:component="clr-namespace:MyBaseProject.Component;assembly=MyBaseProject"
xmlns:converter="clr-namespace:MyBaseProject.Converter;assembly=MyBaseProject"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Padding="0">
<ContentView.Resources>
<ResourceDictionary>
<converter:BoolConverter x:Key="boolConverter" />
</ResourceDictionary>
</ContentView.Resources>
<ScrollView>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0"
Style="{DynamicResource BoldField}"
Text="Input1:" />
<component:CustomEntry Grid.Row="1"
Keyboard="Text"
MaxLength="100"
Text="{Binding Param1.Value1}" />
<Label Grid.Row="2" Text="Input2:" />
<DatePicker Grid.Row="3"
Date="{Binding Param1.Value2}"
Format="yyyy.MM.dd"
VerticalOptions="CenterAndExpand" />
<StackLayout Grid.Row="4" Orientation="Horizontal">
<Label x:Name="lblCF"
Style="{DynamicResource BoldField}"
Text="Input3:" />
<Label FontAttributes="Italic"
IsVisible="{Binding Source={x:Reference cfEntry}, Path=IsOK,Converter={StaticResource boolConverter}}}"
Text="(invalid)" />
</StackLayout>
<component:CustomSNEntry x:Name="cfEntry"
Grid.Row="5"
MaxLength="11"
Text="{Binding Param1.Value3}}" />
<Label Grid.Row="6" Text="Input4:" />
<component:CustomEntry Grid.Row="7"
Keyboard="Text"
MaxLength="70"
Text="{Binding Param1.Value4}}" />
<Label Grid.Row="8" Text="Input5:" />
<component:CustomEntry Grid.Row="9"
Keyboard="Text"
MaxLength="70"
Text="{Binding Param1.Value5}" />
<Label Grid.Row="10" Text="Input6:" />
<component:CustomEntry Grid.Row="11"
Keyboard="Text"
MaxLength="10"
Text="{Binding Param1.Value6}" />
<Label Grid.Row="12" Text="Input7:" />
<component:CustomEntry Grid.Row="13"
Keyboard="Text"
MaxLength="100"
Text="{Binding Param1.Value7}" />
<Label Grid.Row="14" Text="Input8:" />
<component:CustomEntry Grid.Row="15"
Keyboard="Telephone"
MaxLength="15"
Text="{Binding Param1.Value8}" />
<Button Grid.Row="16"
cm:Message.Attach="Save"
Style="{DynamicResource BasicButton}"
Text="Save" />
</Grid>
</ScrollView>
</ContentView>
The custom components (CustomEntry and CustomSNEntry) are descendants of the Entry class with a Behavior added to them.
What should I do about this?
UPDATE 2:
The issue still persists and it looks like the following default style causes the problem:
<Style ApplyToDerivedTypes="True" TargetType="components:MyEntry">
<Setter Property="FontSize">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double"
Phone="18"
Tablet="28" />
</Setter.Value>
</Setter>
<Setter Property="HeightRequest">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double"
Phone="40"
Tablet="50" />
</Setter.Value>
</Setter>
</Style>
I don't know why.
If I remove the Height setter and leave the FontSize, it shows nothing.
If I remove the FontSize setter and leave the Height, it shows only the labels.
If I remove both of them, it shows everything normal.
I have a column chart, so I would like to chart the values last columns show stacked values.
I am using the RadHtmlChart Telerik, but setting parameter tacked="true" in the last columns, but the result its wrong the chart is not stacked, if i set this attribute in the first line serie, the chart is stacked. This my code:
<telerik:RadHtmlChart ID="Chart" runat="server" Width="680" Height="500">
<PlotArea>
<XAxis>
<LabelsAppearance>
<TextStyle Color="white" FontFamily="Arial" FontSize="13" />
</LabelsAppearance>
</XAxis>
<YAxis Step="5000000" MinValue="0" >
<LabelsAppearance DataFormatString="${0:0,0}">
<TextStyle Color="white" FontFamily="Arial" FontSize="12" />
</LabelsAppearance>
</YAxis>
<Series>
<telerik:ColumnSeries Name="Garantías Vigentes">
<LabelsAppearance Position="Center" DataFormatString="${0:0,0}" >
<TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" />
</LabelsAppearance>
<Appearance>
<FillStyle BackgroundColor="#87cb50"></FillStyle>
</Appearance>
<SeriesItems>
</SeriesItems>
</telerik:ColumnSeries>
<telerik:ColumnSeries Name="Saldo Vigente" Stacked="true">
<LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
<TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" />
</LabelsAppearance>
<Appearance>
<FillStyle BackgroundColor="#8DB4E2"></FillStyle>
</Appearance>
<SeriesItems>
</SeriesItems>
</telerik:ColumnSeries>
<telerik:ColumnSeries Name="" Stacked="true">
<LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
<TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" />
</LabelsAppearance>
<Appearance>
<FillStyle BackgroundColor="#8DB4E2"></FillStyle>
</Appearance>
<SeriesItems>
</SeriesItems>
</telerik:ColumnSeries>
</Series>
</PlotArea>
<Legend>
<Appearance Position="Bottom"><TextStyle Color="white" FontFamily="Arial" FontSize="20" Bold="True"/></Appearance>
</Legend>
</telerik:RadHtmlChart>
thanks for yours comments
Read this to see how to use the feature: http://www.telerik.com/help/aspnet-ajax/htmlchart-stacked-series.html.
Read this to see how to get a total in the last series: http://www.telerik.com/forums/need-to-display-grand-total-on-top-of-the-htmlchart-stacked-bars.
Finally I set the property stacked= true in the last column, my code:
<telerik:RadHtmlChart ID="Chart" runat="server" Width="680" Height="500">
<PlotArea>
<XAxis>
<LabelsAppearance>
<TextStyle Color="white" FontFamily="Arial" FontSize="13" />
</LabelsAppearance>
</XAxis>
<YAxis MinValue="0" >
<LabelsAppearance DataFormatString="${0:0,0}">
<TextStyle Color="white" FontFamily="Arial" FontSize="12" />
</LabelsAppearance>
</YAxis>
<Series>
<telerik:ColumnSeries Name="Garantías Vigentes" Stacked="true">
<LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
<TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" />
</LabelsAppearance>
<Appearance>
<FillStyle BackgroundColor="#87cb50"></FillStyle>
</Appearance>
<SeriesItems>
</SeriesItems>
</telerik:ColumnSeries>
</Series>
<Series>
<telerik:ColumnSeries Name="Saldo Vigente" Stacked="true">
<LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
<TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" />
</LabelsAppearance>
<Appearance>
<FillStyle BackgroundColor="#8DB4E2"></FillStyle>
</Appearance>
<SeriesItems>
<telerik:CategorySeriesItem Y="0"></telerik:CategorySeriesItem>
</SeriesItems>
</telerik:ColumnSeries>
<telerik:ColumnSeries Name="" >
<LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
<TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="0" />
</LabelsAppearance>
<Appearance>
<FillStyle BackgroundColor="#1B1A1A"></FillStyle>
</Appearance>
<SeriesItems>
<telerik:CategorySeriesItem Y="0"></telerik:CategorySeriesItem>
</SeriesItems>
</telerik:ColumnSeries>
</Series>
</PlotArea>
<Legend>
<Appearance Position="Bottom"><TextStyle Color="white" FontFamily="Arial" FontSize="20" Bold="True"/></Appearance>
</Legend>
</telerik:RadHtmlChart>
the part of code-behind:
Public Sub LoadChart()
Dim salesAuto As Double
Dim lessVig As Double
lessVig = LtlSaldoVigente.Text.ToDouble
salesAuto = CDbl(LtlLine.Text.ToDouble - lessVig * 1000000)
Chart.PlotArea.YAxis.MinorGridLines.Visible = False
Chart.PlotArea.XAxis.MinorGridLines.Visible = False
Dim ColumnSeries1 As ColumnSeries = TryCast(Chart.PlotArea.Series(0), ColumnSeries)
ColumnSeries1.SeriesItems.Add(y:=CDec(LtlValue.Text.ToDouble))
ColumnSeries1.SeriesItems.Add(y:=CDec(0))
Dim ColumnSeries2 As ColumnSeries = TryCast(Chart.PlotArea.Series(1), ColumnSeries)
ColumnSeries2.Stacked = True
ColumnSeries2.SeriesItems.Add(y:=CDec(LtlSaVig.Text.ToDouble * 1000000))
Dim ColumnSeries3 As ColumnSeries = TryCast(Chart.PlotArea.Series(2), ColumnSeries)
ColumnSeries3.SeriesItems.Add(y:=CDec(lessVig))
End Sub
the result: