Pushing the right buttons : How Uno implements views
Tags: underthehood
Published: 2019-10-11 15:20:51

---
title: Pushing the right buttons : How Uno implements views
published: true
tags: Under The Hood
canonical_url: https://platform.uno/pushing-the-right-buttons-how-uno-implements-views%e2%80%8a/
---

<section>
		<div>
					<div>
				<div id="thz-text-block-29455bb9">
<p id="2109">In a <a href="https://medium.com/@unoplatform/under-the-hood-an-introduction-to-uno-platform-6064a765d6a" target="_blank" rel="noopener" data-href="https://medium.com/@unoplatform/under-the-hood-an-introduction-to-uno-platform-6064a765d6a">previous article</a>, I outlined the three main jobs of the <a href="https://platform.uno/" target="_blank" rel="nofollow noopener" data-href="https://platform.uno/">Uno Platform</a> in order to run a UWP app on iOS, Android, and in the browser:</p>
<ol>
<li id="ff6c">Parse XAML files;</li>
<li id="f978">Implement data-binding;</li>
<li id="b199">Implement the suite of views in the <a href="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/controls-by-function" target="_blank" rel="nofollow noopener" data-href="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/controls-by-function">UWP framework</a> for each platform.</li>
</ol>
<p id="ce5a">In this article I want to focus on that last point. How does Uno implement UWP’s views? As a case study I’m going to use that humbly ubiquitous UI control, the button.</p>
<h3 id="103b">The number goes up</h3>
<p id="5516">I present the simplest interactive application imaginable, one step above ‘Hello World’:</p>
<p id="2776">XAML:</p>
</div>
<div>
	<div id="thz-column-cf3485cdd">
	<div>
        <div>
                        <div>	
                <div id="thz-code-snippet-63f33e86">
    <pre>&lt;Page x:Class="UnoExtTestbed.MainPage" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      mc:Ignorable="d"&gt;
    &lt;StackPanel&gt; 
        &lt;TextBlock x:Name="ClickTextBlock" 
                   Text="Button wasn't clicked yet" /&gt; 
        &lt;Button Content="Click me" 
                Click="Button_Click" /&gt; 
    &lt;/StackPanel&gt; 
&lt;/Page&gt;
</pre>
</div> </div>
                                            </div>
    </div>
</div>
</div>
<div id="thz-text-block-fb3ec886"><p>Code behind :</p></div>
<div>
	<div id="thz-column-cf3485cdd">
	<div>
        <div>
                        <div>	
                <div id="thz-code-snippet-69106943">
    <pre>using System; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls;
namespace UnoExtTestbed 
{ 
    public sealed partial class MainPage : Page 
    { 
        public MainPage() 
        { 
            this.InitializeComponent(); 
        }
        private int _clickCount = 0; 
        private void Button_Click(object sender, RoutedEventArgs e) 
        { 
            _clickCount++; 
            ClickTextBlock.Text = $"Button was clicked {_clickCount} times."; 
        } 
    } 
}

</pre>
</div> </div>
                                            </div>
    </div>
