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}"
Join the conversation! Your thoughts help the community grow.