Let’s learn adding controls and content to a page
happily & quickly :)
one of the most powerful features of the Windows 8
XAML platform is the flexibility the platform provides to create custom
controls.
About creating a UI with XAML
The XAML layout system provides various Panel
controls:
Grid:
You use a Grid to arrange content in rows and columns(Grid.Row
and Grid.Column attached properties)
StackPanel:
You use a StackPanel to arrange content in single line.
Canvas:
Canvas when you want to control all aspects of positioning and sizing
of content(Canvas.Top and Canvas.Left
attached properties)
HorizontalAlignment
and VerticalAlignment: Margin
Width
and Height:
MinWidthMaxWidth
and MinHeightMaxHeight:
Use to
manage files in your project.
Double-click a file to open it. If the file is
already open, it's made the active document.
Properties
Use to
view and edit properties of the selected item.
By
default, properties are grouped by category. Expand a category to see its
properties.
XAML
Designer
Common
interactions are drag -and-drop to arrange items, and click to select an item.
XAML
editor
Use to directly edit XAML
Toolbox
Use to add
controls and other items to your app UI.
Drag and
drop controls onto the surface of the designer.
Device
Use to
simulate different settings of a physical device in the designer.
Click the
view buttons to simulate different app views in the designer.
Change the
Display settings to simulate different resolutions in the designer.
Document
Outline
Use to
select and arrange UI elements in a hierarchical view.
Click an
item to select it.
To
add a navigation app bar
In Solution Explorer, double-click
MainPage.xaml to open it.
In the Document Outline, select the
"pageRoot" element.
In the Properties panel, click the Properties
button () to show the Properties view.
Under Common in the Properties
panel, find the TopAppBar property.
Click the New button next to TopAppBar.
An AppBar control is added to the page.
In the Document Outline, expand the
TopAppBar property.
Select the "photoPageButton" element, drag
it onto the AppBar, and drop it.
Under Layout in the Properties
panel, set the HorizontalAlignment property to Right
().
Press F5 to build and run the app. To test the app
bar, right-click on the main page. The app bar opens at the top of the screen.
Style
the app bar button
In Solution Explorer, expand the
Common folder and double-click StandardStyles.xaml to open it.
Find the Style with the x:Key value
PicturesAppBarButtonStyle.
Tip PressCtrl+F
to open the Find window and search for
"PicturesAppBarButtonStyle".
Move this Style outside of the
comment tags (
<!-- comment -->)
to make it available to use.
Or, copy the XAML into the local ResourceDictionary
in App.xaml.
Here's the XAML for the Style.
<Stylex:Key="PicturesAppBarButtonStyle"
TargetType="ButtonBase"
BasedOn="{StaticResourceAppBarButtonStyle}">
<SetterProperty="AutomationProperties.AutomationId"
Value="PicturesAppBarButton">
<SetterProperty="AutomationProperties.Name"
Value="Pictures">
<SetterProperty="Content"
Value="">
<Style>
Save
and close StandardStyles.xaml.
In
MainPage.xaml, select the "photoPageButton" element in the Document
Outline panel.
(You
might need to expand the TopAppBar element to see it.)
Reset
these Button properties: Content.
Under
Miscellaneous in the Properties panel, find
the Style property.
Click
the property marker next to the Style property to open the
menu.
In
the menu, select Local Resource>PicturesAppBarButtonStyle.
Here's
the final XAML for the app bar
XAML
<common:LayoutAwarePage.TopAppBar>
<AppBar>
<Buttonx:Name="photoPageButton"
Click="PhotoPageButton_Click"
HorizontalAlignment="Right"
Style="{StaticResourcePicturesAppBarButtonStyle}">
<AppBar>
<common:LayoutAwarePage.TopAppBar>
Press
F5 to build and run the app. To open the app bar, swipe from the top or bottom
edge of the screen, or right-click the app.
you
used the app bar to clean up the layout of the main page. Now we turn our
attention the new photo viewer page.
Add
a layout grid
To add a Grid panel to a page
In
the Properties panel, enter "contentGrid" as the
name of the Grid.
Reset
these Grid properties: Width, Height,
HorizontalAlignment, VerticalAlignment, and Margin.
Under
Layout, set the left Margin and bottom Margin
to "120".
Click
anywhere on the left grid rail to add a row.
Repeat
the previous step to add another row to the Grid.
Place
your cursor over the grid rail in the first row until the flyout appears.
Click
the down arrow to open the flyout menu. Select Pixel in the
menu.
Place
your cursor over the grid rail again until the flyout appears. In the flyout,
click the number value.
Type
"50" and press Enter to set the Height property to
50 pixels.
Repeat
the process in steps 9-12 to set the second row Height to 70
pixels.
The
last row is set to the default value of "1*" (1 star), which means it
will use any remaining space.
Now,
let's look at the XAML that's produced by this.
XAML
<Gridx:Name="contentGrid"
Grid.Row="1" Margin="120,0,0,120">
<Grid.RowDefinitions>
<RowDefinitionHeight="50">
<RowDefinitionHeight="70">
<RowDefinition>
<Grid.RowDefinitions>
<Grid>
To
define rows in a Grid, you add RowDefinition
objects to the Grid.RowDefinitions collection. You can set
properties on the RowDefinition to specify what the row will
look like. You add columns in the same way, using ColumnDefinition
objects and the Grid.ColumnDefinitions collection.
Add
controls to photo page
Now
you add controls to the Grid. You add a Button
to get a picture from the Pictures library, an Image control
to show the picture, and some TextBlock controls to show
information about the picture file. You use StackPanels in the
last grid row to arrange the Image and TextBlock
controls.
To add controls to the page
Add the "Get photo" button
In
the Document Outline, select the "contentGrid"
panel.
With
the "contentGrid" panel selected, drag a Button
control from the Toolbox and drop it in the first grid row.
In
the Properties panel, reset these Button
properties: HorizontalAlignment, VerticalAlignment,
and Margin.
Set
the button's Content property to "Get photo".
Add the image name TextBlock
In
the Properties panel, reset these TextBlock
properties: HorizontalAlignment, VerticalAlignment,
and Margin.
Add the Image
With
the "contentGrid" panel selected, drag a StackPanel
from the Toolbox and drop it on the last grid row.
Reset
these StackPanel properties: Width, Height,
HorizontalAlignment, VerticalAlignment, and Margin.
Drag
an Image control from the Toolbox and drop it
in the Border.
In
the Name text box for the Image, type
"displayImage", then press Enter.
In
the drop-down list for the ImageSource property, select
"Logo.png".
In
the Document Outline, select the Border that
contains the Image.
In
the Properties panel, reset the BorderWidth
property.
Select
the first TextBlock and set its Text property
to "File name:".
Select
the third TextBlock and set its Text property
to "Path:".
Select
the fifth TextBlock and set its Text property
to "Date created:".
The
photo viewer UI looks like this now. The layout is nearly complete, but you
still need to fix the appearance of the TextBlocks that show
the picture info.
Here's
the XAML that's generated for this layout.
XAML
<Grid x:Name="contentGrid"
Grid.Row="1" Margin="120,0,0,120">
<Grid.RowDefinitions>
<RowDefinitionHeight="50">
<RowDefinitionHeight="70">
<RowDefinition>
<Grid.RowDefinitions>
<ButtonContent="Get
photo">
<TextBlockGrid.Row="1"
TextWrapping="Wrap" Text="TextBlock"
Style="{StaticResourcePageSubheaderTextStyle}">
<StackPanelx:Name="imagePanel"
Grid.Row="2" Orientation="Horizontal">
<BorderBorderBrush="Gray"
BorderThickness="7" Background="Gray">
<Imagex:Name="displayImage"
Source="AssetsLogo.png">
<Border>
<TextBlockTextWrapping="Wrap"
Text="File name:">
<TextBlockTextWrapping="Wrap"
Text="TextBlock">
<TextBlockTextWrapping="Wrap"
Text="Path:">
<TextBlockTextWrapping="Wrap"
Text="TextBlock">
<TextBlockTextWrapping="Wrap"
Text="Date created:">
<TextBlockTextWrapping="Wrap"
Text="TextBlock">
<StackPanel>
<Grid>
You
need to fix the layout and formatting of the TextBlocks you
added. To give the picture info text the layout you want, you group the
controls into a vertical StackPanel.
To group items into a StackPanel
In
the Document Outline, click the first TextBlock
in the "imagePanel" StackPanel.
Press
Shift, then click the last TextBlock in the group. The 6 TextBlock
controls are now selected.
Right-click
the group of selected TextBlock controls. In the context menu,
select Group Into>StackPanel.
A
StackPanel is added to the page, and the 6 TextBlock
controls are put inside the StackPanel.
Under
Layout in the Properties panel, set the StackPanelOrientation
property to Vertical.
Set
the StackPanel left Margin to "20".
The
last thing to do is to format the picture info text. You use built-in styles
for the text, and set some margins to create space between the elements.
XAML:
<StackPanelMargin="20,0,0,0">
<TextBlockTextWrapping="Wrap"
Text="File name:"
Style="{StaticResourceCaptionTextStyle}">
<TextBlockTextWrapping="Wrap"
Text="TextBlock"
Style="{StaticResourceItemTextStyle}"
Margin="10,0,0,30">
<TextBlockTextWrapping="Wrap"
Text="Path:"
Style="{StaticResourceCaptionTextStyle}">
<TextBlockTextWrapping="Wrap"
Text="TextBlock"
Style="{StaticResourceItemTextStyle}"
Margin="10,0,0,30">
<TextBlockTextWrapping="Wrap"
Text="Date created:"
Style="{StaticResourceCaptionTextStyle}">
<TextBlockTextWrapping="Wrap" Text="TextBlock"
Style="{StaticResourceItemTextStyle}"
Margin="10,0,0,30">
<StackPanel>
Press F5 to build and run the app. Navigate to the
photo page. It now looks like this.
By:
Khushbu Wadhwani,
Senior Windows app
developer,
References:MSDN,Microsoft
developer forum
No comments:
Post a Comment