</div>
</div>
<div id="thz-text-block-efbf7f59">
<p id="3fed">I made a blank app using the <a href="https://marketplace.visualstudio.com/items?itemName=nventivecorp.uno-platform-addin" target="_blank" rel="nofollow noopener" data-href="https://marketplace.visualstudio.com/items?itemName=nventivecorp.uno-platform-addin">Uno Solution template</a> and put this code on the main page. Whenever the <a href="https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.button" target="_blank" rel="nofollow noopener" data-href="https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.button">Button</a> is clicked, the number goes up. Add a bit more chrome and we could have a <a href="https://en.wikipedia.org/wiki/Cow_Clicker" target="_blank" rel="nofollow noopener" data-href="https://en.wikipedia.org/wiki/Cow_Clicker">viral hit</a>.</p>
<p id="e0f1">Note that the XAML is useful here but not obligatory, either on UWP or Uno. We could have defined and created all our views in C#, had we really wanted to. That flexibility is handy to have.</p>
</div>
<div id="thz-text-block-1a15e7ca"><h3 id="b895">Exhibit A — the visual tree</h3></div>
<div id="thz-media-image-4c8fdffb"><div><img width="800" height="439" src="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20160015/Visual-Tree-information-for-UWP.png" alt="Visual-Tree-information-for-UWP" srcset="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20160015/Visual-Tree-information-for-UWP.png 800w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20160015/Visual-Tree-information-for-UWP-300x165.png 300w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20160015/Visual-Tree-information-for-UWP-768x421.png 768w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20160015/Visual-Tree-information-for-UWP-570x313.png 570w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20160015/Visual-Tree-information-for-UWP-350x192.png 350w" sizes="(max-width: 800px) 100vw, 800px"></div></div>
<div id="thz-text-block-fec0068d">
<h3 id="b895"></h3>
<p id="8787"></p>
<div>
<div></div>
<div style="text-align: center;" data-image-id="0*0Q8HhXDzJ5JeE45F.png" data-width="926" data-height="509" data-action="zoom" data-action-value="0*0Q8HhXDzJ5JeE45F.png" data-scroll="native"><em style="font-size: 14.4px;">Visual tree information for UWP</em></div>
</div>
<p id="dd67"></p>
<div>
<div></div>
<div data-image-id="0*Mocsv-aECZq2Se0q.png" data-width="1148" data-height="406" data-action="zoom" data-action-value="0*Mocsv-aECZq2Se0q.png" data-scroll="native"></div>
</div>
<figcaption></figcaption>
<p id="f944"></p>
<div>
<div></div>
<div data-image-id="0*OSWF5ZcskQa0THiP.png" data-width="1762" data-height="350" data-action="zoom" data-action-value="0*OSWF5ZcskQa0THiP.png" data-scroll="native"></div>
</div>
<figcaption></figcaption>
<p id="0fb8"></p>
<div>
<div></div>
<div data-image-id="0*u9DfKS7ezs_itg3T.png" data-width="1726" data-height="959" data-action="zoom" data-action-value="0*u9DfKS7ezs_itg3T.png" data-scroll="native"></div>
</div>
<figcaption></figcaption>
<p id="e985"></p>
</div>
<div id="thz-media-image-3ef33f62"><div><img width="800" height="282" src="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20160007/Visual-Tree-information-for-Android.png" alt="Visual-Tree-information-for-Android" srcset="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20160007/Visual-Tree-information-for-Android.png 800w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20160007/Visual-Tree-information-for-Android-300x106.png 300w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20160007/Visual-Tree-information-for-Android-768x271.png 768w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20160007/Visual-Tree-information-for-Android-570x201.png 570w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20160007/Visual-Tree-information-for-Android-350x123.png 350w" sizes="(max-width: 800px) 100vw, 800px"></div></div>
<div id="thz-text-block-68b1f864"><p style="text-align: center;"><em style="font-size: 14.4px;">Visual tree information for Android</em></p></div>
<div id="thz-media-image-38487179"><div><img width="1762" height="350" src="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17123932/visualtree-ios.png" alt="visualtree-ios" srcset="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17123932/visualtree-ios.png 1762w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17123932/visualtree-ios-300x60.png 300w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17123932/visualtree-ios-768x153.png 768w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17123932/visualtree-ios-1024x203.png 1024w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17123932/visualtree-ios-1200x238.png 1200w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17123932/visualtree-ios-570x113.png 570w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17123932/visualtree-ios-350x70.png 350w" sizes="(max-width: 1762px) 100vw, 1762px"></div></div>
<div id="thz-text-block-2c8f1c4b"><p style="text-align: center;"><em style="font-size: 14.4px;">Visual tree information for iOS</em></p></div>
<div id="thz-media-image-c126b922"><div><img width="1726" height="959" src="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17124049/visualtree-wasm.png" alt="visualtree-wasm" srcset="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17124049/visualtree-wasm.png 1726w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17124049/visualtree-wasm-300x167.png 300w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17124049/visualtree-wasm-768x427.png 768w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17124049/visualtree-wasm-1024x569.png 1024w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17124049/visualtree-wasm-1200x667.png 1200w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17124049/visualtree-wasm-570x317.png 570w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/17124049/visualtree-wasm-350x194.png 350w" sizes="(max-width: 1726px) 100vw, 1726px"></div></div>
<div id="thz-text-block-f4c9ff0e"><p style="text-align: center;"><em style="font-size: 14.4px;">Visual tree information for WASM</em></p></div> </div>
				</div>
				</section>

