CPSC 481 – Week #7 Sowmya Somanath

CPSC 481 – Week #7Sowmya Somanath

ssomanat@ucalgary.ca

ReminderMonday Nov 2 in class – 1. Write-up – redesign rational (i.e. changes from first prototype)2. Screen snapshots3. Grading sheet from handout4. Horizontal prototype presentation freeze

Either email your slides to me (ssomanat@ucalgary.ca) OR submit them on a USB along with your write-up.

Reminder• Wednesday Nov 4 in tutorial (15 min each group) – T04: Horizontal prototype presentation

• Friday Nov 6 in tutorial (15 min each group) –T02: Horizontal prototype presentation

Plan for TodayMore WPF – useful for implementing vertical prototype.Please download Week 7 slides from: http://pages.cpsc.ucalgary.ca/~ssomanat/CPSC481.htm

User Controls

User Controls• User controls pack a set of UI elements.• Useful when repeating same UI patterns• Instead of copy pasting code, you can re-use user controls.

User Controls1. Add a user control to your class. Name it UserControlDemo

User Controls2. Add Elements to your user control<Grid> <Label Content="I am the User Control" HorizontalAlignment="Left" Margin="19,35,0,0" VerticalAlignment="Top" Height="40" Width="271" FontWeight="Bold" FontSize="24"/> <Button Content="OK" HorizontalAlignment="Left" Height="50" Margin="35,117,0,0" VerticalAlignment="Top" Width="223" FontWeight="Bold"/> <Button Content="CANCEL" HorizontalAlignment="Left" Height="53" Margin="35,185,0,0" VerticalAlignment="Top" Width="223" FontWeight="Bold"/> </Grid></UserControl>

User Controls

3. Add below code to MainWindow.xaml

User Controls

4. Add below code to MainWindow.cs

private void button1_Click(object sender, RoutedEventArgs e) { UserControlDemo ucdemo = new UserControlDemo(); Grid.SetRow(ucdemo, 1); grid1.Children.Add(ucdemo); }

User Control and Transitions:

Navigation Method

1. Create 3 user controls. Name them: MainMenu, Page 1 and Page 22. Add a Switcher.cs to the project – This class will handle switching between different

user controls

using System.Windows.Controls;

public static MainWindow pageSwitcher;

public static void Switch(UserControl newPage) { pageSwitcher.Navigate(newPage); }

You will need this to use Navigate() method

3. Add the following code to MainWindow.cs

public MainWindow() { InitializeComponent(); Switcher.pageSwitcher = this; Switcher.Switch(new MainMenu()); }

public void Navigate(UserControl nextPage) { this.Content = nextPage; }

4. Design MainMenu, Page 1 and Page 2 to look like this:

5. For MainMenu, Page 1 and Page 2 add the following events

private void Button_Click(object sender, RoutedEventArgs e) { Switcher.Switch(new MainMenu()); }

private void Button_Click_1(object sender, RoutedEventArgs e) { Switcher.Switch(new Page1()); }

private void Button_Click_2(object sender, RoutedEventArgs e) { Switcher.Switch(new Page2()); }

User Control and Transitions: Excercise1

Don’t duplicate this

Solution <Grid Name="grid1"> <Grid.RowDefinitions> <RowDefinition Height="40"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions>

</Grid.ColumnDefinitions> <Button Name="button1" Grid.Column="0" Content="BACK" Margin="0,0,305,0" Click="button1_Click"/> <Button Name="button2" Grid.Row="0" Content="NEXT" Margin="292,0,0,0"

Click="button2_Click"/> <StackPanel Name="stack1" Grid.Row="1"></StackPanel> </Grid>

Solution private void button1_Click(object sender, RoutedEventArgs e) {

Next _next = new Next(); stack1.Children.Clear(); stack1.Children.Add(_next); }

private void button2_Click(object sender, RoutedEventArgs e) { Back _back = new Back(); stack1.Children.Clear(); stack1.Children.Add(_back); }

User Control and Scroll Viewers:

Excercise2

Create a user control for an email that looks like this:

Solution<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="389*"/> <ColumnDefinition Width="234*"/> </Grid.ColumnDefinitions>

<Canvas x:Name="DeleteGroup" Margin="364,12,209,95" Grid.ColumnSpan="2"> <Ellipse Fill="#FFB61D1D" HorizontalAlignment="Left" Height="50" Stroke="Black"

