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
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!
No comments:
Post a Comment