<section>
		<div>
					<div>
				<div>
	<div id="thz-column-c6808d8b3">
	<div>
        <div>
                        <div>	
                <div>
	<div id="thz-column-cc3875393">
	<div>
        <div>
                        <div>	
                <div id="thz-text-block-97175fef">
<p id="e985">So what does that get us? You can see the resulting visual trees on each target platform. They’re all substantially similar. The top-level wrapping varies a little, but inside we can see the <code>MainPage</code>, <code>StackPanel</code>, <code>TextBlock</code> and <code>Button</code> we defined in XAML. (The <code>Frame</code> is created in the stock <code>App.xaml.cs</code>code that comes with the project template.)</p>
<p id="041d">You might notice there are a couple of extra views inside the <code>Button</code> that weren't explicitly defined in the XAML. These are part of Button's <a href="https://msdn.microsoft.com/en-us/library/windows/apps/mt299109.aspx" target="_blank" rel="nofollow noopener" data-href="https://msdn.microsoft.com/en-us/library/windows/apps/mt299109.aspx">default template</a>. If you're not familiar with UWP/WPF/Silverlight/etc's concept of control templating, there's a lot to say about <a href="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/control-templates" target="_blank" rel="nofollow noopener" data-href="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/control-templates">the subject</a>, but the gist of it is that any view which inherits from <code>Control</code> is a tabula rasa, an empty vessel which will be filled with inner views as defined in its template. (Some of these child views might be templated controls themselves.) It's a powerful means to customise the look of a reusable control.</p>
<p id="445e">How do we go from a logical tree defined in XAML to a native visual tree?</p>
<p id="3452">Let’s keep the visual aids rolling. We’ll create an empty class inheriting from <code>Button</code>, and take a look at its inheritance hierarchy.</p>
</div> </div>
                                            </div>
    </div>
</div>
</div>
<div>
	<div id="thz-column-c8a4eed9e">
	<div>
        <div>
                        <div>	
                <div id="thz-media-image-3f441957"><div><img width="570" height="270" src="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153008/1_1ebed9dmdBOu6m3lEVl5sw-570x270.png" alt="1_1ebed9dmdBOu6m3lEVl5sw" srcset="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153008/1_1ebed9dmdBOu6m3lEVl5sw-570x270.png 570w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153008/1_1ebed9dmdBOu6m3lEVl5sw-300x142.png 300w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153008/1_1ebed9dmdBOu6m3lEVl5sw-350x166.png 350w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153008/1_1ebed9dmdBOu6m3lEVl5sw.png 600w" sizes="(max-width: 570px) 100vw, 570px"></div></div> </div>
                                            </div>
    </div>
</div>
<div id="thz-column-ca9c8ec84">
	<div>
        <div>
                        <div>	
                <div id="thz-media-image-21088e7a"><div><img width="570" height="270" src="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153008/1_1ebed9dmdBOu6m3lEVl5sw-570x270.png" alt="1_1ebed9dmdBOu6m3lEVl5sw" srcset="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153008/1_1ebed9dmdBOu6m3lEVl5sw-570x270.png 570w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153008/1_1ebed9dmdBOu6m3lEVl5sw-300x142.png 300w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153008/1_1ebed9dmdBOu6m3lEVl5sw-350x166.png 350w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153008/1_1ebed9dmdBOu6m3lEVl5sw.png 600w" sizes="(max-width: 570px) 100vw, 570px"></div></div> </div>
                                            </div>
    </div>
