# Exam 4 | GUI
## Windows Presentation Foundation (WPF)
* History & features
* Work began in early 2000s by Microsoft under code name "Avalon"
* Effort to provide a clearer separation between the interface and business logic
* Avalon renamed WPF in July 2005
* WPF released in 2006 as part of .NET Framework 3.0
* Silverlight (released in 2007) is a subset of WPF
* Universal Windows Platform (UWP) apps is similar in many respects to WPF, uses XAML
* Extensible Application Markup Language (XAML)
* Pronounced "zammel"
* XML-based markup language for defining and arranging GUI controls
* Can be manually generated/edited by Visual Studio and Blend
* Example XAML document
```C#
<Window x:Class="WPF_HelloWindows.Window1”
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Hello WPF" Height="150" Width="250">
<Grid Background="AntiqueWhite" >
<Label x:Name="label1" VerticalAlignment="Center"
HorizontalAlignment="Center">Hello, WPF!</Label>
</Grid>
</Window>
```
* **Window class**
MainWindow.xaml
Main window of application
All child elements go between
```C#
<Window> tags
<Window x:Class="HelloWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
</Grid>
</Window>
```
<Grid> is a layout container that places widgets in rows and columns
**MainWindow.xaml.cs**
* Code-behind file for XAML
* Handles events and calls business and data access logic in response
* Class inherits from System.Windows.Window
```C#
namespace HelloWPF
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}
```
Project files
* App.xaml, App.xaml.cs, window.xaml and .xaml.cs
**App.xaml**
* Auto-generated file defining the Application object and settings
```C#
<Application x:Class="HelloWPF.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
</Application.Resources>
</Application>
```
StartupUri indicates XAML file to be executed first when app starts
**App.xaml.cs**
* Code-behind file for App.xaml, which handles application-level events
* Example which looks for a command-line argument when Startup event is triggered
view sourceprint?
```C#
namespace HelloWPF
{
public partial class App : Application
{
private void Application_Startup(object sender, StartupEventArgs e)
{
if (e.Args.Length == 1)
MessageBox.Show("Opening file: " + e.Args[0]);
}
}
}
```
**MainWindow.xaml**
* Main window of application
* All child elements go between <Window> tags
```C#
<Window x:Class="HelloWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
</Grid>
</Window>
```
<Grid> is a layout container that places widgets in rows and columns
Controls
* Defining in XAML and programmatically
Add to XAML
```C#
<Label x:Name="label1">Hello, WPF!</Label>
```
Can also add programmatically
```C#
Label myLabel = new Label();
myLabel.Content = "Hello, WPF";
grid1.Children.Add(myLabel);
```
* Width, Height, Min/Max Width/Height, Margin,
* Horizontal and Vertical Alignment
**Width, Height**
* Device-independent unit (1/96th inch) measurement
* Can use other measurement units: px, in, cm, pt
Auto to use minimum size around content
**MinWidth, MinHeight, MaxWidth, MaxHeight** - define a range of acceptable values
**HorizontalAlignment** (Left, Center, Right, or Stretch)
**VerticalAlignment** (Top, Center, Bottom, or Stretch)
Common layouts: Grid, Canvas, StackPanel, DockPanel, WrapPanel
Grid - controls layed out in rows and columns
Canvas - controls positioned at explicit coordinates
StackPanel - controls stacked left to right (Horizontal orientation) or top to bottom (Vertical orientation)
DockPanel - controls docked to left, right, top, bottom, or center
WrapPanel - controls stacked in one row (Horizontal orientation) or column (Vertical orientation)
* Event routing – directed, bubbling, tunneling
* All WPF events are routed events
* Can travel up UI containers (from child to parent)
* Can travel down UI containers (from parent to child)
* List of all UI events
Direct events: Don't travel up or down (see Click example)
Bubbling events: Travel up (Source to Window)
```C#
<GroupBox Name="myGroupBox" Header="Bubbling Example"
MouseLeftButtonUp="MyCallback">
<Label x:Name="myLabel"
MouseLeftButtonUp="MyCallback">Click Me</Label>
</GroupBox>
private void MyCallback(object sender, MouseButtonEventArgs e)
{
// Label notified of event first, then GroupBox
}
```
Tunneling events: Travel down (top of containment hierarchy to Source)
```C#
<GroupBox Name="myGroupBox" Header="Tunneling Example"
PreviewMouseLeftButtonUp="MyCallback">
<Label x:Name="myLabel"
PreviewMouseLeftButtonUp="MyCallback">Click Me</Label>
</GroupBox>
private void MyCallback(object sender, MouseButtonEventArgs e)
{
// GroupBox notified of event first, then Label
}
```
Note: All tunneling events start with "Preview"
* Commands
* ApplicationCommands: New, Open, Save, etc.
* Command is an action or task that may be triggered by different user interactions
* Example: Edit > Copy and a Copy toolbar button might both need to trigger the same command
* Commands can better synchronize a task's availability (make both Copy options disabled if no text is selected)
* Some common built-in commands: New, Open, Save, Close, Cut, Copy, Paste, Undo, Redo
* CommandBindings, Executed, CanExecute
**Execute:** Occurs when the command associated with this AddInCommandBinding executes.
**CanExecute:** check to determine whether the command can be executed on the command target.
* Creating custom commands
Styles
Control templates
Triggers
Familiarity with Lights Out app
Custom commands
If the predefined commands are insufficient, a new command can be created as a custom RoutedCommand or RoutedUICommand
Example custom command
XAML
```C#
<Window x:Class="CustomCommandDemo.MainWindow"
...
xmlns:local="clr-namespace:CustomCommandDemo" ... >
<Window.CommandBindings>
<CommandBinding Command="{x:Static local:CustomCommands.Uppercase}"
CanExecuted="UppercaseCommand_CanExecute"
Executed="UppercaseCommand_Executed" />
</Window.CommandBindings>
<Grid>
<Button Content="Do Command" Command="{x:Static local:CustomCommands.Uppercase}" />
</Grid>
</Window>
```
**Definition of custom command**
```C#
public static class CustomCommands
{
// Make command accessible to XAML
public static readonly RoutedUICommand Uppercase = new RoutedUICommand(
"Uppercase", "Uppercase", typeof(CustomCommands));
}
```
**Command handlers**
```C#
// Don't allow capitalizing if no text is selected
private void UppercaseCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e)
{
e.CanExecute = textBox.Selection.Text.Length > 0;
}
// Capitalize the text that is selected
private void UppercaseCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
TextSelection ts = textBox.Selection;
ts.Text = ts.Text.ToUpper();
}
```
Designing with the Mind in Mind
Chapter 7 – Attention Limited/Memory Imperfect
* Short- vs. Long-term memory
* Working memory, capacity of 7 plus/minus 2
no pues esto ya lo vimos. Talvez solo repasa la mitad que no te toco o mira
Chapter 8 – Limits on Attention
* Attention is limited in capacity
* When we focus on our tools, we loose focus on our goals.
* Web applications should not call attention to themselves, because then user will loose focus of their goals.
* Inattentional blindness is when our mind is intensely occupied with a task, goal, or emotion, we sometimes fail to notice objects and events in our environment that we otherwise would have noticed and remembered
* show people a picture, then show them a second version of the same picture and ask them how the two pictures differ. Not noticing differences in features is called change blindness
* When people passively watch a computer display with objects appearing, moving around, and disappearing, the visual cortex of their brains registers a certain activity level.
* Because of short term memory and attention span, humans rely on external methods to mark up their environments to remember where we are in a task.
* Web apps should also help the user by marking what the system has done and what it hasnt done
* Information scent: When we looking for information for our goal, we are processing information and discarding anything that wont help. we are following the scent of our goal.
* Familiar paths: Most people prefer familiar paths, especially when working under deadlines.
* Thought cycle: goal, execute, evaluate
* Software concepts should be based on the task rather than the implementation.
* Allow users to back out of tasks that didn't take them toward their goal.
* Provide clear paths for the user goals that the software is intended to support.
* When we complete a task, the attentional resources focused on that task’s main goal are freed to be refocused on other things that are now more important. The impression we get is that once we achieve a goal, everything related to it often immediately “falls out” of our short-term memory—that is, we forget about it.
Google Drive
Gist
Clipboard
Sign in with Wallet
