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。

以上只是自己的一點學習心得，如果有什么意見和建議，歡迎大家提出！當然自己還在學習研究中，希望與大家共同學習，一起進步！