spacurt waverly hathora
Jacque Waiden
The controls are also quite different. This is mainly because they each serve a different purpose. The Panorama is meant to entice the user to explore; whereas the Pivot is about tasks and getting something done. As Amy Alberts and Chad Roberts say in their presentations, Pivots are efficient, focused, habitual whereas the Panorama is expansive, dynamic, inviting exploration. We can see this differentiation in Figure 1 and 2, where the Panorama offers a visually appealing experience, enticing the user with an attractive background, large title, variety of UI controls, animation, thumbnails, etc, while the Pivot appears less appealing. There is also one other difference, and that is the content width of each view. The Panorama views usually span over screen boundaries, whereas the Pivot content is confined to the screen width; fitting within the screen. Users can navigate through the pivot sections not only via the left to right gestures, but also by directly selecting the Pivot Title.
As you can see in Figure 1, some pixels of the next section are showing to the right. This is to hint the user that there is more content to explore. A Panorama application should offer a visually appealing experience. This can be achieved with an attractive background. It can be either a single colour or a background image. According to the design guidelines, the image size should be 800 pixels high and 480 to 1000 pixels wide. The image could possibly be wider but no more that 2000 px as the image will be clipped at this width. Note that an image with a height of less then 800 pixels will be stretched to that height without constraining proportions. The background image is the bottom layer of the Panorama with the different sections overlaying on top of it. You should not attempt to have the background dependent on the content because they are not going to match up. As you can see in the video, the Panorama title moves in different rate then its section titles as the user moves thought the Panorama.
Some regard the pivot being a lot like the TabControl for the phone. The pivot also has several different views (sections). It is recommended to limit the number of sections to 7 to ensure users can comprehend what is presented to them.
As we said before, Pivots are about getting something done, and so Pivots are suited to have an ApplicationBar. This is contrary to Panorama based applications which should not show an ApplicationBar. Therefore, if your page needs an application bar, use a Pivot instead of a Panorama. Pivots are designed to represent data or items of similar type. For example, pivots can be used as filters for similar content around the same task flow. A good example of a pivot is the Email application, which shows all emails in one view, flagged emails in another, unread email in another, etc.
You should not place a Pivot inside a Panorama, or nest Pivots. Also you should not attempt to use either the Pivot or Panorama for creating a wizard flow. As Amy Alberts says, the user sees Panoramas and Pivots as distinct areas of data being surfaced to them, and not as a flow of UI that the user walks through. So for a wizard, use a page flow instead. It is also recommended not to use a map control inside a Pivot or Panorama. You should also avoid animating the panorama title or section titles as they are going to be moving as the user moves through the control. Also avoid dynamically changing the Panorama title. The UI guidelines also state not to override the horizontal pan and flick functionality because it collides with the interaction design of the controls. Also keep to the recommended number of views, seven for Pivot and four for Panorama. And keep in mind that the user should never lose his or her place inside the Panorama, and should always know how to get back. You would also not want to have a Panorama, and every link on the Panorama, taking you to a Pivot.
Both controls have custom templates that you can use to create the Pivot or Panorama. You can either create a new Pivot or Panorama Application Project or, for an existing project, you can add a new Pivot or Panorama Page. We will demonstrate both ways. Both controls can also be added through Visual Studio into the Toolbox and then dragged onto a page.
We begin by creating a new Panorama Application Project. In Visual Studio go File -> New -> Project and select Windows Phone Panorama Application found under the Silverlight for Windows Phone option (see Figure 3).
Once the project is created, we can see that the template provided us with a project structure, some sample data, and formatted views for the Panorama. Visual Studio also provides us with a nice feature to view the panorama sections in the designer. The designer will show the currently selected panorama item xaml (see Figure 4).
Working with the Panorama control is straight forward. The excerpt shown below is taken from the Panorama application template. As we can see, the Panorama control holds two PanoramaItem content controls. The PanoramaItem controls host the panoramic content, and these are the views or sections we talked about in the overview above. As per the recommendations, there should not be more than four PanoramaItem controls within a Panorama control. In the demo, we use three. Although we do not use this in the demo, the PanoramaItem controls can be added and removed programmatically at runtime. The Panorama control contains a Title and a Background property. The Title in the excerpt below is specified as text, but it has a TitleTemplate dependency property and thus can also be set through data binding. This also applies to the Header property of the PanoramaItem. As you can see below, the panorama background is applied as an image with an ImageBrush, and we use the same in the demo, but you can also use GradientBrush or SolidColorBrush. If you use a background image, its Build Action should be set to Resource to ensure that it is shown as soon as the first page of the application starts. Setting the Build Action to Content means that it gets loaded asynchronously. Note in the excerpt below that all left and right margins of the panorama items are set to 12px. This is for UX reasons and applies to the Pivot control too.
The second Panorama section shows new releases. The information is depicted as a small thumbnail of the movie, together with a title, average rating, and a date that the Dvd is available from. Again, we set the Header and use the ListBox control to layout the content (see below).
In the second PanoramaItem, there is a date field which required formatting. In Silverlight 4, you can specify string formatting directly in the Binding expression, but because Windows Phone is based on Silverlight 3, we need to use a Converter. Luckily, Daniel wrote such a converter some time ago, and so I have incorporated his StringFormatConverter class in my demo. Thank you darling. To use the StringFormatConverter class, add a namespace reference in the MainPage.xaml, like so:
The following excerpt shows the pivot control template. We can see many similarities with the Panorama control. Just like the Panorama control, the Pivot Control holds PivotItem content controls. It has a Title and a Background. The Title can be set as text or it can be databound, just like with the Panorama Control. Again, this is true for the PivotItem Headers. The Pivot can also have its background set to an image. We do not set the Pivot Background property in the demo application, and thus the Pivot background behaves according to the dark or light theme set on the phone (which means that it will be either black or white).
In the demo application, we use the Pivot control to show movies for a selected genre. The Pivot page is called GenreDvds.xaml. Just like with the Panorama control, I modified the template, changing the Pivot title, headers, etc. Because the GenreDvds.xml page is being navigated to from the Panorama page, displaying DVDs for the selected genre, I set the Pivot Title with a Binding expression as shown below:
In this article, we explored the Pivot and Panorama controls, introduced the demo application, saw how to add the controls to your project, and had a look at the Pivot and Panorama templates. In part II of this article, we will cover OData, WrapPanel, Page Navigation, and the Progress Bar. I hope you found this article useful. If you enjoyed my article, please rate it and maybe share your thoughts below.
Build a feature, launch it to my target demographic, and learn from how they use it to improve the product. With every feature launch, there is likely to be a spike in users, but then 90% of those people will leave. I should expect that. The goal is to learn and iterate so that over time, fewer people leave.
Finally, in this build-to-iterate cycle, the only thing that matters is the number of users retained and revenue earned. Verbal feedback, Twitter comments, or competition rankings are just distractions. Honestly, it was calming to focus on these two metrics because they were honest and directly correlated to the value I was adding.
One of the best parts of the hackathon was that I was building alongside a bunch of inspiring, cool people. These are some of my favorite projects as well as some hacks they used to build and launch effectively:
While working on his initial idea, Dillion noticed the dearth of OpenAI analytics. So halfway through the hackathon, he pivoted and built beautiful LLM analytics dashboards using tremor.so and tailwindcss. He launched via AI newsletters to target the most relevant people, and today, he has over 3000 users that love his product. My takeaway: sometimes while building, you find better problems to solve.
When the AI Drake and Weekend song went viral, Arib looked into how one creates AI songs. Turns out, it was a hard-to-use Google Collab. So he launched a waitlist (with no product), and then started working on a website that makes the process easier to do. Once complete, he shared the website on the Discord where people were using the Google Colab to create AI music and his website went viral. He got 100k users in 19 days and he talks more about his process here. Arib also finessed a large sum of free Modal credits just by putting their logo on his landing page.
90f70e40cf