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。

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