Вы находитесь на странице: 1из 20

2

XAML
X

AML (Extensible Application Markup Language


) .NET.
XAML ,
WPF (Windows Presentation Foundations),
Windows 
. Silverlight
XAML, WPF.
XAML , HTML XHTML,
, .
XHTML JavaScript,
XAML C#. XHTML, XAML 
XML , 
.
XAML.
XAML, , 
Silverlight 
. XAML, 
Silverlight
Silverlight.

XAML WPF, , Silverlight,


, , WF (Workflow
Foundation) XPS (XML Paper Specification XML).

XAML
XAML .
XAML
Silverlight. . 
, <Button> Silverlight
Button ().
XML, XAML 
. XAML 
.
. , <Button> 
<Grid>,
Button Grid ().

50

2
. 
. 
.

XML, , XAML, www.w3schools.com/xml.


XAML, Visual Stu
dio .
, .
1 <UserControl x:Class="SilverlightApplication1.Page"
2
xmlns="http://schemas.microsoft.com/client/2007"
3
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4
Width="400" Height="300">
5
6
<Grid x:Name="LayoutRoot" Background="White">
7
</Grid>
8 </UserControl>
: UserControl ( ),
Silverlight, Grid, .
XML, XAML
. UserControl. ,
</UserControl>, .
UserControl
, XAML, 
. , 4 
Silverlight:
4 Width="400" Height="300"
UserControl. 
Width () Height () Silverlight
400300 . 
Background () Grid: , 
.

XAML
XAML <UserControl> 
Silverlight UserControl. , . ,
Silverlight UserControl,
, .
, , 
.
Silverlight XML
Silverlight.
.
2 xmlns="http://schemas.microsoft.com/client/2007"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

XAML

51

XML , .
,
, .
, . .
xmlns XML 
. ,
XAML Silverlight.
http://schemas.microsoft.com/client/2007
Silverlight 2.0. Silverlight 2.0, UserControl
Grid. , 
, . ,
,
.
http://schemas.microsoft.com/winfx/2006/xaml
XAML. XAML,
. 
x. , , 
(<x:_>).
XAML
. ,
UserControl Grid, ,
http://schemas.vicrosoft.com/client/2007.
System.Windows.UserControl SystemWindows.Controls.Grid.

XAML Silverlight
XAML Silverlight. Silverlight XML.
XAML . XML URI ( ). ,
, . URI , , . URI,
URI , , - . schemas.microsoft.com Microsoft, Microsoft URI XML.
XAML
Silverlight , XAML. Silverlight XML,
. XAML Silverlight . Silverlight Silverlight, , XML. , Microsoft , Silverlight .

XAML. ,

52

Silverlight ( ,
, Microsoft).
XML 
. .
<UserControl x:Class="SilverlightApplication1.Page"
xmlns:w="clr-namespace:Widgets;assembly=WidgetLibrary"
...
.
XML.
XAML. w,
,
.
.NET. 
Widgets. , 
,
XML , 
.
. WidhetLibrary.dll. .dll . Silver
light XAP,
.

, Silverlight CLR. Silverlight


. Silverlight. Visual Studio
Silverlight, Silverlight Class Library ( Silverlight).
.NET XML, 
XAML. ,
Widgets HotButton,
.
<w:HotButtonj Text=" !" Click="DoSomething">
</w:HotButton>


XAML ,
. , 
, , 
. XAML
Class.
1 <UserControl x:Class="SilverlightApplication1.Page"
x Class XAML. ,
Class XAML, Silverlight.
Class Silverlight 
, .
SilverlightApplication1.Page, UserControl. 
,
.

XAML

53

XAML , 
C#. Page.xaml Visual Studio
Page.xaml.cs. Page.xaml.cs.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApplication1
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
}
}
Page . 
, , 
InitializeComponent() . InitializeComponent() , 
.

InitializeComponent() Silverlight.
. , ,
, InitializeComponent().



, , ,
..
, Name ()
XAML. Grid 
Name, .
6 <Grid x:Name="LayoutRoot" Background="White">
7 </Grid>
Name XAML
:
private System.Windows.Controls.Grid layoutRoot;

