A Glimpse of Coding4Fun Button Controls in Windows Phone 7

Introduction

In this article we are going to explore how to use the Coding4Fun control in Windows Phone 7. Further in details we will discuss how to work with the RoundButton and RoundToggleButton Coding4Fun control in Windows Phone 7. In this article we see that basically the Coding4Fun toolkit offers RoundButton and RoundToggleButton controls. RoundToggleButton is a UI component that derives from CheckBox and exposes several additional dependency properties. Here in this article we will see the functionality of the controls in Windows Phone 7. Further as its name says it is some kind of extended toggle button with round shape and automatic inverted image support. RoundButton is a kind of extended button which derives from Button, has a round shape and offers automatic inverted image support. In this article we will see only a demo for which we can learn each and every thing about these controls. So to implement that functionality you have to use the steps given below, but before starting you have to see my previous article to download these assemblies. Now let's have a look at the properties of these controls, as given below.

Properties

Here we will discuss the properties of the RoundToggleButton control, which derives all properties and events from the CheckBox class. Further as we know that the RoundButton control derives all properties and events from the Button class. So we have some properties of that as given below, which are Content, ImageSource and Orientation.

• Content It is also a property which derives from the parent class and is used to set the content of the RoundToggleButton / RoundButton. Further both button controls expose the following additional public properties.
• ImageSource It's also an property of the control named ImageSource which is a dependency property of type ImageSource. It gets or sets the Image of the RoundToggleButton / RoundButton  controls.
• Orientation It's also an property named orientation which is a dependency property of type Orientation. Which is used to get or set the content orientation of the RoundToggleButton / RoundButton.

Step 1: In this step first of all we have to open a Windows Phone application; let us see how you will open it.

• Go to Visual Studio 2010
• File->New->Project
• Select the template named as silverlight for Windows Phone
• Select the Windows Phone application
• Give it a name as you want.   

Step 2: Now in this step first of all we have to add the assemblies reference to the Windows Phone application; let's see how will you add it.

Step 3: In this step you will see that we have to write the code inside the MainPage.xaml file for the "c4f" prefix declaration. Make sure that your page declaration includes the "c4fToolkit" namespace.

Code: xmlns:controls="clr-namespace:Coding4Fun.Phone.Controls.Toolkit;assembly=Coding4Fun.Phone.Controls.Toolkit" >

Step 4: In this step we will discuss about the property through the code of the RoundButton control with an example in Windows Phone and the code related to this is given below.

Code:

<StackPanel Orientation="Horizontal" >

                <c4f:RoundButton FontSize="24" Content="OK" FontFamily="Comic Sans MS">

                    <c4f:RoundButton.BorderBrush>

                        <RadialGradientBrush>

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="#FF00FFCF" Offset="1" />

                        </RadialGradientBrush>

                    </c4f:RoundButton.BorderBrush>

                </c4f:RoundButton>

                <c4f:RoundButton FontSize="56" Content="56" FontFamily="Comic Sans MS">

                    <c4f:RoundButton.Background>

                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="#FFB63694" Offset="1" />

                        </LinearGradientBrush>

                    </c4f:RoundButton.Background>

                </c4f:RoundButton>

                <c4f:RoundButton Foreground="CornflowerBlue" FontSize="32" Content="32" FontFamily="Comic Sans MS" />
                <c4f:RoundButton ImageSource="/MyButtonControls;component/images/delete.png" Content="Delete" FontFamily="Comic Sans MS"

                                 FontSize="26" Height="79" Width="90">

                    <c4f:RoundButton.Background>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="#C5F98ED7" Offset="1" />

                        </LinearGradientBrush>

                    </c4f:RoundButton.Background>

                </c4f:RoundButton>

                <c4f:RoundButton Orientation="Horizontal" ImageSource="/MyButtonControls;component/images/search.png" Content="Search"

                                 Height="57" Width="154" FontSize="26" FontFamily="Comic Sans MS" />
</StackPanel>

Roundbutton_img:

Step 5: In this step you will see a demonstration of how to set the common RoundToggleButton properties. Just add the following code in the XAML part of your page as given below.

Code:

<StackPanel Orientation="Horizontal" UseLayoutRounding="True">

                <c4f:RoundToggleButton FontSize="26" Content="ok" FontFamily="Comic Sans MS">

                    <c4f:RoundToggleButton.BorderBrush>

                        <RadialGradientBrush>

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="#FFFFC5A0" Offset="1" />

                        </RadialGradientBrush>

                    </c4f:RoundToggleButton.BorderBrush>

                </c4f:RoundToggleButton>

                <c4f:RoundToggleButton FontSize="20" Content="20" FontFamily="Comic Sans MS">

                    <c4f:RoundToggleButton.Background>

                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="#FFB0FFFF" Offset="1" />

                        </LinearGradientBrush>

                    </c4f:RoundToggleButton.Background>

                </c4f:RoundToggleButton>

                <c4f:RoundToggleButton Foreground="#FFA0D367" FontSize="48" Content="48" FontFamily="Comic Sans MS" />

                <c4f:RoundToggleButton ImageSource="/MyButtonControls;component/images/delete.png" Content="DELETE" FontSize="22" FontFamily="Comic Sans MS" />

                <c4f:RoundToggleButton Orientation="Horizontal" ImageSource="/MyButtonControls;component/images/search.png"

                                       Content="Search" FontFamily="Comic Sans MS" FontSize="26" Height="63" Width="176" />