</div>
</div>
<div>
	<div id="thz-column-cd7d30cbc">
	<div>
        <div>
                        <div>	
                <div id="thz-text-block-1f67c0fe"><p style="text-align: center;"><em>Inheritance chains for the Button class on UWP, Android, iOS, and WASM</em></p></div> </div>
                                            </div>
    </div>
</div>
</div>
<div>
	<div id="thz-column-c5c327e17">
	<div>
        <div>
                        <div>	
                <div id="thz-text-block-fe7d125f">
<div>
<p id="ce86">Like the visual tree, the platform-specific inheritance chains are pretty similar (identical in fact) at the ‘leafward’ end, and diverge a bit at the root. Let’s focus on where they diverge: after the UIElement class, the <a href="https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.uielement" target="_blank" rel="nofollow noopener" data-href="https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.uielement">base view type</a> in UWP.</p>
<p id="8ed2">On UWP, <code>UIElement</code> inherits from <a href="https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.dependencyobject" target="_blank" rel="nofollow noopener" data-href="https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.dependencyobject">DependencyObject</a>, the base class for types which support data-binding using <a href="https://docs.microsoft.com/en-us/windows/uwp/xaml-platform/dependency-properties-overview" target="_blank" rel="nofollow noopener" data-href="https://docs.microsoft.com/en-us/windows/uwp/xaml-platform/dependency-properties-overview">DependencyProperty</a> values.</p>
<p id="43ac">In Uno.Android and Uno.iOS, any <code>UIElement</code> is an instance of the native base view type (<a href="https://developer.android.com/reference/android/view/View" target="_blank" rel="nofollow noopener" data-href="https://developer.android.com/reference/android/view/View">Android.Views.View</a> and <a href="https://developer.apple.com/documentation/uikit/uiview" target="_blank" rel="nofollow noopener" data-href="https://developer.apple.com/documentation/uikit/uiview">UIKit.UIView</a> respectively, mapped to managed types via the magic of <a href="https://visualstudio.microsoft.com/xamarin/" target="_blank" rel="nofollow noopener" data-href="https://visualstudio.microsoft.com/xamarin/">Xamarin</a>). So views defined in XAML are also native views. This means, for example, that it's possible to incorporate native views that know nothing about Uno directly into your app's XAML. The following works on iOS:</p>
<pre id="7cb4">&lt;Page x:Class="UnoExtTestbed.MainPage"<br>
            ...<br>
            xmlns:uikit="using:UIKit"&gt;<br>
    ...<br>
    &lt;StackPanel&gt;<br>
            &lt;uikit:UILabel Text="Native label"/&gt;<br>
    &lt;/StackPanel&gt;<br>
