最近在研究Metro style App的控件使用， 下面我简单介绍下Metro style App的一些基本控件的使用方法。以后的我会介绍其他控件的使用。
运行环境请参考：Metro Style App之文件访问操作示例。当然控件使用最好自己操作一下比较好。
1、ProgressRing控件
<ProgressRing HorizontalAlignment=
"Left"
Height=
"20"
Margin=
"38,43,0,0"
IsActive=
"{Binding IsChecked,ElementName=IsActiveCBX}"
VerticalAlignment=
"Top"
Width=
"55"
/>
<CheckBox x:Name=
"IsActiveCBX"
IsChecked=
"True"
Content=
"CheckBox"
HorizontalAlignment=
"Left"
Height=
"22"
Margin=
"63,103,0,0"
VerticalAlignment=
"Top"
Width=
"17"
RenderTransformOrigin=
"1.05900001525879,1.1599999666214"
/>
|
效果图：
2、进度条ProgressBar
<ProgressBar HorizontalAlignment=
"Left"
Maximum=
"100"
IsIndeterminate=
"{Binding IsChecked,ElementName=CB1}"
ShowPaused=
"{Binding IsChecked,ElementName=CB2}"
ShowError=
"{Binding IsChecked,ElementName=CB3}"
Value=
"{Binding Text,ElementName=Value, Converter={StaticResource StringToDoubleConverter}}"
Margin=
"169,43,0,0"
VerticalAlignment=
"Top"
Width=
"100"
/>
<TextBox x:Name=
"Value"
Width=
"80"
Height=
"30"
Margin=
"169,71,1117,665"
/>
<CheckBox x:Name=
"CB1"
Content=
"IsIndeterminate"
HorizontalAlignment=
"Left"
Margin=
"169,108,0,0"
VerticalAlignment=
"Top"
/>
<CheckBox x:Name=
"CB2"
Content=
"ShowPaused"
HorizontalAlignment=
"Left"
Height=
"19"
Margin=
"169,158,0,0"
VerticalAlignment=
"Top"
Width=
"155"
/>
<CheckBox x:Name=
"CB3"
Content=
"SHowError"
HorizontalAlignment=
"Left"
Height=
"14"
Margin=
"169,208,0,0"
VerticalAlignment=
"Top"
Width=
"119"
/>
|
3、ToggleSwitch控件，OnContent，OffContent也可以采用Binding的形式。ToggleSwitch控件就像一个开关。
<ToggleSwitch Header=
"Head Content"
OnContent=
"On Content"
OffContent=
"Off Content"
HorizontalAlignment=
"Left"
Height=
"54"
Margin=
"324,49,0,0"
VerticalAlignment=
"Top"
Width=
"98"
/>
|
4、CheckBox控件。IsHitTestVisible鼠标单击时，CheckBox无效。IsTabStop属性：当按Tabl时，直接跳到下一个。
<CheckBox x:Name=
"IsChecked"
IsHitTestVisible=
"False"
IsTabStop=
"False"
Content=
"IsChecked "
Margin=
"10,0,0,0"
VerticalAlignment=
"Center"
IsChecked=
"{Binding IsChecked, ElementName=CheckBox1}"
/>
|
5、ComboBox控件。
<ComboBox HorizontalAlignment=
"Left"
Margin=
"324,126,0,0"
VerticalAlignment=
"Top"
Width=
"120"
SelectionChanged=
"ComboBox_SelectionChanged"
SelectedIndex=
"0"
>
<TextBlock>Item1</TextBlock>
<TextBlock>Item2</TextBlock>
<TextBlock>Item3</TextBlock>
<TextBlock>Item4</TextBlock>
</ComboBox>
|
获得选中的Item值。
private
void
ComboBox_SelectionChanged(
object
sender, SelectionChangedEventArgs e)
{
string
selectItem = ((TextBlock)e.AddedItems[0]).Text;
}
|
6、Image控件。
ToolTipService.ToolTip="Oregon Coast"， ToolTipService.Placement="Right" 这两个属性表示鼠标移动到图片时显示的文本以及文本位置。
<Image x:Name=
"Image1"
Source=
"images/image1.jpg"
Width=
"200"
Height=
"100"
Stretch=
"UniformToFill"
Margin=
"5"
ToolTipService.ToolTip=
"Oregon Coast"
ToolTipService.Placement=
"Right"
/>
|
7、Popup控件。
当单击Button时，显示Popub控件，再次单击Button时，则隐藏Popup控件。
Popup popup =
new
Popup();
bool
bShowPopup =
false
;
private
void
PopupButton_Click(
object
sender, RoutedEventArgs e)
{
bShowPopup = !bShowPopup;
if
(bShowPopup)
{
PopupButton.Content =
"Hide Popub"
;
popup.Child =
new
PopuPanelControl();
popup.VerticalOffset = 500;
popup.HorizontalOffset = 100;
popup.IsOpen =
true
;
}
else
{
PopupButton.Content =
"Show Popup"
;
popup.IsOpen =
false
;
}
}
|
下面是自定义的Popup控件。当然可以根据自己的喜好来定义。
<UserControl
x:Class=
"BasicHandle.BasicControl.PopuPanelControl"
xmlns=
"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=
"http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local=
"using:BasicHandle.BasicControl"
xmlns:d=
"http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc=
"http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable=
"d"
d:DesignHeight=
"300"
d:DesignWidth=
"400"
>
<Border BorderBrush=
"#19000000"
BorderThickness=
"1"
Background=
"White"
>
<Grid>
<TextBlock HorizontalAlignment=
"Left"
Foreground=
"Black"
Margin=
"35,69,0,0"
TextWrapping=
"Wrap"
Text=
"This is Popup Panel Control"
VerticalAlignment=
"Top"
Height=
"97"
Width=
"181"
/>
</Grid>
</Border>
</UserControl>
|
7、自定义Button控件。
VisualStateManager.VisualStateGroups用来管理控件母板的显示效果的。
<Style x:Key=
"CustomButtonStyle"
TargetType=
"Button"
>
<Setter Property=
"Background"
Value=
"Orange"
/>
<Setter Property=
"Foreground"
Value=
"Black"
/>
<Setter Property=
"FontFamily"
Value=
"Comic Sans MS"
/>
<Setter Property=
"FontSize"
Value=
"30"
/>
<Setter Property=
"Template"
>
<Setter.Value>
<ControlTemplate TargetType=
"Button"
>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name=
"CommonStates"
>
<VisualState x:Name=
"Normal"
/>
<VisualState x:Name=
"PointerOver"
>
<Storyboard>
<ColorAnimation Duration=
"0"
To=
"Red"
Storyboard.TargetProperty=
"(Rectangle.Fill).(SolidColorBrush.Color)"
Storyboard.TargetName=
"Border"
/>
</Storyboard>
</VisualState>
<VisualState x:Name=
"Pressed"
>
<Storyboard>
<ColorAnimation Duration=
"0"
To=
"Black"
Storyboard.TargetProperty=
"(Rectangle.Fill).(SolidColorBrush.Color)"
Storyboard.TargetName=
"Border"
/>
<ColorAnimation Duration=
"0"
To=
"White"
Storyboard.TargetProperty=
"(TextBlock.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName=
"Content"
/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Rectangle x:Name=
"Border"
Stroke=
"Black"
Fill=
"Orange"
Margin=
"-5"
/>
<ContentPresenter x:Name=
"Content"
/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
|
如下图：当鼠标移动到控件时显示红色。
需要特别注意的是：Metro Style App采用Visual State。之前的触发器已经没有了。当然在这里我只是介绍Metro Style App控件的一些简单的用法，Metro Style App的Visual Manager不在此处介绍。
总结：Metro Style App的基本控件基本跟以前一样，改变比较大的事触发器没了，代之的是Visual State。
以上只是自己的一点学习心得，如果有什么意见和建议，欢迎大家提出！当然自己还在学习研究中，希望与大家共同学习，一起进步！
本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/archive/2012/03/15/2398338.html，如需转载请自行联系原作者
