Week 6: First XAML Control Exercise

Size: px

Start display at page:

Download "Week 6: First XAML Control Exercise"

Jack Sims
6 years ago
Views:

BCIS 4650 Week 6: First XAML Control Exercise The controls you will use are: Blank App (Universal Windows), which contains a Grid control by default StackPanel (acts as a container for CheckBoxes

1 BCIS 4650 Week 6: First XAML Control Exercise The controls you will use are: Blank App (Universal Windows), which contains a Grid control by default StackPanel (acts as a container for CheckBoxes and RadioButtons) TextBlocks for display; TextBoxes for user entry Two Buttons Three RadioButtons (remember, to operate exclusively, they must be placed inside a container control) Three CheckBoxes

2 BUILD THE UI FIRST (ALWAYS). ================================================================================================ 1. On MainPage.xaml: 23 desktop. Try using the Properties Window to set values. NOTE that if you put the mouse cursor inside the Designer, and scroll the mouse wheel while holing down the CTRL key, you can magnify or shrink the display with more customization than if you use the lower-left listbox. 2. Grid: Name= grdcalc Under Layout, Width of 800 and a Height of 600; Margins= 100,100 VerticalAlignment= top HorizontalAlignment= left. Under Brush, select Solid Color Brush icon, set Background color to a shade of medium-dark Green. First, move the Rainbow Slider to the middle of the green. Second, pick the color, and here you have two ways to do this: a. Click on partial black circle at upper left and drag it until you see the shade of green you want; or b. click on the eyedropper tool and click on the color with the eyedropper (BTW, the eyedropper tool works with ANY displayed color on the screen). Either way, the software will let you change your selection. NOTE next to the eyedropper icon is a box displaying the hex value for the color you picked. Your pick also shows in the swatch box next to the Background property. 3. Draw a TextBlock at the top: Name= tbktitle, FontSize=72, Foreground=White, FontFamily=Arial, Text= A Simple Calculator, Height 100, Top Margin Second TextBlock: FontSize=36, Foreground=White, FontFamily=Arial, Text= Enter Number 1: 5. First TextBox: Name= txtnumber1, same FontSize and FontFamily values as above, Background=White, Text= 6. Select, copy and paste the second TextBlock. Move this third TextBlock into position with mouse or arrow keys. Change Text to read Enter Number 2: 7. Select, copy, paste, and move the first TextBox. Name= txtnumber2 8. Draw first Button. Name= btnadd Content= Add Same FontSize and FontFamily values, Background=Blue, Foreground-=White. 9. Select, copy, paste, and move the second Button. Name= btnclear Content= Clear Background=OrangeRed 10. Select, copy, paste, and move second TextBlock. This third TextBlock s Text= Your Result Is: 11. Select, copy, paste, and move the first TextBox. This third TextBox s Name= txtresult 12. On the right-side of the page, draw a StackPanel; Background= LightGray. Populate this control by selecting one control from the Toolbox, drag and release inside the Stack Panel. Then configure that control. For the first five controls, set the following properties alike: FontFamily=Arial, FontSize=22, Foreground= Blue., Layout Expose more entries if necessary Padding Left-Margin=20 TextBlock Text= Select a Background Color: RadioButton Name= rad1 Content= Green IsChecked=true RadioButton Name= rad2 Content= Black IsChecked=false RadioButton Name= rad3 Content= Maroon IsChecked=false TextBlock. Height=32, TopMargin=50. Text= Select a Font Type: 13. Now draw three CheckBoxes, vertically aligned, and configure as follows: Name= chk1 Content= Comic Sans MS FontSize= 22 FontFamily= Comic Sans MS Name= chk2 Content= Times New Roman FontSize= 22 FontFamily= Times New Roman Name= chk3 Content= Arial FontSize= 22 FontFamily= Arial

3 CODE FOR MainPage.xaml <Page. <Grid x:name="grdcalc" Background="Green" Width="800" Margin="100,100" VerticalAlignment="Top" HorizontalAlignment="Left" Height="600"> <TextBlock x:name="tbktitle" HorizontalAlignment="Left" Height="100" Margin="49,20,0,0" Text="A Simple Calculator" TextWrapping="Wrap" VerticalAlignment="Top" Width="704" FontSize="72" Foreground="White" <TextBlock HorizontalAlignment="Left" Height="51" Margin="55,135,0,0" Foreground="White" FontSize="36" Text="Enter Number 1:" TextWrapping="Wrap" VerticalAlignment="Top" Width="381" <TextBox x:name="txtnumber1" HorizontalAlignment="Left" Height="46" Margin="58,204,0,0" Text="" <TextBlock HorizontalAlignment="Left" Height="51" Margin="55,273,0,0" Foreground="White" FontSize="36" Text="Enter Number 2:" TextWrapping="Wrap" VerticalAlignment="Top" Width="381" <TextBox x:name="txtnumber2" HorizontalAlignment="Left" Height="46" Margin="58,334,0,0" Text="" <Button x:name="btnadd" Content="Add" FontFamily="Arial" FontSize="32" Background="Blue" Foreground="White" HorizontalAlignment="Left" Height="54" Margin="61,398,0,0" VerticalAlignment="Top" Width="89" Click="btnAdd_Click"/> <Button x:name="btnclear" Content="Clear" FontFamily="Arial" FontSize="32" Background="OrangeRed" Foreground="White" HorizontalAlignment="Left" Height="51" Margin="194,401,0,0" VerticalAlignment="Top" Width="104" Click="btnClear_Click"/> <TextBlock HorizontalAlignment="Left" Height="51" Margin="55,471,0,0" Foreground="White" FontSize="36" Text="Your Result Is:" TextWrapping="Wrap" VerticalAlignment="Top" Width="381" <TextBox x:name="txtresult" HorizontalAlignment="Left" Height="46" Margin="56,520,0,0" Text=""  <StackPanel HorizontalAlignment="Left" Height="407" Margin="399,150,0,0" VerticalAlignment="Top" Width="310" Background="LightGray" Padding="22,0,0,0" > <TextBlock Text="Select a Background Color:" FontFamily="Arial" FontSize="22" TextWrapping="Wrap" Foreground=" Blue"/> <RadioButton x:name="grd" FontFamily="Arial" FontSize="22" Content="Green" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="Blue" Height="32" IsChecked="True" Checked="rad1_Checked"/> <RadioButton x:name="rad2" FontFamily="Arial" FontSize="22" Content="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="Blue" IsChecked="False" Checked="rad2_Checked"/> <RadioButton x:name="rad3" FontFamily="Arial" FontSize="22" Content="Maroon" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="Blue" IsChecked="False" Click="rad3_Click"/> <TextBlock Foreground="Blue" FontFamily="Arial" FontSize="22" Text="Select a Font Type:" TextWrapping="Wrap" Margin="0,50,0,0"/> <CheckBox x:name="chk1" Content="Comic Sans MS" FontSize="22" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" FontFamily="Comic Sans MS" Checked="chk1_Checked"/> <CheckBox x:name="chk2" Content="Times New Roman" FontSize="22" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" FontFamily="Times New Roman" Checked="chk2_Checked"/> <CheckBox x:name="chk3" Content="Arial" FontSize="22" FontFamily="Arial" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Checked="chk3_Checked"/> </StackPanel> </Grid> </Page>

4 NOW WRITE THE C# LOGIC (CODE-BEHIND) IN MainPage.xaml.cs ================================================================================================ using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices.WindowsRuntime; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; // Make sure that all the using statements above are in your C# file!! // The Blank Page item template is documented at namespace _2018_Simple_Calculator /// <summary> /// An empty page that can be used on its own or navigated to within a Frame. /// </summary> public sealed partial class MainPage : Page public MainPage() this.initializecomponent(); //NOTE: If you write these procedures here first, instead of making the Designer or Properties Window //create the starter C#, your software WILL NOT WORK because there is no association in the XAML code! private void btnadd_click(object sender, RoutedEventArgs e) txtresult.text = (Convert.ToInt64(txtNumber1.Text) + Convert.ToInt64(txtNumber2.Text)).ToString(); private void btnclear_click(object sender, RoutedEventArgs e) txtnumber1.text = ""; txtnumber2.text = ""; txtresult.text = ""; private void rad1_checked(object sender, RoutedEventArgs e) grdcalc.background = new SolidColorBrush(Windows.UI.Colors.Green); private void rad2_checked(object sender, RoutedEventArgs e) grdcalc.background = new SolidColorBrush(Windows.UI.Colors.Black); private void rad3_click(object sender, RoutedEventArgs e)

5 grdcalc.background = new SolidColorBrush(Windows.UI.Colors.Maroon); private void chk1_checked(object sender, RoutedEventArgs e) chk2.ischecked= false; chk3.ischecked = false; tbktitle.fontfamily = new FontFamily("Comic Sans MS"); private void chk2_checked(object sender, RoutedEventArgs e) chk1.ischecked = false; chk3.ischecked = false; tbktitle.fontfamily = new FontFamily("Times New Roman"); private void chk3_checked(object sender, RoutedEventArgs e) chk1.ischecked = false; chk2.ischecked = false; tbktitle.fontfamily = new FontFamily("Arial");

Week 7: NavigationView Control Exercise

BCIS 4650 Week 7: NavigationView Control Exercise BUILD THE UI FIRST (ALWAYS). ================================================================================================ 1. Start with a New Project