&lt;/Page&gt;</pre>
<p id="b926">This is uniquely easy to do in Uno. We talk about ‘leaving an escape hatch’: the goal is 100% code reuse, but if you positively have to use a platform-specific feature or view library, the flexibility is there.</p>
<p id="8f50">But wait, what about <code>DependencyObject</code>?</p>
<p id="8aa8">Since it’s an important part of the UWP contract, we didn’t want to leave <code>DependencyObject</code> out of the picture, but we also have to be able to support <code>DependencyObjects</code> that aren't views at all. (<a href="https://docs.microsoft.com/en-us/windows/uwp/design/style/brushes" target="_blank" rel="nofollow noopener" data-href="https://docs.microsoft.com/en-us/windows/uwp/design/style/brushes">Brushes</a> and <a href="https://docs.microsoft.com/en-us/windows/uwp/design/layout/transforms" target="_blank" rel="nofollow noopener" data-href="https://docs.microsoft.com/en-us/windows/uwp/design/layout/transforms">Transforms</a>, to name just a few.) In Uno therefore <code>DependencyObject</code> is defined as an <a href="https://github.com/nventive/Uno/blob/39b0046ddc34cb3f023eff8db7c6e5ebc16ca670/doc/articles/api-differences.md#dependencyobject-is-an-interface" target="_blank" rel="noopener" data-href="https://github.com/nventive/Uno/blob/39b0046ddc34cb3f023eff8db7c6e5ebc16ca670/doc/articles/api-differences.md#dependencyobject-is-an-interface">interface</a>. It's a 'special' interface however: Uno's code generation automatically adds the backing methods when it finds a class like <code>MyDependencyObject : DependencyObject</code>, allowing code written for UWP to mostly 'just work.' I'll talk more about it in a future article on code generation in Uno.</p>
<p id="8c98">In WebAssembly, for now the inheritance hierarchy is a bit simpler and <code>UIElement</code> is at the root of the type tree. As you can see in the screenshot, Uno.WASM is generating <code>&lt;div&gt;</code> elements for each view in the visual tree.</p>
<h3 id="c005">Style points</h3>
<p id="62ba">The code above nets us a very plain, workaday button, but we could easily spice it up. We set the <code>Content</code> property to a text string, but <code>Content</code> can be anything, even another view. Our button could be an <a href="https://github.com/nventive/Uno.Playground/blob/master/src/Uno.Playground.Shared/Samples/Image.xaml" target="_blank" rel="noopener" data-href="https://github.com/nventive/Uno.Playground/blob/master/src/Uno.Playground.Shared/Samples/Image.xaml">image</a>, a <a href="https://github.com/nventive/Uno.Playground/blob/master/src/Uno.Playground.Shared/Samples/Shapes.xaml" target="_blank" rel="noopener" data-href="https://github.com/nventive/Uno.Playground/blob/master/src/Uno.Playground.Shared/Samples/Shapes.xaml">shape</a>, or a complex visual hierarchy. It could even have another button inside of it.</p>
<p id="87da">What if we want to go in the opposite direction? What if we want to abdicate control over our button’s appearance entirely?</p>
<p id="c14e">A number of controls implemented by Uno, <code>Button</code> included, support the concept of a 'native' style. Instead of a button that's consistent across all versions of your app, you get a button that looks the way a user of the target platform would expect it to look.</p>
<p id="d017">It’s supported by setting a pre-defined <a href="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/xaml-styles" target="_blank" rel="nofollow noopener" data-href="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/xaml-styles">Style</a> that puts an instance of the native control inside the XAML control. In our code above, we could have written:</p>
<pre id="2f5e">&lt;Button Content="Click me"<br>
                Click="Button_Click"<br>
      Style="{StaticResource NativeDefaultButton}" /&gt;</pre>
<p id="92a3">Since Android’s default button looks rather similar to UWP’s, I’m going with a more visually obvious illustration using a different control, <a href="https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.toggleswitch" target="_blank" rel="nofollow noopener" data-href="https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.toggleswitch">ToggleSwitch</a>. I’ll use the <a href="https://github.com/nventive/Uno.Playground/blob/master/src/Uno.Playground.Shared/Samples/ToggleSwitch.xaml" target="_blank" rel="noopener" data-href="https://github.com/nventive/Uno.Playground/blob/master/src/Uno.Playground.Shared/Samples/ToggleSwitch.xaml">sample</a> from the <a href="https://github.com/nventive/Uno.Playground#uno-playground" target="_blank" rel="noopener" data-href="https://github.com/nventive/Uno.Playground#uno-playground">Uno Gallery</a> app.</p>
</div>
<div data-paragraph-count="2">
<p id="6a98" data-scroll="native"></p>
<div></div>
</div>
</div> </div>
                                            </div>
    </div>
</div>
</div> </div>
                                            </div>
    </div>
</div>
</div> </div>
				</div>
				</section>

<section>
		<div>
					<div>
				<div>
	<div id="thz-column-cc55620f0">
	<div>
        <div>
                        <div>	
                <div>
	<div id="thz-column-caa905b39">
	<div>
        <div>
                        <div>	
                <div id="thz-media-image-9cf3fb87"><div><img width="325" height="576" src="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153520/0_kX8Q2-mT-aSBw3US.jpg" alt="0_kX8Q2-mT-aSBw3US" srcset="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153520/0_kX8Q2-mT-aSBw3US.jpg 325w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153520/0_kX8Q2-mT-aSBw3US-169x300.jpg 169w" sizes="(max-width: 325px) 100vw, 325px"></div></div> </div>
                                            </div>
    </div>
