Rotator buttons size

controls/rotator/getting-started/how-to-configure-animations.md

@@ -5,7 +5,7 @@ description: How To Configure Animations
 slug: rotator/getting-started/how-to-configure-animations
 tags: how,to,configure,animations
 published: True
-position: 1
+position: 2
 ---
 
 # How To Configure Animations

controls/rotator/getting-started/how-to-configure-size-of-rotator-with-buttons.md

@@ -0,0 +1,287 @@
+---
+title: How To Configure Size of Rotator with Buttons
+page_title: How To Configure Size of Rotator with Buttons | RadRotator for ASP.NET AJAX Documentation
+description: How To Configure Size of Rotator with Buttons
+slug: rotator/getting-started/how-to-configure-size-of-rotator-with-buttons
+tags: how,to,configure,size,of,rotator,with,buttons
+published: True
+position: 1
+---
+
+# How to Configure Size of Rotator with Buttons
+
+This help article illustrates how to properly configure the size of a rotator with buttons so that the items are not cut or misaligned on initial showing or during animiation playing.
+
+ * [RadRotator Dimensions Configuration]({%slug rotator/getting-started/overview%}#radrotator-dimensions-configuration)
+
+ * [Configure Rotator with Buttons](#configure-rotator-with-buttons)
+
+ * [Example (RadRotatorSizeConfigurator Class Implementation)](#example-radrotatorsizeconfigurator-class-implementation)
+
+## Configure Rotator with Buttons
+
+To configure a rotator with buttons, you should do the following:
+ * Define the proper dimensions for the rotator, its items and item template as per the [RadRotator Dimensions Configuration]({%slug rotator/getting-started/overview%}#radrotator-dimensions-configuration) article.
+ * Determine the size of the buttons and just add it to the rotator's width/height. 
+
+For example, if we want to show four items (100x100 pixels) in a horizontal rotator with buttons for the black skin with Lightweight render mode, we can follow the steps below:
+1. Set the single item's dimensions - `ItemWidth`="100" `ItemHeight`="100".
+1. Set the item template dimensions - .itemTemplate {width: 100px; height: 100px;}.
+1. Inspect the size of a single button - 30x30. 
+
+	![rotator-size-buttons](images/inspect-button-size.png)
+
+1. Calculate and set the rotator's width - (4 items * 100) + 2 buttons * 30 = 400 + 60 = 460px.
+
+>tip All of the explained logic stays the same if the `ScrollDirection`="Up, Down" is set, but it should be applied to the `Height` and `ItemHeight` properties, respectively.
+
+>caption **Figure 1**: A snapshot of a rotator with buttons that has 4 items. The code that creates it is available in **Example 1**.
+
+![rotator-size-buttons](images/rotator-size-buttons.png)
+
+>caption **Example 1**: Configure rotator with button that will have 4 items.
+
+````CSS
+<style type="text/css">
+	body {
+		font-size: 14px;
+	}
+
+	.itemTemplate {
+		width: 100px;
+		height: 100px;
+	}
+</style>
+````
+
+````ASPX
+<telerik:RadRotator ID="RadRotator1" runat="server" Width="460" ItemWidth="100" Height="100" RotatorType="Buttons" RenderMode="Lightweight" Skin="Black"
+	ItemHeight="100" DataSourceID="SqlDataSource1" FrameDuration="1000">
+	<ItemTemplate>
+		<asp:Image CssClass="itemTemplate" ID="Image1" runat="server" ImageUrl='<%# Eval("CustomerID", "~/Img/Northwind/Customers/{0}.jpg") %>'
+			AlternateText="IMAGE" />
+	</ItemTemplate>
+</telerik:RadRotator>
+
+<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
+	SelectCommand="SELECT [CustomerID] FROM [Customers]"></asp:SqlDataSource>
+````
+
+You can find the list of the button sizes for the different skins in **Classic** and **Lightweight** render mode in **List 1** and **List 2**. The base is 14px font-size.
+
+>caption **List 1**: RadRotator button sizes for all the skins with "Lightweight" render mode.
+* **Bootstrap** - 34px
+* **Material** - 38px
+* The rest of the skins - 30px
+
+>caption **List 2**: RadRotator button sizes for all the skins with "Classic" render mode.
+* **Glow**, **Silk**, **MetroTouch**, **BlackMetroTouch** - 28px
+* **Bootstrap** - 34px
+* The rest of the skins - 20px
+
+## Example (RadRotatorSizeConfigurator Class Implementation)
+
+In the example below you can see a helper class (i.e., RadRotatorSizeConfigurator) that automatically calculates and sets the rotator's width based on the desired number of items, the set skin and render mode. The class accepts three parameters: the instance of the rotator, the number of the visible items in the view port and the skin (optional). 
+
+>caption **Example 2**:  Configure rotator with buttons that has 4 items (100px x 100px) per view. The method that calculates the actual width is shown in **Example 3**.
+
+````CSS
+	<style type="text/css">
+		body {
+			font-size: 14px;
+		}
+
+		.itemTemplate {
+			width: 100px;
+			height: 100px;
+		}
+	</style>
+````
+
+````ASPX
+<telerik:RadRotator ID="RadRotator1" runat="server" ItemWidth="100" Height="100" RotatorType="Buttons" RenderMode="Lightweight" Skin="Black"
+	ItemHeight="100"  DataSourceID="SqlDataSource1" FrameDuration="1000">
+	<ItemTemplate>
+		<asp:Image CssClass="itemTemplate" ID="Image1" runat="server" ImageUrl='<%# Eval("CustomerID", "~/Img/Northwind/Customers/{0}.jpg") %>'
+			AlternateText="IMAGE" />
+	</ItemTemplate>
+</telerik:RadRotator>
+
+<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
+	SelectCommand="SELECT [CustomerID] FROM [Customers]"></asp:SqlDataSource>
+````
+
+````C#
+protected void Page_Load(object sender, EventArgs e)
+{
+	RadRotatorSizeConfigurator.ConfigureSize(RadRotator1, 4);
+}
+````
+````VB
+Protected Sub Page_Load(sender As Object, e As EventArgs)
+	RadRotatorSizeConfigurator.ConfigureSize(RadRotator1, 4)
+End Sub
+````
+
+>caption **Example 3**: The implementation of the RadRotatorSizeConfigurator class that determines and sets the actual size of the rotator for the particular skin.
+
+````C#
+public static class RadRotatorSizeConfigurator
+{
+	const int classicButtonStandardSize = 20;
+	const int liteButtonStandardSize = 30;
+
+	static Dictionary<string, int> largeButtonsSkins = new Dictionary<string, int>()
+	{
+		{ "Glow", 28 },
+		{ "Silk", 28 },
+		{ "MetroTouch", 28 },
+		{ "BlackMetroTouch", 28 },
+		{ "Bootstrap", 34 },
+		{ "LiteBootstrap", 34 },
+		{ "LiteMaterial", 38 }
+	};
+	static RotatorType[] buttonModes = { RotatorType.Buttons, RotatorType.ButtonsOver, RotatorType.SlideShowButtons, RotatorType.CarouselButtons };
+	static RotatorType[] animationModes = { RotatorType.Carousel, RotatorType.CarouselButtons, RotatorType.CoverFlow, RotatorType.CoverFlowButtons };
+
+	public static void ConfigureSize(RadRotator rotator, int itemsPerView)
+	{
+		ConfigureSize(rotator, itemsPerView, GetCurrentSkin());
+	}
+
+	public static void ConfigureSize(RadRotator rotator, int itemsPerView, string selectedSkin)
+	{
+		if (Array.IndexOf(animationModes, rotator.RotatorType) != -1) return;
+
+		int buttonsSize = GetButtonsSize(rotator, selectedSkin);
+
+		bool isHorizontal = (rotator.ScrollDirection == (RotatorScrollDirection.Left | RotatorScrollDirection.Right) ||
+					rotator.ScrollDirection == RotatorScrollDirection.Right ||
+					rotator.ScrollDirection == RotatorScrollDirection.Left);
+
+		if (isHorizontal)
+		{
+			rotator.Width = Unit.Pixel(Convert.ToInt32(rotator.ItemWidth.Value) * itemsPerView + buttonsSize);
+			rotator.Height = rotator.ItemHeight;
+		}
+		else
+		{
+			rotator.Height = Unit.Pixel(Convert.ToInt32(rotator.ItemHeight.Value) * itemsPerView + buttonsSize);
+			rotator.Width = rotator.ItemWidth;
+		}
+	}
+
+	public static int GetButtonsSize(RadRotator rotator)
+	{
+		return GetButtonsSize(rotator, GetCurrentSkin());
+	}
+
+	public static int GetButtonsSize(RadRotator rotator, string selectedSkin)
+	{
+		int buttonStandardSize;
+		if (rotator.ResolvedRenderMode == RenderMode.Lightweight) 
+		{ 
+			selectedSkin = "Lite" + selectedSkin;
+			buttonStandardSize = liteButtonStandardSize;
+		}
+		else
+		{
+			buttonStandardSize = classicButtonStandardSize;
+		}
+
+		int buttonSize = (!largeButtonsSkins.ContainsKey(selectedSkin)) ? buttonStandardSize : largeButtonsSkins[selectedSkin];
+		int buttonsCount = 1;
+		if (Array.IndexOf(buttonModes, rotator.RotatorType) == -1)
+		{
+			buttonsCount = 0;
+		}
+		else if (rotator.ScrollDirection == (RotatorScrollDirection.Left | RotatorScrollDirection.Right) ||
+				 rotator.ScrollDirection == (RotatorScrollDirection.Down | RotatorScrollDirection.Up))
+		{
+			buttonsCount = 2;
+		}
+
+		return buttonSize * buttonsCount;
+	}
+
+	private static string GetCurrentSkin()
+	{
+		return (string)((((Page)HttpContext.Current.Handler).FindControl("RadRotator1") as RadRotator).Skin ?? ConfigurationManager.AppSettings["Telerik.Skin"]);
+	}
+}
+````
+````VB
+Public NotInheritable Class RadRotatorSizeConfigurator
+	Private Sub New()
+	End Sub
+	Const classicButtonStandardSize As Integer = 20
+	Const liteButtonStandardSize As Integer = 30
+
+	Shared largeButtonsSkins As New Dictionary(Of String, Integer)() From { _
+		{"Glow", 28}, _
+		{"Silk", 28}, _
+		{"MetroTouch", 28}, _
+		{"BlackMetroTouch", 28}, _
+		{"Bootstrap", 34}, _
+		{"LiteBootstrap", 34}, _
+		{"LiteMaterial", 38} _
+	}
+	Shared buttonModes As RotatorType() = {RotatorType.Buttons, RotatorType.ButtonsOver, RotatorType.SlideShowButtons, RotatorType.CarouselButtons}
+	Shared animationModes As RotatorType() = {RotatorType.Carousel, RotatorType.CarouselButtons, RotatorType.CoverFlow, RotatorType.CoverFlowButtons}
+
+	Public Shared Sub ConfigureSize(rotator As RadRotator, itemsPerView As Integer)
+		ConfigureSize(rotator, itemsPerView, GetCurrentSkin())
+	End Sub
+
+	Public Shared Sub ConfigureSize(rotator As RadRotator, itemsPerView As Integer, selectedSkin As String)
+		If Array.IndexOf(animationModes, rotator.RotatorType) <> -1 Then
+			Return
+		End If
+
+		Dim buttonsSize As Integer = GetButtonsSize(rotator, selectedSkin)
+
+		Dim isHorizontal As Boolean = (rotator.ScrollDirection = (RotatorScrollDirection.Left Or RotatorScrollDirection.Right) OrElse rotator.ScrollDirection = RotatorScrollDirection.Right OrElse rotator.ScrollDirection = RotatorScrollDirection.Left)
+
+		If isHorizontal Then
+			rotator.Width = Unit.Pixel(Convert.ToInt32(rotator.ItemWidth.Value) * itemsPerView + buttonsSize)
+			rotator.Height = rotator.ItemHeight
+		Else
+			rotator.Height = Unit.Pixel(Convert.ToInt32(rotator.ItemHeight.Value) * itemsPerView + buttonsSize)
+			rotator.Width = rotator.ItemWidth
+		End If
+	End Sub
+
+	Public Shared Function GetButtonsSize(rotator As RadRotator) As Integer
+		Return GetButtonsSize(rotator, GetCurrentSkin())
+	End Function
+
+	Public Shared Function GetButtonsSize(rotator As RadRotator, selectedSkin As String) As Integer
+		Dim buttonStandardSize As Integer
+		If rotator.ResolvedRenderMode = RenderMode.Lightweight Then
+			selectedSkin = "Lite" & selectedSkin
+			buttonStandardSize = liteButtonStandardSize
+		Else
+			buttonStandardSize = classicButtonStandardSize
+		End If
+
+		Dim buttonSize As Integer = If((Not largeButtonsSkins.ContainsKey(selectedSkin)), buttonStandardSize, largeButtonsSkins(selectedSkin))
+		Dim buttonsCount As Integer = 1
+		If Array.IndexOf(buttonModes, rotator.RotatorType) = -1 Then
+			buttonsCount = 0
+		ElseIf rotator.ScrollDirection = (RotatorScrollDirection.Left Or RotatorScrollDirection.Right) OrElse rotator.ScrollDirection = (RotatorScrollDirection.Down Or RotatorScrollDirection.Up) Then
+			buttonsCount = 2
+		End If
+
+		Return buttonSize * buttonsCount
+	End Function
+
+	Private Shared Function GetCurrentSkin() As String
+		Return DirectCast(If(TryCast(DirectCast(HttpContext.Current.Handler, Page).FindControl("RadRotator1"), RadRotator).Skin, ConfigurationManager.AppSettings("Telerik.Skin")), String)
+	End Function
+End Class
+````
+
+# See Also
+
+ * [RadRotator Dimensions Configuration]({%slug rotator/getting-started/overview%}#radrotator-dimensions-configuration)
+

controls/rotator/getting-started/overview.md

@@ -10,29 +10,40 @@ position: 0
 
 # Getting Started Overview
 
-**These steps should be followed in order to configure RadRotator control:**
+This help article illustrates how to configure a RadRotator control.
 
-**RadRotator** is a dynamic control that moves its content. To do that the control should be "aware" of its items size. The *ItemWidth* and *ItemHeight* properties are intended to provide this information to the control. If these properties are not set accordingly to the ItemTemplate's *size*, then the **RadRotator** may behave inconsistently in different browsers.
+* [RadRotator Basic Configuration](#radrotator-basic-configuration)
 
-* The items are not shown when the control is first loaded. After clicking the "Refresh" button the items become visible.
+* [RadRotator Dimensions Configuration](#radrotator-dimensions-configuration)
 
-* Rotator shows only a part of a loaded item (the items are not synchronized)
+## RadRotator Basic Configuration
 
-* A gap occurs between the item like an empty item.
+To configure a rotator control you can follow the steps below:
+
+* Add the control on the page. You can simply drag and drop it from the Visual Studio Toolbox. Please note that it requires an asp:ScriptManager to be declared on the page as well.
+
+* Add a data source control and set the RadRotator's DataSourceID property to its ID.
+
+* Declare the ItemTemplate's content.
 
-* Rotator does not rotate its content
+* It is recommended that if you want to declare multiple elements inside the rotator's ItemTemplate, you should add a div that wraps the content in the ItemTemplate and set a class to that div. The *width* and *height* CSS properties applied through this class should be synchronized with the values set to the RadRotator's `ItemWidth` and `ItemHeight` properties. The margin and padding of the elements declared inside the `ItemTemplate` should be taken into account as well.
 
-This example demonstrates the purpose of the [Width, ItemWidth, Height and ItemHeight]({%slug rotator/server-side-programming/overview%}) properties:
+* Set the [Width, ItemWidth, Height and ItemHeight]({%slug rotator/server-side-programming/overview%}) properties. You can refer to the next section, ([RadRotator Dimensions Configuration](#radrotator-dimensions-configuration)), for details on the matter.
 
-* Add the control on the page. You can simply drag and drop it from the Visual Studio's Toolbox. Please note that it requires an asp:ScriptManager to be declared on the page as well
 
-* Add a data source control and set the RadRotator's DataSourceID property to its ID
+## RadRotator Dimensions Configuration
 
-* Declare the ItemTemplate's content
+**RadRotator** is a dynamic control that moves its content. To do that the control should be "aware" of its item's size. The `ItemWidth` and `ItemHeight` properties are intended to provide this information to the control. If these properties are not set accordingly in the ItemTemplate's *size*, then the **RadRotator** may behave inconsistently in different browsers.
+
+* The items are not shown when the control is first loaded. After clicking the "Refresh" button the items become visible.
+
+* Rotator shows only a part of a loaded item (the items are not synchronized).
+
+* A gap occurs between the item like an empty item.
 
-* It is recommended, if multiple elements are declared inside the rotator's ItemTemplate, to add a div that wraps the content in the ItemTemplate and set a class to that div. The *width* and *height* CSS properties applied through this class should be synchronized with the values set to the RadRotator's *ItemWidth* and *ItemHeight* properties. The margin and padding of the elements declared inside the ItemTemplate should be taken into account as well.
+* Rotator does not rotate its content.
 
-* Set the [Width, ItemWidth, Height and ItemHeight]({%slug rotator/server-side-programming/overview%}) properties:
+This example below demonstrates the purpose of the [Width, ItemWidth, Height and ItemHeight]({%slug rotator/server-side-programming/overview%}) properties:
 
 ````XML
 <telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" Width="200" ItemWidth="100" Height="100"
@@ -54,15 +65,16 @@ This example demonstrates the purpose of the [Width, ItemWidth, Height and ItemH
 }
 ````
 
-After implementing the above steps two items will be shown in the **RadRotator**'s viewport, because of the *Width="200"* and *ItemWidth="100"* properties.
+After implementing the above steps, two items will be shown in the **RadRotator**'s viewport, because of the `Width="200"` and `ItemWidth="100"` properties.
 
 ![](images/rotator-rotatorconfig.jpg)
 
-In case that the requirement is to show 3 items in the viewport, then the *Width* property should be changed to "300". Also, if one of the **RadRotator**'s buttons' type is used , then the *Width* property should be set to *"240"* (the buttons have dimensions: 20x20 pixels).
+In the case that the requirement is to show 3 items in the viewport, then the `Width` property should be changed to "300". Also, if one of the **RadRotator**'s buttons' type is used, then the buttons' size should be added to the rotator's `Width` property. For example if the button is 30x30 then the width should be 360. You can find more information in the article, [How To Configure Size of Rotator with Buttons]({%slug rotator/getting-started/how-to-configure-size-of-rotator-with-buttons%}).
 
-All of the explained logic stays the same if the *ScrollDirection="Up, Down"* is set, but it should be applied to the *Height* and *ItemHeight* properties, respectively.
+All of the explained logic stays the same if the `ScrollDirection="Up, Down"` is set, but it should be applied to the `Height` and `ItemHeight` properties, respectively.
 
->important The built-in skin **MetroTouch** (introduced with the Q2 2012 release) requires some additional modifications of the values that should be set in the properties **Width** and **Height** of **RadRotator** :
-* You should always add 14px to the **Width** and the **Height** of **RadRotator** .
-* If the **RadRotator** is configured in a mode that uses control buttons (for example **Buttons** , **ButtonsOver** ) you should add 28px for every button (the buttons have dimensions: 28x28 pixels). In case the **RadRotator** has horizontal orientation the pixels are added to the **Width** property and in case the rotator control is oriented vertically, you should increase the **Height** property.
+# See Also
 
+ * [How To Configure Size of Rotator with Buttons]({%slug rotator/getting-started/how-to-configure-size-of-rotator-with-buttons%})
+
+ * [Width, ItemWidth, Height and ItemHeight]({%slug rotator/server-side-programming/overview%})