Metro Style App开发快速入门 之基本控件使用总结

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