To support TabView in xaml, TabItem has been added.
TabView provides Add(TabItem) to add a tab from the given TabItem.
TabItem contains Title, IconURL of a new TabButton in TabView's TabBar
and Content of a new View in TabView's TabContent.
--- /dev/null
+/*
+ * Copyright(c) 2023 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+using System.ComponentModel;
+using Tizen.NUI.BaseComponents;
+
+namespace Tizen.NUI.Components
+{
+ /// <summary>
+ /// TabView provides Add(TabItem tabItem) to add a tab from the given TabItem.
+ /// TabItem contains Title and IconUrl of a new TabButton in TabView's TabBar and Content of a new View in TabView's TabContent.
+ /// </summary>
+ [EditorBrowsable(EditorBrowsableState.Never)]
+ public class TabItem
+ {
+ /// <summary>
+ /// Creates a new instance of TabItem.
+ /// </summary>
+ [EditorBrowsable(EditorBrowsableState.Never)]
+ public TabItem()
+ {
+ }
+
+ /// <summary>
+ /// TabButton style applied to a new TabButton when TabView adds TabItem.
+ /// </summary>
+ [EditorBrowsable(EditorBrowsableState.Never)]
+ public TabButtonStyle TabButtonStyle { get; set; }
+
+ /// <summary>
+ /// Title of TabItem.
+ /// Title is set to the Text of a new TabButton in TabView's TabBar.
+ /// </summary>
+ [EditorBrowsable(EditorBrowsableState.Never)]
+ public string Title { get; set; }
+
+ /// <summary>
+ /// IconUrl of TabItem.
+ /// IconUrl is set to the IconUrl of a new TabButton in TabView's TabBar.
+ /// </summary>
+ [EditorBrowsable(EditorBrowsableState.Never)]
+ public string IconUrl { get; set; }
+
+ /// <summary>
+ /// Content of TabItem.
+ /// Content is added to TabView's TabContent.
+ /// </summary>
+ [EditorBrowsable(EditorBrowsableState.Never)]
+ public View Content { get; set; }
+ }
+}
/*
- * Copyright(c) 2021 Samsung Electronics Co., Ltd.
+ * Copyright(c) 2023 Samsung Electronics Co., Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
*/
using System;
using System.ComponentModel;
+using System.Diagnostics.CodeAnalysis;
using Tizen.NUI.BaseComponents;
namespace Tizen.NUI.Components
}
}
+ /// <summary>
+ /// Adds a tab from the given TabItem.
+ /// TabItem contains Title and IconURL of a new TabButton in TabBar and Content of a new View in TabContent.
+ /// <param name="tabItem">The tab item which contains Title and IconURL of a new TabButton in TabBar and Content of a new View in TabContent.</param>
+ /// </summary>
+ [EditorBrowsable(EditorBrowsableState.Never)]
+ [SuppressMessage("Microsoft.Reliability",
+ "CA2000:DisposeObjectsBeforeLosingScope",
+ Justification = "The tabButton is added to TabBar and disposed when TabBar is disposed.")]
+ public virtual void Add(TabItem tabItem)
+ {
+ if (tabItem == null) return;
+
+ var hasTitle = (String.IsNullOrEmpty(tabItem.Title) == false);
+ var hasIconUrl = (String.IsNullOrEmpty(tabItem.IconUrl) == false);
+
+ // Adds a new TabButton and Content View only if TabItem has TabButton properties and Content View.
+ if ((hasTitle || hasIconUrl) && (tabItem.Content != null))
+ {
+ var tabButton = new TabButton(tabItem.TabButtonStyle);
+
+ if (hasTitle)
+ {
+ tabButton.Text = tabItem.Title;
+ }
+
+ if (hasIconUrl)
+ {
+ tabButton.IconURL = tabItem.IconUrl;
+ }
+
+ TabBar.AddTabButton(tabButton);
+
+ Content.AddContentView(tabItem.Content);
+ }
+ }
+
/// <inheritdoc/>
[EditorBrowsable(EditorBrowsableState.Never)]
protected override void Dispose(DisposeTypes type)
<!-- Content is main placeholder of ContentPage. Add your content into this view. -->
<ContentPage.Content>
<TabView x:Name="tabView"
- WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+ WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+ <TabItem Title="Tab1">
+ <TabItem.Content>
+ <View WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+ HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
+ BackgroundColor="Red">
+ <View.Layout>
+ <LinearLayout LinearOrientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" CellPadding="0,20"/>
+ </View.Layout>
+
+ <Button Text="Add Tab" BackgroundColor="Magenta" Clicked="AddTabClickedCb" />
+ <Button Text="Remove Tab" BackgroundColor="Magenta" Clicked="RemoveTabClickedCb"/>
+ </View>
+ </TabItem.Content>
+ </TabItem>
+
+ <TabItem Title="Tab2">
+ <TabItem.Content>
+ <View WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+ HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
+ BackgroundColor="Blue">
+ <View.Layout>
+ <LinearLayout LinearOrientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" CellPadding="0,20"/>
+ </View.Layout>
+
+ <Button Text="Add Tab" BackgroundColor="Cyan" Clicked="AddTabClickedCb"/>
+ <Button Text="Remove Tab" BackgroundColor="Cyan" Clicked="RemoveTabClickedCb"/>
+ </View>
+ </TabItem.Content>
+ </TabItem>
</TabView>
</ContentPage.Content>
/*
- * Copyright(c) 2021 Samsung Electronics Co., Ltd.
+ * Copyright(c) 2023 Samsung Electronics Co., Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
{
public partial class TabViewTestPage : ContentPage
{
- private int tabCount = 0;
+ private int tabCount = 2;
public TabViewTestPage()
{
InitializeComponent();
-
- tabView.SizeHeight = Window.Instance.WindowSize.Height - appBar.SizeHeight;
-
- tabView.AddTab(CreateTabButton(), CreateView());
- tabCount++;
-
- tabView.AddTab(CreateTabButton(), CreateView());
- tabCount++;
}
private TabButton CreateTabButton()
return new TabButton() { Text = "Tab" + (tabCount + 1), };
}
+ private void AddTabClickedCb(object sender, ClickedEventArgs args)
+ {
+ if (tabCount < 4)
+ {
+ tabView.AddTab(CreateTabButton(), CreateView());
+ tabCount++;
+ }
+ }
+
+ private void RemoveTabClickedCb(object sender, ClickedEventArgs args)
+ {
+ if (tabCount > 1)
+ {
+ tabView.RemoveTab(tabCount - 1);
+ tabCount--;
+ }
+ }
+
private View CreateView()
{
Color backgroundColor;
Layout = new LinearLayout()
{
LinearOrientation = LinearLayout.Orientation.Vertical,
- LinearAlignment = LinearLayout.Alignment.Center,
+ HorizontalAlignment = HorizontalAlignment.Center,
+ VerticalAlignment = VerticalAlignment.Center,
CellPadding = new Size2D(0, 20),
},
BackgroundColor = backgroundColor,
Text = "Add Tab",
BackgroundColor = buttonBackgroundColor,
};
- buttonAddTab.Clicked += (object sender, ClickedEventArgs args) =>
- {
- if (tabCount < 4)
- {
- tabView.AddTab(CreateTabButton(), CreateView());
- tabCount++;
- }
- };
+ buttonAddTab.Clicked += AddTabClickedCb;
container.Add(buttonAddTab);
var buttonRemoveTab = new Button()
Text = "Remove Tab",
BackgroundColor = buttonBackgroundColor,
};
- buttonRemoveTab.Clicked += (object sender, ClickedEventArgs args) =>
- {
- if (tabCount > 1)
- {
- tabView.RemoveTab(tabCount - 1);
- tabCount--;
- }
- };
+ buttonRemoveTab.Clicked += RemoveTabClickedCb;
container.Add(buttonRemoveTab);
return container;
<!-- Content is main placeholder of ContentPage. Add your content into this view. -->
<ContentPage.Content>
<TabView x:Name="tabView"
- WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+ WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+ <TabItem IconURL="res/home.png">
+ <TabItem.Content>
+ <View WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+ HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
+ BackgroundColor="Red">
+ <View.Layout>
+ <LinearLayout LinearOrientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" CellPadding="0,20"/>
+ </View.Layout>
+
+ <Button Text="Add Tab" BackgroundColor="Magenta" Clicked="AddTabClickedCb" />
+ <Button Text="Remove Tab" BackgroundColor="Magenta" Clicked="RemoveTabClickedCb"/>
+ </View>
+ </TabItem.Content>
+ </TabItem>
+
+ <TabItem IconURL="res/home.png">
+ <TabItem.Content>
+ <View WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+ HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
+ BackgroundColor="Blue">
+ <View.Layout>
+ <LinearLayout LinearOrientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" CellPadding="0,20"/>
+ </View.Layout>
+
+ <Button Text="Add Tab" BackgroundColor="Cyan" Clicked="AddTabClickedCb"/>
+ <Button Text="Remove Tab" BackgroundColor="Cyan" Clicked="RemoveTabClickedCb"/>
+ </View>
+ </TabItem.Content>
+ </TabItem>
</TabView>
</ContentPage.Content>
/*
- * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ * Copyright(c) 2023 Samsung Electronics Co., Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
{
public partial class TabViewWithIconOnlyTestPage : ContentPage
{
- private int tabCount = 0;
+ private int tabCount = 2;
public TabViewWithIconOnlyTestPage()
{
InitializeComponent();
-
- tabView.SizeHeight = Window.Instance.WindowSize.Height - appBar.SizeHeight;
-
- tabView.AddTab(CreateTabButton(), CreateView());
- tabCount++;
-
- tabView.AddTab(CreateTabButton(), CreateView());
- tabCount++;
}
private TabButton CreateTabButton()
return new TabButton() { IconURL = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "home.png", };
}
+ private void AddTabClickedCb(object sender, ClickedEventArgs args)
+ {
+ if (tabCount < 4)
+ {
+ tabView.AddTab(CreateTabButton(), CreateView());
+ tabCount++;
+ }
+ }
+
+ private void RemoveTabClickedCb(object sender, ClickedEventArgs args)
+ {
+ if (tabCount > 1)
+ {
+ tabView.RemoveTab(tabCount - 1);
+ tabCount--;
+ }
+ }
+
private View CreateView()
{
Color backgroundColor;
Layout = new LinearLayout()
{
LinearOrientation = LinearLayout.Orientation.Vertical,
- LinearAlignment = LinearLayout.Alignment.Center,
+ HorizontalAlignment = HorizontalAlignment.Center,
+ VerticalAlignment = VerticalAlignment.Center,
CellPadding = new Size2D(0, 20),
},
BackgroundColor = backgroundColor,
Text = "Add Tab",
BackgroundColor = buttonBackgroundColor,
};
- buttonAddTab.Clicked += (object sender, ClickedEventArgs args) =>
- {
- if (tabCount < 4)
- {
- tabView.AddTab(CreateTabButton(), CreateView());
- tabCount++;
- }
- };
+ buttonAddTab.Clicked += AddTabClickedCb;
container.Add(buttonAddTab);
var buttonRemoveTab = new Button()
Text = "Remove Tab",
BackgroundColor = buttonBackgroundColor,
};
- buttonRemoveTab.Clicked += (object sender, ClickedEventArgs args) =>
- {
- if (tabCount > 1)
- {
- tabView.RemoveTab(tabCount - 1);
- tabCount--;
- }
- };
+ buttonRemoveTab.Clicked += RemoveTabClickedCb;
container.Add(buttonRemoveTab);
return container;
<!-- Content is main placeholder of ContentPage. Add your content into this view. -->
<ContentPage.Content>
<TabView x:Name="tabView"
- WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+ WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+ <TabItem Title="Tab1" IconURL="res/home.png">
+ <TabItem.Content>
+ <View WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+ HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
+ BackgroundColor="Red">
+ <View.Layout>
+ <LinearLayout LinearOrientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" CellPadding="0,20"/>
+ </View.Layout>
+
+ <Button Text="Add Tab" BackgroundColor="Magenta" Clicked="AddTabClickedCb" />
+ <Button Text="Remove Tab" BackgroundColor="Magenta" Clicked="RemoveTabClickedCb"/>
+ </View>
+ </TabItem.Content>
+ </TabItem>
+
+ <TabItem Title="Tab2" IconURL="res/home.png">
+ <TabItem.Content>
+ <View WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+ HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
+ BackgroundColor="Blue">
+ <View.Layout>
+ <LinearLayout LinearOrientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" CellPadding="0,20"/>
+ </View.Layout>
+
+ <Button Text="Add Tab" BackgroundColor="Cyan" Clicked="AddTabClickedCb"/>
+ <Button Text="Remove Tab" BackgroundColor="Cyan" Clicked="RemoveTabClickedCb"/>
+ </View>
+ </TabItem.Content>
+ </TabItem>
</TabView>
</ContentPage.Content>
/*
- * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ * Copyright(c) 2023 Samsung Electronics Co., Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
{
public partial class TabViewWithIconTestPage : ContentPage
{
- private int tabCount = 0;
+ private int tabCount = 2;
public TabViewWithIconTestPage()
{
InitializeComponent();
-
- tabView.SizeHeight = Window.Instance.WindowSize.Height - appBar.SizeHeight;
-
- tabView.AddTab(CreateTabButton(), CreateView());
- tabCount++;
-
- tabView.AddTab(CreateTabButton(), CreateView());
- tabCount++;
}
private TabButton CreateTabButton()
};
}
+ private void AddTabClickedCb(object sender, ClickedEventArgs args)
+ {
+ if (tabCount < 4)
+ {
+ tabView.AddTab(CreateTabButton(), CreateView());
+ tabCount++;
+ }
+ }
+
+ private void RemoveTabClickedCb(object sender, ClickedEventArgs args)
+ {
+ if (tabCount > 1)
+ {
+ tabView.RemoveTab(tabCount - 1);
+ tabCount--;
+ }
+ }
+
private View CreateView()
{
Color backgroundColor;
Layout = new LinearLayout()
{
LinearOrientation = LinearLayout.Orientation.Vertical,
- LinearAlignment = LinearLayout.Alignment.Center,
+ HorizontalAlignment = HorizontalAlignment.Center,
+ VerticalAlignment = VerticalAlignment.Center,
CellPadding = new Size2D(0, 20),
},
BackgroundColor = backgroundColor,
Text = "Add Tab",
BackgroundColor = buttonBackgroundColor,
};
- buttonAddTab.Clicked += (object sender, ClickedEventArgs args) =>
- {
- if (tabCount < 4)
- {
- tabView.AddTab(CreateTabButton(), CreateView());
- tabCount++;
- }
- };
+ buttonAddTab.Clicked += AddTabClickedCb;
container.Add(buttonAddTab);
var buttonRemoveTab = new Button()
Text = "Remove Tab",
BackgroundColor = buttonBackgroundColor,
};
- buttonRemoveTab.Clicked += (object sender, ClickedEventArgs args) =>
- {
- if (tabCount > 1)
- {
- tabView.RemoveTab(tabCount - 1);
- tabCount--;
- }
- };
+ buttonRemoveTab.Clicked += RemoveTabClickedCb;
container.Add(buttonRemoveTab);
return container;