1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014.

Slides:



Advertisements
Similar presentations
Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
Panels, Tab Containers Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer
Introduction to HTML & CSS
Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Pasewark & Pasewark 1 Word Lesson 7 Working with Documents Microsoft Office 2007: Introductory.
CREATING A MULTIPLE PAGE REPORT Presented by: Dr. Ennis-Cole.
Word Lesson 7 Working with Documents
Dinko Jakovljević Microsoft Student Partner | BambooLab
T U T O R I A L  2009 Pearson Education, Inc. All rights reserved Painter Application Introducing Graphics with Windows Presentation Foundation.
Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.
Creating a Web Page with Tables. Objectives Create a text table with preformatted text Create the basic structure of a graphical table Organize table.
Using HTML Tables.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
Software Development. Chapter 4 – Windows application interfaces.
Bayu Priyambadha, S.Kom. for long documents, you can even have links to other locations in that same document  … where ident is a variable for identifying.
WinFX – A Lap Around the Windows Presentation Foundation Bart J.F. De Smet MVP Visual C#
CHAPTER 11 Tables. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents.
Organizing Content by Using Dreamweaver CS5 Domain 5.
Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web.
XP Using Frames in a Web Site Ali Alfayly. XP Tutorial Objectives Create frames for a Web site Control the appearance and placement of frames Control.
1 COS240 O-O Languages AUBG, COS dept Lecture 33 Building Apps Technologies C# (WPF part 1)
WPF chapter 15 Dr. John Abraham Professor UTPA. WPF –an introduction WPF provides a single platform capable of handling graphics, audio and video. WPF.
An Introduction to Silverlight Matt Harrington Developer Evangelist, Microsoft October 20, 2011.
Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
CHAPTER 10 Formatting Tables and Forms. Using Tables the Right Way  HTML and XHTML have a LOT of tags dedicated to building a table  If you have only.
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.
LAYOUT CONTROLS. XAML Overview XAML : eXtensible Application Markup Language pronounced (ZAMEL) is a markup language used to design user interfaces XML-based.
Object Oriented Software Development 9. Creating Graphical User Interfaces.
CSCE 102 – Chapter 6 (Web Design and Layout) CSCE General Applications Programming Benito Mendoza Benito Mendoza 1 By Benito Mendoza.
Introduction to Building Windows 8.1 & Windows Phone Applications.
Week 11 Creating Framed Layouts Objectives Understand the benefits and drawbacks of frames Understand and use frame syntax Customize frame characteristics.
HTML: Hyptertext Markup Language Doman’s Sections.
Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
LEARNING HTML PowerPoint #1 Cyrus Saadat, Webmaster.
CH. 7 Web Page Design –Page Layout with Frames Mr. Ursone.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
Tables in HTML. Table Tag HTML tables always begin and end with a table tag. Syntax:
Rujchai Ung-arunyawee Department of Computer Engineering Khon Kaen University.
Layout With Panels. Canvas Most basic panel Position with explicit coordinates Attached properties: Left, Top, Right, Bottom HorizontalAlignment and VerticalAlignment.
11/12/2015 Box Model Reed Crouch. 11/12/2015  HTML elements can be considered as boxes. In CSS, the term "box model" is used when referring to layout.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Positioning Objects with CSS and Tables
Windows Phone Materi 4. Control Layout & Grouping Border Canvas ContentControl Grid Panorama Pivot StackPanel VirtualizingStackPanel ScrollViewer.
LINKING WEBPAGES USING HTML HYPERLINKS. Hyperlinks are text strings or images on a webpage which when clicked on, links to another section in the same.
HelloWorld Create a window store App Part 3: Navigation, layout, and views Follow the tutorial :
Web111a_chapt04.ppt HTM: Section 4 Tables Table Types Text table elements Easy to use Use fixed-font text (font family monospace) Andale Mono Courier Monaco.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web.
Boxes. boxes- learning targets o I will be able to display buttons (boxes) o I will be able to organize boxes o I will be able to create an animation.
Jaime Rodriguez | Microsoft Principal Technical Evangelist Laurent Bugnion | IdentityMine Senior Director XAML Deep Dive for Windows & Windows Phone Apps.
CSS.
Microsoft Office 2007-Illustrated Introductory, Windows Vista Edition
Microsoft Office 2007-Illustrated
Windows Presentation Foundation Layout with Panels
Adapting UI for Different Screens and Orientations
Microsoft Office 2007-Illustrated Introductory, Windows Vista Edition
03 | Building Windows Store Apps with XAML Part 3
Objectives Create a reset style sheet Explore page layout designs
WPF AKEEL AHMED.
XAML Deep Dive for Windows & Windows Phone Apps Jump Start
04 | UI Presentation & XAML
Floating and Positioning
Bootstrap 4 December 17, 2018.
Positioning Boxes Using CSS
Presentation transcript:

