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，如需转载请自行联系原作者