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

最近在研究Metro style App的控件使用， 下面我简单介绍下[b]Metro style App的一些基本控件的使用方法。以后的我会介绍其他[b][b]控件的使用。[/b][/b][/b]

[b][b]运行环境请参考：Metro Style App之文件访问操作示例。当然[b]控件使用最好自己操作一下比较好。[/b][/b][/b]

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 [b][b]State[/b]。之前的触发器已经没有了。当然在这里我只是介绍Metro Style App控件的一些简单的用法，Metro Style App的Visual Manager不在此处介绍。[/b]

总结：[b]Metro Style App的基本控件基本跟以前一样，改变比较大的事触发器没了，代之的是Visual State。[/b]

以上只是自己的一点学习心得，如果有什么意见和建议，欢迎大家提出！[b]当然自己还在学习研究中，希望与大家共同学习，一起进步！[/b]