Rujchai Ung-arunyawee Department of Computer Engineering Khon Kaen University.

Slides:



Advertisements
Similar presentations
17 HTML, Scripting, and Interactivity Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and.
Advertisements

ASP.NET Intro An introduction to the languages and communication of an ASP.NET system.
Intro To Cascading Style Sheets By Mario Yannakakis.
Cascading Style Sheets
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
Cascading Style Sheets CSS. What is it? Another file format ! its not like html Describes the looks of “selectors” in a.css file (example.css) in the.
XHTML & CSS 2 By Trevor Adams. Last week XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)
1 Lesson 10 Using JavaScript with Styles HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.
Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.
Chapter 9 Introduction to the Document Object Model (DOM) JavaScript, Third Edition.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
Basics of HTML.
Cs413_design01.ppt Web Design vs. GUI Design Designing for the Web: the designer has to give up full control of the design In traditional design, you control.
Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
INTRODUCTION TO DHTML. TOPICS TO BE DISCUSSED……….  Introduction Introduction  UsesUses  ComponentsComponents  Difference between HTML and DHTMLDifference.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
STYLING THE WEBSITE - EXTERNAL CSS BY JORGE MARTINEZ.
 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)
Robert Vitolo CS430.  CSS (Cascading Style Sheets)  Purpose: To provide a consistent look and feel for a set of web pages To make it easy to update.
Rujchai Ung-arunyawee Department of Computer Engineering Khon Kaen University.
Styles with Cascading Style Sheets (CSS) Web Design – Section 4-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design.
NetTech Solutions Working with Web Elements Lesson 6.
Advanced Level Course. Site Extras Site Extras consist of four categories: Stationeries Site Trash Designs Components.
Rujchai Ung-arunyawee Department of Computer Engineering Khon Kaen University.
Tutorial 5 Formatting with CSS. Objectives Session 5.1 – Evaluate why CSS styles are used – Determine where to write styles – Create an element selector.
 cascade Style Sheets (CSS) is a mark-up language that was first proposed in 1994 by Håkon Wium Lie. CSS works in conjunction with HTML to greatly increase.
V 1.0 Programming III. Automatic notifications (…Changed, INofityPropertyChanged, ObservableCollection ) Data formatters Data conversions Resources.
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
Object Oriented Software Development 9. Creating Graphical User Interfaces.
Dreamweaver 8 Introduction What you can do with Dreamweaver 8 What's new in Dreamweaver 8.
Adam Calderon – C# MVP Application Development Practice Lead Interknowlogy.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
Rujchai Ung-arunyawee Department of Computer Engineering Khon Kaen University.
Rujchai Ung-arunyawee Department of Computer Engineering Khon Kaen University.
INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.
TOPIC II Dynamic HTML Prepared by: Nimcan Cabd Cali.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
CHAPTER 4 CREATING STYLES AND LAYOUTS WITH CSS. CHAPTER OBJECTIVES Create ID-based styles Position content with CSS Format text with CSS Identify CSS.
Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text.
Cascading Style Sheets (CSS) EXPLORING COMPUTER SCIENCE – LESSON 3-5.
Web Design Terminology Unit 2 STEM. 1. Accessibility – a web page or site that address the users limitations or disabilities 2. Active server page (ASP)
Flux & React Web Application Development Mark Repka, Rich McNeary, Steve Mueller.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
S.MD.FAROOQ M.Tech., [Ph.D] Assistant Professor Department of CSE Santhiram Engineering College.
Jim Fawcett, Brown Bag Seminar Series Fall 2007
Working with Cascading Style Sheets
Cascading Style Sheets (CSS)
Web Basics: HTML/CSS/JavaScript What are they?
Style Sheets.
Jim Fawcett, Brown Bag Seminar Series Fall 2007
Styles with Cascading Style Sheets (CSS)
Madam Hazwani binti Rahmat
XAML User Interface Creation in C#
Introduction to web design discussing which languages is used for website designing
WPF AKEEL AHMED.
.NET and .NET Core 7. XAML Pan Wuming 2017.
CS134 Web Design & Development
Working with Text and Cascading Style Sheets
Cascading Style Sheets
What are Cascading Stylesheets (CSS)?
Using Cascading Style Sheets (CSS)
Web Design & Development
Web Programming and Design
Presentation transcript:

Rujchai Ung-arunyawee Department of Computer Engineering Khon Kaen University

WPF Resources Assembly resources Object resources. (aka. Logical or Declarative resources)

Object Resources Efficiency. Resources let you define an object once and use it in several places in your markup. This streamlines your code and makes it marginally more efficient. Maintainability. Resources let you take low-level formatting details (such as font sizes) and move them to a central place where they’re easy to change. It’s the XAML equivalent of creating constants in your code. Adaptability. Once certain information is separated from the rest of your application and placed in a resource section, it becomes possible to modify it dynamically. For example, you may want to change resource details based on user preferences or the current language.

The Resources Collection Every element includes a Resources property, which stores a dictionary collection of resources. The most common way to define resources is at the window-level

Use a resource in your XAML By a markup extension StaticResource: set once, when the window is first created. DynamicResource: reapplied if the resource is changed

Accessing Resources in Code

Application Resources WPF continues to check the set of resources you’ve defined for your application the App.xaml file

System Resources SystemColors, SystemFonts, and SystemParameters

Styles A style is a collection of property values that can be applied to an element. Similar to the cascading style sheet (CSS) standard in HTML The Style class is used to create styles.

Properties of The Style Class

Create a Style at object level

Setting Complex Properties

Creating a button-only style

Attaching Event Handlers

Many Layers of Styles

Automatically Applying Styles Simply need to set the TargetType property to indicate the appropriate type and leave out the key name altogether.

Sets the Style property to a null value is to remove the style.

The Style.Triggers: Trigger Using triggers, you can automate simple style changes without resorting to code

Multiple Triggers

The Style.Triggers: EventTrigger Simple Trigger waits for a property change to occur Event Trigger waits for a specific event to be fired Event trigger requires that you supply a series of actions that modify the control These actions are used to apply an animation.