</div>
<div id="thz-column-c5e8ce887">
	<div>
        <div>
                        <div>	
                <div id="thz-media-image-6e55d9e6"><div><img width="375" height="576" src="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153517/0_iZq_tOqh8zf0fwES.jpg" alt="0_iZq_tOqh8zf0fwES" srcset="https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153517/0_iZq_tOqh8zf0fwES.jpg 375w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153517/0_iZq_tOqh8zf0fwES-195x300.jpg 195w, https://s3.amazonaws.com/uno-website-assets/wp-content/uploads/2018/08/20153517/0_iZq_tOqh8zf0fwES-350x538.jpg 350w" sizes="(max-width: 375px) 100vw, 375px"></div></div> </div>
                                            </div>
    </div>
</div>
</div>
<div>
	<div id="thz-column-c0178b9c1">
	<div>
        <div>
                        <div>	
                <div id="thz-text-block-149d1423"><p style="text-align: center;"><em>Uno’s ToggleSwitch control on Android and iOS, using default and native styles.</em></p></div> </div>
                                            </div>
    </div>
</div>
</div>
<div>
	<div id="thz-column-cca1cb71b">
	<div>
        <div>
                        <div>	
                <div id="thz-text-block-6fabcb9f">
<section><div><div>
<p id="9c81">The <code>ToggleSwitch</code> with the default style looks the same on all platforms, both statically and in motion. On Android and iOS, however, the <code>ToggleSwitch</code>with the <code>NativeDefaultToggleSwitch</code> style replicates the native toggle control of each platform. Of course you can still bind to its properties in XAML as you normally would. This is another powerful option to have: for some apps it makes sense to look as 'native' as possible, for others its desirable to have a rich, customised UI. You may even want to mix and match different approaches for different screens in your app. With Uno it's straightforward.</p>
<h3 id="7c96">What if I don’t like buttons?</h3>
<p id="4512">In fact <code>UIElement</code> implements primitive interaction events like <a href="https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.uielement.pointerpressed" target="_blank" rel="nofollow noopener" data-href="https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.uielement.pointerpressed">PointerPressed</a>, <code>PointerReleased</code>, etc, so all views in Uno can handle touches/clicks, not just <code>Button</code>. (The big advantage of using <code>Button</code>, apart from the MVVM-friendly <code>Command</code> property, is that it implements <a href="https://docs.microsoft.com/en-us/previous-versions/windows/apps/jj819808%28v=win.10%29" target="_blank" rel="nofollow noopener" data-href="https://docs.microsoft.com/en-us/previous-versions/windows/apps/jj819808(v=win.10)">visual states</a>to animate your button with.)</p>
<p id="091c">There’s plenty more to talk about, like the way that UWP’s API is hooked into each platform’s native input detection, or the way that layouting is done, but that’s all for now.</p>
<p id="7827"><a href="https://github.com/nventive/Uno.QuickStart" target="_blank" rel="noopener" data-href="https://github.com/nventive/Uno.QuickStart">Try out</a> Uno, and <a href="https://gitter.im/uno-platform/Lobby" target="_blank" rel="nofollow noopener" data-href="https://gitter.im/uno-platform/Lobby">hit us up</a> if you have any questions.</p>
</div></div></section><section><div><div>
<p id="558b"></p>
<div></div>
</div></div></section>
</div> </div>
                                            </div>
    </div>
</div>
</div> </div>
                                            </div>
    </div>
</div>
</div> </div>
				</div>
				</section>

The post [Pushing the right buttons : How Uno implements views](https://platform.uno/pushing-the-right-buttons-how-uno-implements-views%e2%80%8a/) appeared first on [Uno Platform](https://platform.uno).