</StackPanel>

 

RoundToggleButton_img:

 

Step 6: In this step is the code to disable a RoundButton which is given below:
 

Code:
 

<StackPanel>

                <c4f:RoundButton x:Name="btn" IsEnabled="False" Click="RoundButton_Click" Orientation="Horizontal"

                   ImageSource="/MyButtonControls;component/images/delete.png" Content="disabled button" FontFamily="Comic Sans MS" FontSize="28" />
</StackPanel>

 

Step 7: In this step we will see the complete code for the MainPage.xaml file which is given below.

 

Code:

 

<phone:PhoneApplicationPage

    x:Class="MyButtonControls.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True"> 

    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions> 

        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="PageTitle" Text="My Control Demo" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontFamily="Comic Sans MS" FontSize="56" />

        </StackPanel> 

        <!--ContentPanel - place additional content here-->

        <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <StackPanel.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="#D773C3AB" Offset="1" />

                </LinearGradientBrush>

            </StackPanel.Background>

            <StackPanel Orientation="Horizontal" >

                <c4f:RoundButton FontSize="24" Content="OK" FontFamily="Comic Sans MS">

                    <c4f:RoundButton.BorderBrush>

                        <RadialGradientBrush>

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="#FF00FFCF" Offset="1" />

                        </RadialGradientBrush>

                    </c4f:RoundButton.BorderBrush>

                </c4f:RoundButton>

                <c4f:RoundButton FontSize="56" Content="56" FontFamily="Comic Sans MS">

                    <c4f:RoundButton.Background>

                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="#FFB63694" Offset="1" />

                        </LinearGradientBrush>

                    </c4f:RoundButton.Background>

                </c4f:RoundButton>

                <c4f:RoundButton Foreground="CornflowerBlue" FontSize="32" Content="32" FontFamily="Comic Sans MS" />
                <c4f:RoundButton ImageSource="/MyButtonControls;component/images/delete.png" Content="Delete" FontFamily="Comic Sans MS"

                                 FontSize="26" Height="79" Width="90">

                    <c4f:RoundButton.Background>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="#C5F98ED7" Offset="1" />

                        </LinearGradientBrush>

                    </c4f:RoundButton.Background>

                </c4f:RoundButton>

                <c4f:RoundButton Orientation="Horizontal" ImageSource="/MyButtonControls;component/images/search.png" Content="Search"

                                 Height="57" Width="154" FontSize="26" FontFamily="Comic Sans MS" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" UseLayoutRounding="True">

                <c4f:RoundToggleButton FontSize="26" Content="ok" FontFamily="Comic Sans MS">

                    <c4f:RoundToggleButton.BorderBrush>

                        <RadialGradientBrush>

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="#FFFFC5A0" Offset="1" />

                        </RadialGradientBrush>

                    </c4f:RoundToggleButton.BorderBrush>

                </c4f:RoundToggleButton>

                <c4f:RoundToggleButton FontSize="20" Content="20" FontFamily="Comic Sans MS">

                    <c4f:RoundToggleButton.Background>

                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="#FFB0FFFF" Offset="1" />

                        </LinearGradientBrush>

                    </c4f:RoundToggleButton.Background>

                </c4f:RoundToggleButton>

                <c4f:RoundToggleButton Foreground="#FFA0D367" FontSize="48" Content="48" FontFamily="Comic Sans MS" />

                <c4f:RoundToggleButton ImageSource="/MyButtonControls;component/images/delete.png" Content="DELETE" FontSize="22" FontFamily="Comic Sans MS" />

                <c4f:RoundToggleButton Orientation="Horizontal" ImageSource="/MyButtonControls;component/images/search.png"

                                       Content="Search" FontFamily="Comic Sans MS" FontSize="26" Height="63" Width="176" />

           </StackPanel>

           <StackPanel>

                <c4f:RoundButton x:Name="btn" IsEnabled="False" Click="RoundButton_Click" Orientation="Horizontal"

                   ImageSource="/MyButtonControls;component/images/delete.png" Content="disabled button" FontFamily="Comic Sans MS" FontSize="28" />
           </StackPanel>
        </StackPanel>

    </Grid>
</phone:PhoneApplicationPage>

 

 Step 8: In this step we will see the code for the MainPage.Xaml.cs file which is given below.

 

Code:

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;
namespace MyButtonControls

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }
        private void RoundButton_Click(object sender, RoutedEventArgs e)

        {

            this.btn.IsEnabled = true;

        }
    }
}

 

Step 9: In this step we will see the design figure of the MainPage.xaml file which is shown below.

 

 

Step 10: In this step we will run the application by pressing F5.

 

Output: In this output you will see the RounButton and RoundToggleButton as well and see the differences on clicking them.

Here are some other resources which may help you.

 

Standard Silverlight Button's for Windows Phone 7

Code to Disable the Hardware Back Button in Windows Phone 7

AutoComplete in Windows Phone 7

How to Work with Items Controls in Windows Phone 7

System Tray ProgressIndicator in Windows Phone 7.5 / Mango phone