<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
- <link rel="stylesheet" type="text/css" href="../css/styles.css" />
- <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
- <script type="text/javascript" src="../scripts/snippet.js"></script>
- <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
- <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
- <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
- <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
<title>Attach Panel</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<li><a href="#categories">Content Categories</a></li>
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#create">Creating an Attach Panel</a></li>
+ <li><a href="#createInxamarin">Creating an Attach Panel in Xamarin</a></li>
<li><a href="#manage">Managing an Attach Panel</a></li>
</ul>
<p class="toc-title">Related Info</p>
<p>The main features of the Tizen.Applications.AttachPanel namespace include:</p>
<ul>
<li>Creating an attach panel
-<p>You can <a href="#create">create an attach panel</a> and manage events related to user selections and panel visibility. You can also add and remove <a href="#categories">content categories</a>.</p></li>
+<p>You can <a href="#create">create an attach panel</a> and manage events related to user selections and panel visibility. You can also add and remove <a href="#categories">content categories</a>.</p>
+<p>You can also <a href="#createInxamarin">create an attach panel in xamarin</a> by using <a href="https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/">Custom Renderers</a>.</p></li>
+
<li>Managing an attach panel
<p>You can <a href="#manage">set extra data</a> to a content category to manage its content.</p></li>
</ul>
<p align="center"><strong>Figure: Attach panel</strong></p>
-<p align="center"><img alt="Attach panel" src="../images/attach_panel_area.png" /></p>
+<p align="center"><img alt="Attach panel" src="../../images/attach_panel_area.png" /></p>
-<p>The attach panel has UI components and it manages user interactions on its interface. The layout component keeps on the tabbar and scroller components, which are connected to show the content synchronously. The scroller component has pages to display the content of, for example, images, camera, and voice recorder. Some content is shown as a page on the panel, while others can be launched from the panel's <strong>More</strong> tab using <a href="app_controls.htm">application controls</a>.</p>
+<p>The attach panel has UI components and it manages user interactions on its interface. The layout component keeps on the tabbar and scroller components, which are connected to show the content synchronously. The scroller component has pages to display the content of, for example, images, camera, and voice recorder. Some content is shown as a page on the panel, while others can be launched from the panel's <strong>More</strong> tab using <!--<a href="app_controls.htm">-->application controls<!--</a>-->.</p>
<p>The attach panel has half and full display modes. The mode can be changed by swiping up and down the page.</p>
<p align="center"><strong>Figure: Attach panel modes</strong></p>
-<p align="center"><img alt="Attach panel modes" src="../images/attach_mode.png" /></p>
+<p align="center"><img alt="Attach panel modes" src="../../images/attach_mode.png" /></p>
<h2 id="categories">Content Categories</h2>
<p>The following figure illustrates the content types. From left to right: images, camera, voice, and <strong>More</strong> tab content.</p>
<p align="center"><strong>Figure: Content categories</strong></p>
-<p align="center"><img alt="Images content" src="../images/attach_images.png" /> <img alt="Camera content" src="../images/attach_camera.png" /> <img alt="Voice content" src="../images/attach_voice.png" /> <img alt="More content" src="../images/attach_more.png" /></p>
+<p align="center"><img alt="Images content" src="../../images/attach_images.png" /> <img alt="Camera content" src="../../images/attach_camera.png" /> <img alt="Voice content" src="../../images/attach_voice.png" /> <img alt="More content" src="../../images/attach_more.png" /></p>
<h2 id="prerequisites">Prerequisites</h2>
using Tizen.Applications.AttachPanel;
</pre>
</li>
-<li>
-<p>Create a conformant, into which you can add an attach panel instance later:</p>
+<li>To create an attach panel instance, you need an <code>ElmSharp.Conformant</code> instance. You can either:
+ <ul>
+ <li><a href="#getConformant">Get the Tizen platform conformant</a>.</li>
+ <li>Create a conformant, into which you can add the attach panel later:
<pre class="prettyprint">
class App : CoreUIApplication
}
}
</pre>
+ </li>
+ </ul>
</li>
</ol>
</ol>
+<h2 id="createInxamarin" name="createInxamarin">Creating an Attach Panel in Xamarin</h2>
+
+<p>To create an attach panel in Xamarin, you can use custom renderers:</p>
+<ol>
+ <li id="getConformant">Get the Tizen platform conformant.
+ <p>In Tizen, <code>BaseLayout.Parent</code> is the conformant of the main window.</p>
+<pre class="prettyprint">
+public static EvasObject WindowConformant
+{
+ set; get;
+}
+
+protected override void OnCreate()
+{
+ base.OnCreate();
+ WindowConformant = BaseLayout.Parent;
+ LoadApplication(new App());
+}
+</pre>
+ </li>
+ <li>Create the custom control.
+
+ <p>The following example creates an <code>AttachPanelLayout</code> custom control, which is a custom renderer showing the attach panel in the <code>ContentView</code>. The control also has the <code>IsAttachPanelVisibleProperty</code> property, which determines whether the attach panel is shown or hidden.</p>
+
+<pre class="prettyprint">
+public partial class AttachPanelLayout : ContentView
+{
+ public static readonly BindableProperty IsAttachPanelVisibleProperty =
+ BindableProperty.Create("IsAttachPanelVisible", typeof(bool), typeof(AttachPanelLayout), true);
+
+ public bool IsAttachPanelVisible
+ {
+ get
+ {
+ return (bool)GetValue(IsAttachPanelVisibleProperty);
+ }
+ set
+ {
+ SetValue(IsAttachPanelVisibleProperty, value);
+ }
+ }
+
+ public AttachPanelLayout()
+ {
+ InitializeComponent();
+ }
+}
+</pre>
+ </li>
+ <li>Consume the custom control.
+ <p>The following code example shows how the <code>attachPanelLayout</code> custom control can be consumed by a C# page:</p>
+<pre class="prettyprint">
+private void OpenAttachPanelClicked(object sender, EventArgs e)
+{
+ if (attachPanelLayout != null)
+ {
+ attachPanelLayout.IsAttachPanelVisible = true;
+ }
+ else
+ {
+ if (Content is StackLayout layout)
+ {
+ attachPanelLayout = new AttachPanelLayout();
+ layout.Children.Add(attachPanelLayout);
+ }
+ }
+}
+</pre>
+ </li>
+ <li>Create the custom renderer on the Tizen platform:
+<pre class="prettyprint">
+[assembly: ExportRenderer(typeof(AttachPanelLayout), typeof(AttachPanelLayoutRenderer))]
+namespace AttachPanelSample.Tizen.Mobile
+{
+ public class AttachPanelLayoutRenderer : LayoutRenderer
+ {
+ private AttachPanel attachPanel;
+
+ protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Layout> e)
+ {
+ base.OnElementChanged(e);
+
+ if (attachPanel == null)
+ {
+ attachPanel = new AttachPanel(Program.WindowConformant);
+
+ attachPanel.AddCategory(ContentCategory.Image, null);
+ }
+
+ attachPanel.Show();
+
+ if (e.OldElement != null)
+ {
+ attachPanel.ResultCallback -= AttachPanelResultCallback;
+ attachPanel.EventChanged -= AttachPanelEventChanged;
+ attachPanel = null;
+ }
+
+ if (e.NewElement != null)
+ {
+ attachPanel.ResultCallback += AttachPanelResultCallback;
+ attachPanel.EventChanged += AttachPanelEventChanged;
+ }
+ }
+ }
+}
+</pre>
+ </li>
+</ol>
+
<h2 id="manage" name="manage">Managing an Attach Panel</h2>
</pre>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
-<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
<div id="footer">
<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
projects / sdk / online-doc.git / commitdiff