LayoutRoot.
Name XAML 
. (,
FrameworkElement, Silverlight)

54

Name, .

Name.

Windows Forms . Silverlight . , Name


. ( ).
.

XAML
, 
Grid. , 
, .
. 2.1 EightBall,
. , , 
. 
.

. 2.1. ,

: Grid ( 
Silverlight),
TextBox ( ) Button (). , 
, , 
. ,
( ).
<UserControl x:Class="EightBall.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="grid1">
<Grid.Background>
...
</Grid.Background>
<Grid.RowDefinitions>

XAML

55

...
</Grid.RowDefinitions>
<TextBox x:Name="txtQuestion" ... >
...
</TextBox>
<Button x:Name="cmdAnswer" ... >
...
</Button>
<TextBox x:Name="txtAnswer" ... >
...
</TextBox>
</Grid>
</UserControl>

XAML.


. , 
TextBox ,
.
<TextBox x:Name="txtQuestion"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
FontFamily="Verdana" FontSize="24" Foreground="Green" ... >
, System.Windows.Controls.TextBox
: VerticalAlignment ( 
), HorizontalAlignment ( ), FontFamily (
), FontSize ( ) Foreground ( ). 
.

, : , . , XML. &quot;, &lt;, &gt;. ,


XAML, C#.
XML . 
, .NET. 
: , (VerticalAlignment HorizontalAlignment), (FontFamily), 
(FontSize) Brush ( Foreground).
, 
XAML , 
.NET Framework.
.
1. , TypeConverter (
). , , 
. , 
Foreground,
.

56

2
2. TypeConverter,
.
, Foreground Brush ().
Brush
BrushConverter, Brush typeof(BrushConverter) TypeConverter.

, 
, XAML
.
, , . 
, ,
. , 
,
TypeConverter .
,
.
. , 
, .
. XAML,
, , 
.

XAML, XML, . , <button> <Button> .


. , Foreground="White" Foreground="white" .


, . 
, , 
. 
, , 
, , , .
, XAML 
. __._. , Grid Background, . 
, , 
Grid.Background, .
<Grid x:Name="grid1">
<Grid.Background>
...
</Grid.Background>
...
</Grid>
, , 
. 
.

XAML

57

?
. 
EightBall (. . 2.1) .
LinearGradientBrush:
<Grid x:Name="grid1">
<Grid.Background>
<LinearGradientBrush>
</LinearGradientBrush>
</Grid.Background>
...
</Grid>
LinearGradientBrush Silverlight, 
XML, .
LinearGradientBrush . ,
. LinearGradientBrush.GradientStops GradientStop. GradientStops ,
. .
<Grid x:Name="grid1">
<Grid.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Grid.Background>
...
</Grid>
GradientStops GradientStop.
GradientStop Offset Color. 
.
<Grid x:Name="grid1">
<Grid.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="Yellow" />
<GradientStop Offset="0.50" Color="White" />
<GradientStop Offset="1.00" Color="Purple" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Grid.Background>
...
</Grid>

, , , (
).
.
XAML C#,
. , , 
, .

58

LinearGradientBrush brush = new LinearGradientBrush();


GradientStop gradientStop1 = new GradientStop();
gradientStop1.Offset = 0;
gradientStop1.Color = Colors.Yellow;
brush.GradientStops.Add(gradientStop1);
GradientStop gradientStop2 = new GradientStop();
gradientStop2.Offset = 0.5;
gradientStop2.Color = Colors.White;
brush.GradientStops.Add(gradientStop2);
GradientStop gradientStop3 = new GradientStop();
gradientStop3.Offset = 1;
gradientStop3.Color = Colors.Purple;
brush.GradientStops.Add(gradientStop3);
grid1.Background = brush;


, XAML 
, 
. Silverlight 
.
.
, FontFamily ( ), Foreground ( ) Text ( ).

. , 
,
.
.
,
_._. 
XAML .
EightBall 
.
<TextBox ... Grid.Row="0">
[ ]
</TextBox>
<Button ... Grid.Row="1">
! !
</Button>
<TextBox ... Grid.Row="2">
[ ]
</TextBox>
. 
. XAML 
, _.
Set_().
Grid, Row (),
Grid.SetRow().
Set_()
: . 