VerticalAlignment="Top" Width="50"/> <Label Content="X" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Width="40"

FontSize="24" FontWeight="Bold" Canvas.Left="10" Foreground="White"/> </Canvas>

</Grid>

Create a scroll viewer in MainWindow.xaml:

Solution

</Grid>

• Make the Sender a property that can be different in each instance of an email.

• When the delete Button is clicked, the email should be removed from the view.

• Use the scroll viewer in your main window to show 20 emails (using the Email User Control you created)

---- Create a for loop that initializes 20 Email User Controls. ---- To make it easy, initialze the Sender of each email to “Sender” + I

e.g. Sender 0, Sender 1….

Solutionpublic partial class Email : UserControl { private string name; public string Name { get { return name; } set { name = value; this.SenderTextblock.Content = this.name; } }

public Email() { InitializeComponent(); this.DeleteGroup.MouseLeftButtonDown += DeleteGroup_MouseLeftButtonDown; }

void DeleteGroup_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { (this.Parent as Panel).Children.Remove(this); }

Solution

public MainWindow() {

InitializeComponent(); for(int i = 0; i < 20; i++) { Email email = new Email(); email.Name = "Sender " + i.ToString(); this.Emails.Children.Add(email); }

Styles and Templates: Button

<Window.Resources>   <Style x:Key="myButtonStyle" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button">  <Border Name="border" BorderBrush="DarkGray" BorderThickness="5" CornerRadius="30,0,66,0" Background="Brown"> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"

Name="buttonpresenter"> </ContentPresenter> </Border>  <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="border" Property="Border.CornerRadius"

Value="30,10,20,10"></Setter> </Trigger> <Trigger Property="IsMouseOver" Value="false"> <Setter TargetName="border" Property="Background“

Value="Gray"></Setter> </Trigger>

</ControlTemplate.Triggers></ControlTemplate>

</Setter.Value> </Setter> </Style></Window.Resources>

Give the style a key you can refer it by

Create this as a resource – window/ user control

<Grid> <Button Style="{StaticResource myButtonStyle}" Content="Button" HorizontalAlignment="Left" Height="154" Margin="54,59,0,0" VerticalAlignment="Top"

Width="396" Click="Button_Click"/></Grid>

• Control Template defines how a control is drawn• Can also include a setter property that can be changed:

Style and Template: Excercise3

Define a template for a button that has default border color of black. Create a button instance that uses the template but changes border color to blue.

Solution <Setter Property="BorderBrush" Value="Black"/>

List Boxes

Drag a ListBox into the XAML

List Boxes

Click to modify items

List Boxes

Click to addSelect ‘ListBoxItem’

List Boxes

Change content

• Can get the currently-selected index:listbox1.SelectedIndex

ListBox: Excercise4

• Create a listbox like below and change TextBox content based on listbox selection.

• Add ‘SelectionChanged’ event handler.

Solution

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { textbox1.Text = (String)((ListBoxItem)listbox1.SelectedItem).Content;

Simple Animation

Add an ellipse to your xaml

Simple animations

Simple animation

• Add this code to the top of your C# file:using System.Windows.Media.Animation;

• Add this inside your user control class before the constructor: private Storyboard myStoryboard;

Simple animation // animate fade in and fade out DoubleAnimation animation = new DoubleAnimation(); animation.From = 1.0; animation.To = 0.0; animation.Duration = new Duration(TimeSpan.FromSeconds(5)); animation.AutoReverse = true; animation.RepeatBehavior = RepeatBehavior.Forever;

myStoryboard = new Storyboard(); myStoryboard.Children.Add(animation); Storyboard.SetTargetName(animation, ellipse1.Name); Storyboard.SetTargetProperty(animation, new PropertyPath(Ellipse.OpacityProperty));

// Use the Loaded event to start the Storyboard. ellipse1.Loaded += new RoutedEventHandler(myEllipseLoaded);

Simple animation

private void myEllipseLoaded(object sender, RoutedEventArgs e) { myStoryboard.Begin(this); }

Simple animations: Excercise5

Change the animation so that the width of the ellipse is animated.

Solution// animate change width DoubleAnimation animation = new DoubleAnimation(); animation.From = 120.0; animation.To = 240.0; animation.Duration = new Duration(TimeSpan.FromSeconds(5)); animation.AutoReverse = true; animation.RepeatBehavior = RepeatBehavior.Forever;

myStoryboard = new Storyboard(); myStoryboard.Children.Add(animation); Storyboard.SetTargetName(animation, ellipse1.Name); Storyboard.SetTargetProperty(animation, new PropertyPath(Ellipse.WidthProperty));

Mouse based Interactions

Add an ellipse to your xaml

Click and Drag

Click and Drag

• Add MouseDown, MouseMove and MouseUp events to the ellipse

Drag and Move bool captured = false;

private void ellipse1_MouseDown(object sender, MouseButtonEventArgs e) { captured = true;

}private void ellipse1_MouseMove(object sender, MouseEventArgs e) { if (captured) { Thickness margin = ellipse1.Margin; margin.Left = e.GetPosition(grid1).X - (ellipse1.Width / 2); margin.Top = e.GetPosition(grid1).Y - (ellipse1.Height / 2); ellipse1.Margin = margin; }

}private void ellipse1_MouseUp(object sender, MouseButtonEventArgs e) { captured = false;

Triggers

Triggers• Allow you to change the value of a given property once a certain

condition changes• Allow you to do this entirely in XAML

• Three types:1. Property trigger2. Data trigger3. Event trigger

Property Trigger• Defined by <Trigger> element.• Watches a specific property on the owner control, and whenever that

property has a specific value, it changes other properties.

Property trigger example<TextBlock Text="Hello, styled world!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center">

<TextBlock.Style><Style TargetType="TextBlock">

</Trigger></Style.Triggers>

</Style></TextBlock.Style>

</TextBlock>

Property trigger example• Result:• Underlines and colours the text red on mouse-over.

Data Triggers• Defined by <DataTrigger> element.• Watches a specific property that can be anywhere (not specifically on

the owner control), and whenever that property has a specific value, it changes other properties.

Data Trigger example<CheckBox Name="cbSample" Content="Hello, world?" /><TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="48">

</DataTrigger></Style.Triggers>

</TextBlock>

TriggersData trigger example• Result:• Changes the text to “Yes!” and the text colour to green when the checkbox is

checked.

Event Triggers• Defined by <EventTrigger> element.• Triggers in response to an event being called.• Triggers exactly once that event is called.

Event Trigger example

<Style.Triggers><EventTrigger RoutedEvent="MouseEnter">

<EventTrigger.Actions><BeginStoryboard>

</BeginStoryboard></EventTrigger.Actions>

</EventTrigger>

Event Trigger example...

</BeginStoryboard></EventTrigger.Actions>

</EventTrigger></Style.Triggers>

</TextBlock>

Event Trigger• Result:• Animation enlarges the text on mouse-over, and shrinks it back to its original

size on mouse-leave.

Image as a ButtonExercise: Create a button that displays as an image.

Image as a ButtonSolution:<Grid>

</Grid>

CPSC 481 – Week #7 Sowmya Somanath

Documents

Sowmya Iyer, CEO, Xebec Digital

Sowmya Muniraju

20091125 Goal Setting by Lakshmi Sowmya

14/13/2009 1 Software Engineering, CPSC-4360-01, CPSC-5360-01, Lecture 13 CPSC-4360-01, CPSC-5360-01, Lecture 13

Sowmya Data Analysis

Advanced Control Systems Prof. Somanath Majhi Department of Electronics and Electrical

Somanath ppt

C S DữLiLiệuuc củaa CPSC CPSC · *Bài thuyết trình này được nhân viên CPSC soạn duyệt và không nhất thiết phản ánh quan điểm của ệuuc củaa CPSC

2150400023 Sowmya COMMUNITY OF KSHETRIYA RAJUS 3rd assessment.docx

20091125 - Goal Setting - Lakshmi Sowmya

Sowmya Strands Inovation Live

Sowmya Latest Stills

Mimansa Darshan Vimarsha - Somanath Naine

CPSC presentation

Prabhasa Kshetra - The Glory of Somanath

JOB SEARCH PORTAL by SOWMYA MATHUKUMALLI B. Tech

Ppt Final Sowmya

B5- Ii~I11 II!i · 9* $250 Steve Fisher fisherc~helmholtz.sdsc.edu 10.* $250. Sowmya Raxuachandran sowmya~cs.utexas.edu ... 101 James T Buchanan Adaptive Synchronization of Neural

Somanath MBA Report

Sowmya Dcw Chapter