Basic XAML Controls




Content "filtered", Please subscribe for FULL access.


Chapter 9 : Basic XAML Controls I



Introduction arrow_upward


  • We can use each of the control through XAML and C# both, It is very easy and convenient to use controls through XAML but sometimes it is require to generate certain controls on runtime, for that we create objects of that particular control class and through that object we easily get all the methods and properties even can generate events on runtime.

  • ApplicationBar arrow_upward


  • Function:
    • In every windows phone application bar plays very important role to navigate application very smooth and do not occupy much space.
  • XAML
  •  
    <phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar Mode="Default" IsMenuEnabled="True" IsVisible="True">
    <shell:ApplicationBarIconButton Click="Save_Click" IconUri="/Assets/AppBar/save.png" Text="save" />
    <shell:ApplicationBarIconButton Click="Settings_Click" IconUri="/Assets/AppBar/feature.settings.png" Text="settings" />
    <shell:ApplicationBar.MenuItems>
    <shell:ApplicationBarMenuItem Click="MenuItem1_Click" Text="menu item 1" />
    <shell:ApplicationBarMenuItem Click="MenuItem1_Click" Text="menu item 2" />
    </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
    </phone:PhoneApplicationPage.
    ApplicationBar>
    </phone:PhoneApplicationPage>
    
  • C#:
  • private void Settings_Click(object sender, EventArgs e)
    {
    //Add your logic here
    }
    private void MenuItem1_Click(object sender, EventArgs e)
    {
    //Add your logic here
    }
    private void Save_Click(object sender, EventArgs e)
    {
    //Add your logic here
    }
    
  • Output:

  • Border arrow_upward


  • Function:
    • Border control is used to draw a border, background, or both around another XAML object like Image, Button, TextBlock, TextBox etc.
  • XAML code:
  • <Border BorderThickness="10" BorderBrush="Red" >
    <StackPanel >
    <TextBlock Text="Windows" FontSize="35"/>
    <TextBlock Text="Apple" FontSize="35"/>
    <TextBlock Text="Google" FontSize="35"/>
    <TextBlock Text="WAGmob" FontSize="35"/>
    </StackPanel>
    </Border> 
    
  • Output:

  • StackPanel arrow_upward


  • Function:
  • StackPanel is used to arrange child elements into a single line. It can be oriented horizontally or vertically.

  • XAML:
  • <StackPanel >
    <Rectangle Fill="Blue" Width="100" Height="100" Margin="5" />
    <Rectangle Fill="Red" Width="100" Height="100" Margin="5" />
    <Rectangle Fill="Green" Width="100" Height="100" Margin="5" />
    <Rectangle Fill="Pink" Width="100" Height="100" Margin="5" />
    </StackPanel>
    
  • Output:

  • Button arrow_upward


  • Function:
  • Button is a windows phone control used to get user’s tap input.

  • XAML:
  • <Button x:Name="btn1" Margin ="5" 
    HorizontalAlignment="Center"
    Foreground="Green" Width="240" Height="100" Click="OnClick1"  Content="Submit" ClickMode="Release" />
    
  • C#
  • private void OnClick1(object sender, RoutedEventArgs e)
    {
    //Add your logic here
    }
    
  • Output:

  • Canvas arrow_upward


  • Function:
    • Canvas is used to define an area within which we can explicitly position child objects i.e. Image, Button, TextBlock, TextBox etc. by using coordinates that are relative to the area.
  • XAML:
  • <Canvas Width="380" Height="500" Background="Blue">
    <Rectangle Canvas.Left="90" Canvas.Top="30" 
    Fill="red" Width="200" Height="200" />
    <Rectangle Canvas.Left="90" Canvas.Top="260" 
    Fill="Green" Width="200" Height="200" />
    </Canvas>
    
  • Output:

  • WebBrowser arrow_upward


  • Function:
    • WebBrowser allows HTML rendering and navigation functionality to be embedded in an app.
  • XAML:
  • <phone:WebBrowser x:Name="webBrowser1" Height="600" Width="440" Loaded="webBrowser1_Loaded_1">
    </phone:WebBrowser>
    
  • C#
  • private void webBrowser1_Loaded_1
    (object sender, RoutedEventArgs e)
            {webBrowser1.Navigate(new Uri("http://msdn.microsoft.com", UriKind.RelativeOrAbsolute));
            }
    
  • Output:

  • Pivot Control arrow_upward


  • Function:
    • Windows Phone pivot app provides a quick way to manage views or pages. It can be used for filtering large datasets, viewing multiple data sets, or switching app views.
    • For using a pivot control create a project by selecting ‘Windows Phone Pivot App’ temple.
  • XAML
  • <!--Pivot Control-->
            <phone:Pivot Title="MY APPLICATION">
    <!--Pivot item one-->
    <phone:PivotItem Header="first">
                    <!--Double line list with text wrapping-->
                    <phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                        <phone:LongListSelector.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="0,0,0,17">
                                    <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                    <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                </StackPanel>
                            </DataTemplate>
                        </phone:LongListSelector.ItemTemplate>
                    </phone:LongListSelector>
    </phone:PivotItem>
                <!--Pivot item two-->
    <phone:PivotItem Header="second">
                    <!--Double line list no text wrapping-->
                    <phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                        <phone:LongListSelector.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Margin="0,0,0,17">
                                        <TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                        <TextBlock Text="{Binding LineThree}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                                    </StackPanel>
                                </DataTemplate>
                        </phone:LongListSelector.ItemTemplate>
                    </phone:LongListSelector>
    </phone:PivotItem>
            </phone:Pivot>
    
  • Output:

  • RadioButton arrow_upward


  • Function
    • RadioButton represents a button that allows a user to select a single option from a group of options.
    • RadioButton and CheckBox controls have a similar function: they offer choices a user can select or clear.
  • XAML:
  • <RadioButton x:Name="LeftButton" Checked="HandleCheck" GroupName="First Group" Content="Choice 1"   />
    <RadioButton x:Name=" CenterButton" Checked="HandleCheck" HorizontalAlignment="Center"
    GroupName="First Group" Content="Choice 2"   />
    <RadioButton x:Name=" RightButton" Checked="HandleCheck" HorizontalAlignment="Right"
    Content="Choice 3" GroupName="First Group"    />
    
  • C#:
  •         private void HandleCheck(object sender, RoutedEventArgs e)
            {
    //Add whatever you want to do when handle check
            }
    
  • Output:

  • ScrollViewer arrow_upward


  • Function:
    • The ScrollViewer is used to represent a scrollable area that can contain other visible elements.
  • XAML:
  • <ScrollViewer Height="300" Width="150" HorizontalScrollBarVisibility="Auto"  >
                    <TextBlock Width="150" FontSize="35" TextWrapping="Wrap" 
      Text="We can use each of the windows phone control through XAML and C# both. " />
    </ScrollViewer>
    
  • Output:

  • ListBox arrow_upward


  • Function:
  • ListBox control is used to contain a list of selectable items.
    <ListBox  Name="listBox1"    FontSize="28"  SelectionChanged="listBox1_SelectionChanged" Foreground="Aquamarine"  >
                        <ListBoxItem Content="Item 1" />
                        <ListBoxItem Content="Item 2" />
                        <ListBoxItem Content="Item 3" />
                        <ListBoxItem Content="Item 4" />
                        <ListBoxItem Content="Item 5" />
                    </ListBox>
    


    Image arrow_upward


  • Function:
    • An Image is used to represent a control that displays an image in the JPEG or PNG file formats.
  • XAML:
  • <Image Source="/Assets/ApplicationIcon.png" />
    
  • Output:

  • TextBox arrow_upward


  • Function:
    • A TextBox control accepts input from the user via the keyboard.
  • XAML:
  • <TextBlock Name="TxtBlkPhn" Text="Enter your phone number"/>
    <TextBox Name="txtbx"  HorizontalAlignment="Stretch"  InputScope="NameOrPhoneNumber" Height="72"/>
    
  • Output:


  • Thank You from Kimavi arrow_upward


  • Please email us at Admin@Kimavi.com and help us improve this tutorial.


  • Mark as Complete => Receive a Certificate in Windows-Phone-Programming

    Kimavi Logo

    Terms and conditions, privacy and cookie policy

    Kimavi @ YouTube | Email Admin @ Kimavi | Visit TheCodex.Me

    Beautiful Educational Videos for School, College, Languages & Encyclopedia


    Learn Python with 500,000 students


    Created with Love