Author: James He

 

Before developing an app, you should know which tools can be used
to help with design and layout. As Windows 8.1 released on Oct.18th,
some new features are introduced accordingly. Within this article, we will
share our experience on using these new controls and try to “hack” these
controls from layout and design.

DatePicker & TimePicker

DatePicker allows a user to pick a date value. The
DatePicker control use three Combobox controls which are month, day and year
picker. In our app, we used it as the “start date” and the “end date” of the
financial product. We also use the TimePicker while setting an alert. Both of
them are easy to use and both are new incoming for win8.1, otherwise to drag
and drop several Combobox controls are not easy.


 
  Cultural Settings

Our app is serving for different country products and used
by different culture customers, to adjust the DataPicker style to fit the local
culture is quite necessary. By the help of Windows.Globalization namespace, we
can set CalenderIdentifier to meet the varieties of the culture.

For instance our client is a Japanese user, we’d like to set
the CalenderIdentifier as “JapansesCalender” which has a different layout:
Year-Month-Date, unlike the default “GregorianCalendar” Month-Date-Year format,
Japanese clients must have a feeling: a local app is better than an
international app.

In TimePicker we could set ClockIdentifier as “12hour” and
“24hour”, 24 hour clock is often used in documentation of care as it prevent
the ambiguity of the time, and used as the Military time or Astronomical time
in US and Canada, we can say if the client lives in US or Canada, we use 12
hour clock otherwise 24 hour clock is used.

 

The Header

“Header” is a new feature introduced in Win8.1 and can be
used as a short description text (label) of a control, in win8 we have to add
the TextBlock before the input control to tell our user: Hey, Do something here! But now, our hero “Header” helps us save
our time and shorten our code.

Mission: Add a Header

For instance, in our app, our customer has been asked to type
in their profile name, we simply drag a TextBox into the page and set the
header text “What’s the profile name?”

The XAML code is quite simple:

<TextBox Header="What's the profile name?"/>

But you may say: Well, it’s good, but I want to customize
the text, for instance the header should be a highlighted color instead of
white and the font size should be bigger, is it possible? We notice the same
issue while developing, the original style cannot fit our requirement, and we
shall customize it. Let’s do it step by step.

 

Mission: Style a Header

Do you remember how to style a control in Win8 app? Yes,
it’s a same action, right click the control, and select “Edit Template”, “Edit
a Copy”, then you will see a dialog asking for create style resource, click
“OK”.

Try to find the following code within the Style:

<ContentPresenter
x:Name="HeaderContentPresenter" Grid.ColumnSpan="2"
ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding
Header}" Foreground="{ThemeResource
TextBoxForegroundHeaderThemeBrush}" FontWeight="Semilight"
Margin="0,4,0,4" Grid.Row="0"/>

This is the container of the header text, change the
foreground color or modify the font size, you could do whatever you want to
style the ContentPresenter, furthermore, VisualState can also help to style the
header, for instance when the mouse hover the control, change the font size by
adding an DoubleAnimation to the VisualState “PointOver” section.

To customize the header style is a piece of cake. 

Header Template

We can use a HeaderTemplate if we need more than a simple
text header. A HeaderTemplate can host any valid XAML, including elements that
can be hit-tested (The default Header does not accept focus and can’t be
hit-test), such as a Button, the XAML code as below:

<TextBox.HeaderTemplate>

   <DataTemplate>

        <Button Content="Click Me"
Click="Button_Click"/>

   </DataTemplate>

</TextBox.HeaderTemplate>

Header for Control

Well, we can apply the header to some controls, they are:
ComboBox, Slider, DatePicker, TimePicker, TextBox, PasswordBox and RichEditBox.
Even the HubSection control do have the header but it is not only a text label
but also a user interaction element, we will talk it later in Hub Control
section. 

What we’ve done

In our App, customize the header is also necessary for a
space saving purpose, we will put the header label on the left instead of on
the top.



 

What we’ve done is to modify the Style of TextBox as below
(some detail setting XAML are omitted):

<Grid.ColumnDefinitions>

    <ColumnDefinition
Width="auto"/>

    <ColumnDefinition
Width="*"/>

</Grid.ColumnDefinitions>

<ContentPresenter
x:Name="HeaderContentPresenter" />

<Grid
Grid.Column="1">

    <Border
x:Name="BackgroundElement" />

    <Border x:Name="BorderElement"
/>

    <ScrollViewer
x:Name="ContentElement" />

    <ContentControl
x:Name="PlaceholderTextContentPresenter" />

    <Button x:Name="DeleteButton"
/>

    <ScrollViewer />

</Grid>

 

Placeholder

Unlike Header, Placeholder seems to be a notification to a
user, for instance in our app, PasswordBox is used, the grey text in the
PasswordBox is a hint for the user to pay attention, while typing something,
then placeholder text will disappear.


 

Mission: Add & Style the PlaceholderText

To use the PlaceholderText the following XAML code is used:

<PasswordBox Header="PasswordBox"
PlaceholderText="Password should be longer than 8 character "/>

To Style the PlaceholderText, it is quite same as styling
the header, the only difference is header container is <ContentPresenter x:Name="HeaderContentPresenter" ...
/>
while PlaceholderText container is <ContentControl x:Name="PlaceholderTextContentPresenter"
.../>

Placeholder for Control

Currently only text based control has this new feature, they
are ComboBox, PasswordBox, RichEditBox, SearchBox, TextBox. On Combobox,
PlaceholderText can be treated as SelectedIndex = -1 or SelectionItem = null,
the text-based control will display the PlaceholderText while its content is
empty. 

More Controls will be introduced in the next article such as
the usage of hub control.