HintBox.WP

HintBox.WP is my brand new TextBox-based component for Windows Phone (8.0 and newer) providing support for hint (default text displayed when no user input is given). By using HintBox control in your WP application you can achieve the behavior you know and your users are used to from other platforms.


As long as no text is set in a HintBox control, the specified hint is displayed:

When user focuses the component, the hint disappears, letting the user to enter a text. After losing focus the component checks its content and if nothing is found, the hint is displayed again.

The hint has no impact on control properties. When you programmatically query the Text property while hint is shown, you get an empty string, just as you would expect. The same is true for FontStyle and Foreground properties. Also the TextChanged event is fired only when the value itself changes.

The hint is customizable - by setting its HintForeground and HintStyle properties you can control the color and style (normal/italic). Hint font is the same as set for the input. By default Gray color and FontStyles.Italic style is used.


Adding HintBox component to your Windows Phone project is easy, as it takes only 5 simple steps:

1. Add ExternalGoods.HintBox.WP package to your project via NuGet Package manager.
   In Visual Studio choose Tools > NuGet Package Manager > Manage NuGet Packages for Solution..., search for HintBox in upper right corner of the dialog and then click Install.
   
2. Add namespace reference to your PhoneApplicationPage.
   You can choose any prefix that does not exist on your page yet (red part), but the value (blue part) must stay the same, saying VS what assembly and namespace to look for the component.
   <phone:PhoneApplicationPage
      ...
      xmlns:extGoods="clr-namespace:ExternalGoods;assembly=ExternalGoods.HintBoxWP"
      ...
   />
   
3. Add HintBox component to your XAML layout using namespace from the previous step.
   
   <Grid>
      ...
      <extGoods:HintBox x:Name="username" Hint="Enter your name" />
      ...
   </Grid>
   
   You can then set any other common property or event, just like you would do with classic TextBox.

Table of HintBox control specific properties

type	name	meaning	default value	since
string	Hint	default text to be displayed when no user input is given	{empty string}	1.0.0
FontStyle	HintStyle	style of the hint - either Normal or Italic	FontStyles.Italic	1.0.0
Brush	HintForeground	hint brush - can be a color, gradient or pattern (similar to TextBox' Foreground property)	Colors.Gray	1.0.0

Hope this component will suit your needs and enrich your projects!

ImageButton.WP

Hi there,

we are back and introducing another missing Windows Phone 8 component - ImageButton! With this component you can easily add images to your buttons to create stunning GUI.

 

To use this component in your project, add ExternalGoods.ImageButton.WP package via NuGet Package Manager (see our previous post for more info) and be sure to also add its namespace to your page as following. Remember that you are free to name the key part (extGoods) as you wish, but you must keep the value as stated.

<phone:PhoneApplicationPage
  x:Class="MyProject.MyPage"
  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:extGoods="clr-namespace:ExternalGoods;assembly=ExternalGoods.ImageButton.WP"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Portrait" Orientation="Portrait"
  mc:Ignorable="d">
   

Then you can start using the ImageButton by adding the following part to your PhoneApplicationPage or UserControl XAML. The ImageButton control combines both text and image attributes to provide you with a range of various settings (component's proprietary attributes are higlighted):

     
<extGoods:ImageButton
  x:Name="btnCamera"
  Click="btnCamera_Click"
  ImagePath="/Assets/camera.dark.png"
  ImageForLightTheme="/Assets/camera.light.png"
  ImagePosition="ImageOnLeft"
  ImageVisibility="Visible"
  TextVisibility="Visible"
  Text="Run camera"
  TextMargin="10,0,0,0"
  HorizontalContentAlignment="Center"
  VerticalContentAlignment="Center"
  ImageWidth="32"
  ImageStretch="UniformToFill"
  FontSize="16.667"/>

You can access these properties from both XAML and code.

In ImagePath property you can specify button's default image (as you would do in classic Image control). This image will be used for both dark and light themes, unless specified otherwise (see below). If you don't set this property, the component will look as the classic Button. When ImageButton's IsEnabled property is set to false, the image is automatically dimmed to look inactive.

type: string

default value: null

 

By setting ImageForLighTheme you can set an image that will be displayed when using the device's light theme. Switching between images is handled automatically when you change the device's theme When ImageButton's IsEnabled property is set to false, the image is automatically dimmed to look inactive. It is highly recommended to use this image, as your application may fail to pass the validation process otherwise due to non-visible image when using the light theme (light image on light button background).

type: string

default value: null

 

ImagePosition attribute does exactly what you would expect - setting the image position relative to the text. You can choose from 4 values:

• ImageOnLeft
  
• ImageOnTop
  
• ImageOnRight
  
• ImageOnBottom
  

type: ImageButton.Arrangement
default value: ImageOnLeft

ImageVisibility and TextVisibility properties control visibility of the image or text respectively. As by other common controls Visible or Collapsed values are available.
type: System.Visibilitydefault value: Visible

Text property sets the button's text. You can omit this attribute to have an image-only button.

type: string

default value: null

TextMargin sets the space around the text. You can use it to set the space between image and text. It has no effect if no text is set.
type: System.Windows.Thickness
default value: 0.0

By setting HorizontalContentAlignment and VerticalContentAlignment properties you can easily adjust the alignment of both image and text. E.g. setting ImagePosition to ImageOnTop and HorizontalContentAlignment to Left will result in following design:

type: System.Windows.HorizontalAlignment / System.Windows.VerticalAlignment
default values: Left / Top


Hope you will enjoy this new component!

NumericPassword.WP

NumericPassword.WP is a TextBox-based component for Windows Phone providing missing and widely requested numeric password input.

Adding NumericPassword component to your Windows Phone project is easy, as it takes only 5 simple steps:

1. Add ExternalGoods.NumericPassword.WP package to your project via NuGet Package manager.
   In Visual Studio choose Tools > NuGet Package Manager > Manage NuGet Packages for Solution..., search for NumericPassword in upper right corner of the dialog and click Install.
   
2. Add namespace reference to your PhoneApplicationPage.
   You can choose any prefix that does not exist on your page yet (red part), but the value (blue part) must stay the same, saying VS what assembly and namespace to look for the component.
3. Add NumericPassword component to your XAML layout using namespace from the previous step.
4. Set a password character you wish to use via PasswordChar property. If not set the default character ("*") ("●") will be used.
5. You can set any other common property or event, just like you would do with classic TextBox.
   The only one protected property (which you can read, but can not set) is InputScope, which is hardcoded to Number.

In code you can access the value directly the same way like in the classic TextBox:

pinPopup_pin.Text = "0000";  //presets the value (user will see four dots instead)
string value = pinPopup_pin.Text;  //returns value entered by user (e.g. 1234)

That's it! You are now ready to build your own superb UI with NumericPassword!

type	name	meaning	default value	since
string	PasswordChar	character to be displayed instead of each one digit of the numeric password	●	1.0.0
bool	PasswordVisible	when set to true, the password is displayed in a plain form (i.e. showing original digits instead of PasswordChar)	false	1.0.2
string	Text	current password value; when being set, the digits are displayed as PasswordChars, when read the original plain-text password is returned	{empty string}	1.0.0