XAML

59

, Grid.Row TextBox 
XAML .
Grid.SetRow(txtQuestion, 0);

. , 
Grid, , 
, TextBox.
, TextBox
DependencyObject, Silverlight. 
DependencyObject
(dependency properties). 
. 4.
Grid.SetRow() ,
_.SetValue(). 
EightBall.
txtQuestion.SetValue(Grid.RowProperty, 0);
Silverlight.
. ,
Row ,
. 
(, FrameworkElement) 
. (public) ,
( 
Grid). , 
, .


XAML 
. Grid, 
, , TextBox Button.
XAML ,
. 
.
IList<T>,
IList<T>.Add() .
IDictionary<T>, 
IDictionary<T>.Add()
.
x:Key, .
ContentProperty, 
.
(. EightBall . 2.1), LinearGradientBrush
GradientStop, .
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="Red" />
<GradientStop Offset="0.50" Color="Indigo" />
<GradientStop Offset="1.00" Color="Violet" />

60

</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
XAML LinearGradientBrush.GradientStops , .
( GradientStop) 
. ,
GradientStops GradientStopCollection,
IList. (
), GradientStop
IList.Add().
GradientStop gradientStop1 = new GradientStop();
gradientStop1.Offset = 0;
gradientStop1.Color = Colors.Red;
IList list = brush.GradientStops;
list.Add(gradientStop1);
.
, .
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.00" Color="Red" />
<GradientStop Offset="0.50" Color="Indigo" />
<GradientStop Offset="1.00" Color="Violet" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>

null, , , . , , , .
. , 
Grid, .
<Grid x:Name="grid1">
...
<TextBox x:Name="txtQuestion" ... >
...
</TextBox>
<Button x:Name="cmdAnswer" ... >
...
</Button>
<TextBox x:Name="txtAnswer" ... >
...
</TextBox>
</Grid>
,
. , Grid 
IList IDictionary. Grid
ContentProperty, ,
. ContentProperty Panel, Grid.

XAML

61

[ContentPropertyAttribute("Children")]
public abstract class Panel : FrameworkElement

Children ().
XAML , ,
( , IList
IDictionary). Panel.Children UIElementCollection, IList,
IList.Add() .
, XAML
Grid 
Grid.Children.Add().
txtQuestion = new TextBox();
...
grid1.Children.Add(txtQuestion);
cmdAnswer = new Button();
...
grid1.Children.Add(cmdAnswer);
txtAnswer = new TextBox();
...
grid1.Children.Add(txtAnswer);
, , 
. Grid 
, (. 3).


Silverlight VisualTreeHelper, . VisualTreeHelper : GetParent(),
, ; GetChildrenCount(),
, ; GetChild(), , .
VisualTreeHelper , , Silverlight . , , Items, Children,
Content ().
VisualTreeHelper
.
VisualTreeHelper ,
, . , VisualTreeHelper ListBox
, , Border, ScrollViewer,
Grid, , .. VisualTreeHelper ,
, .
.
private void Clear(DependencyObject element)
{
// ,

62

2
TextBox txt = element as TextBox;
if (txt != null) txt.Text = "";
//
int children = VisualTreeHelper.GetChildrenCount(element);
for (int i = 0; i < children; i++)
{
DependencyObject child = VisualTreeHelper.GetChild(element, i);
Clear(child);
}

}
, Clear() . , Clear(this);.

. 
. 
_="_".
, Button () Click
(). .
<Button ... Click="cmdAnswer_Click">
, cmdAnswer_Click.
, .. , 
Click. .
private void cmdAnswer_Click(object sender,
RoutedEventArgs e)
{
AnswerGenerator generator = new AnswerGenerator();
txtAnswer.Text =
generator.GetRandomAnswer(txtQuestion.Text);
}

. Silverlight
: 
Name ( ),
.
, .

EightBall
, XAML, 
, . 2.1. XAML .
<UserControl x:Class="EightBall.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="grid1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

XAML

63