1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014

 XAML offers a more flexible control model than Windows Forms  UI is declared declaratively by using a markup language called XAML – eXtensible Application Markup Language  In XAML based Uis vector graphics are used  GUI controls can be tailored by using templates & styles  Windows 8 apps can made two ways: Using HTML5 & JavaScript Using XAML 2 Steen Jensen, spring 2014

 Properties on objects can be set using two different forms: Attribute syntax – here the attributes on the XAML element map to properties on the object itself Property syntax - here the property of an object is set to one or more values 3  Attribute syntax  Property syntax Steen Jensen, spring 2014

 Demo of Visual Studio solution from the file Chapter07.zip  Project type: Windows Store + Blank App (XAML)  Two XAML files: MainPage.xaml (to build the GUI) Mainpage.xaml.cs(code-behind) (the file App.xaml + code-behind Ap.xaml.cs normally not changed)  Content is normally placed within so-called panels (horizontally or vertically) 4 Steen Jensen, spring 2014

 Make the GreetMeApplication by following the instructions on page 234 bottom – 235 in the file XAML.pdf 5 Steen Jensen, spring 2014

 A panel can be seen as a container, where you can place different content (controls)  Content can be placed either horizontally or vertically  A control itself has some important properties with big influence on the layout: Width & height, margin, padding, HorizontalAlignment, VerticalAlignment  All panels respect the width, height & margin properties  Alignment is not always taken into account 6 Steen Jensen, spring 2014

 The Canvas panel is the most basic: When you add a control to the panel, it is displayed in the top-left corner Left & Top can be used to position X- and Y-position  The StackPanel places its children one after the other horizontally or vertically depending on its Orientation property  The Grid panel supports grid-like layouts with rows and columns: The Height & Width properties support three different values:  Auto: row or column should be sized to fit the content  Fixed value: row or column take up space as defined in the fixed value  Star sizing: the remaining space after rows & columns with Auto and Fixed is assigned 7 Steen Jensen, spring 2014

8

9

10 Steen Jensen, spring 2014

 You can think of resources as a big dictionary container into which you can put whatever you want  Later you can reference anything from this container from XAML or code using a single key  To be able to later reference the resource a Key attribute is used  To use a resource you must reference it using a so-called StaticResource extension 11 Steen Jensen, spring 2014

 Resources can be defined at three different levels: Application resources: resources added to the Resource section in App.xaml can be used anywhere in the app Page resources: resources added to a specific can only be used on the given page Local resources: resources added to controls or panels can only be used inside the given control or panel 12 Steen Jensen, spring 2014

 Follow the instructions on page 250 middle – 251 middle in the file XAML.pdf 13 Steen Jensen, spring 2014

 Controls can be divided into two main groups: ContentControls – can only contain a single element ItemsControls – can contain a list of elements  Apart from the two above groups there are a number of elements: Border, Image, TextBlock, TextBox, PasswordBox, ProgressBar, ProgressRing Description of these elements is quite straightforward and can be found in the file XAML.pdf on page 252 bottom – 256 middle 14 Steen Jensen, spring 2014

 Examples of content controls are: Button, CheckBox, RadioButton, ScrollViewer, ToggleSwitch Description of these elements is quite straightforward and can be found in the file XAML.pdf on page 256 middle – 258 top 15 Steen Jensen, spring 2014

16 Steen Jensen, spring 2014

 Data binding means, that a source object and a target object can be bound together, so a change in one automatically will be transferred to the other  Demo of Visual Studio solution DataBindingDemo from the file Chapter07.zip 17 Steen Jensen, spring 2014

 Follow the instructions on page 265 top – 267 middle in the file XAML.pdf 18 Steen Jensen, spring 2014

19 Steen Jensen, spring 2014