<TextBox VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="10,10,13,10" x:Name="txtQuestion"
TextWrapping="Wrap" FontFamily="Verdana" FontSize="24"
Grid.Row="0">
[ ]
</TextBox>
<Button VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="10,0,0,20" Width="127" Height="23"
x:Name="cmdAnswer"
Click="cmdAnswer_Click" Grid.Row="1">
! !
</Button>
<TextBox VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="10,10,13,10" x:Name="txtAnswer"
TextWrapping="Wrap"
IsReadOnly="True" FontFamily="Verdana" FontSize="24"
Foreground="Green"
Grid.Row="2">
[ ]
</TextBox>
<Grid.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="Yellow" />
<GradientStop Offset="0.50" Color="White" />
<GradientStop Offset="1.00" Color="Purple" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Grid.Background>
</Grid>
</UserControl>
,
XAML . .
XAML . , 
XAML ,
.

Silverlight , 
XAML. .
. ,
. ,
,
.
. 
. ,

64

2
, .
, 
.
.
( ), 
, .

,
, Silverlight. ,
XAML, , .
6.


Resources (),
. ,
.
, 
, ,
. 
.
EighBall. GradientBrush,
Grid, .
Grid .
<UserControl x:Class="EightBall.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<UserControl.Resources>
<LinearGradientBrush x:Key="BackgroundBrush">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="Yellow" />
<GradientStop Offset="0.50" Color="White" />
<GradientStop Offset="1.00" Color="Purple" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</UserControl.Resources>
...
</UserControl>
Key, 
( x XAML
Silverlight). Key , 
. , ,
.
( ), 
( ). BackgroundBrush (
) , LinearGradientBrush ( ) ThreeColorBrush ( ).

.NET ( ).
, XAML. , , .

XAML

65

XAML,
.
(markup extension) ,
. XAML
.
StaticResource, Grid.
<Grid x:Name="grid1"
Background="{StaticResource BackgroundBrush}">
EightBall, 
, 
. 
, , 
.
, ,
. 
, XAML
.

Static () , WPF :
. Silverlight .


, Silverlight 
. 
.
<UserControl x:Class="Resources.ResourceHierarchy"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<StackPanel.Resources>
<LinearGradientBrush x:Key="ButtonFace">
<GradientStop Offset="0.00" Color="Yellow" />
<GradientStop Offset="0.50" Color="White" />
<GradientStop Offset="1.00" Color="Purple" />
</LinearGradientBrush>
</StackPanel.Resources>
<Button Content=" " Margin="5"
Background="{StaticResource ButtonFace}"></Button>
<Button Content=" " Margin="5"
Background="{StaticResource ButtonFace}"></Button>
</StackPanel>
</Grid>
</UserControl>

66

2
. 2.2 , 1.

. 2.2.

.
, Silverlight 
, StackPanel ( ).
StackPanel , Silverlight , 
Grid, UserControl.
, Silverlight
, <Application.Resources>
App.xaml. ,
, .
, .


. , , .
, .
, .
. 
.
, <StackPanel.Resources> , 
, XAML ,
. ,
XAML .
, . , 
, .
, Silverlight , 
. , <UserControls.Resources> , .


. 
.
, ,
. , LinearGradientBrush
1 Chapter02\Resources .
, .
.
. . .

XAML

67

<UserControl.Resources> ButtonFace,
.
LinearGradientBrush brush =
(LinearGradientBrush)this.Resources["ButtonFace"];
//
Color color = brush.GradientStops[0].Color;
brush.GradientStops[0].Color = brush.GradientStops[2].Color;
brush.GradientStops[2].Color = color;
,
. ,
(. 2.3).

. 2.3.

. Silverlight
, . 
, . ,
, .
SolidColorBrush brush = new SolidColorBrush(Colors.Yellow);
this.Resources["ButtonFace"] = brush;
, 
Name.
. 
. StaticResource 
. , , 
StaticResource. 
, .

XAML
. XAML
. Visual Studio XAML ,
. ,
XAML .
, . XAML 
Silverlight. XAML, 
Silverlight . ,
XAML ( 
, , 
, , ) .

68

, , Silverlight 
, 
Visual Studio Expression Blend 
XAML.
Silverlight . 
, , 
,
. . 
, Microsoft , 
.
, XAML.